HTML 中创建 WebSocket服务与接收webSocket发送内容

效果图

服务端

html客户端接受的消息

接下来开始实现服务端

创建server.js

const WebSocket = require('ws');

const wss = new WebSocket.Server({ port: 8877 });

wss.on('connection', function connection(ws) {
    console.log('WebSocket connection opened.');

    // 每隔 5 秒发送一次消息
    const interval = setInterval(function() {
        const message = {
            "departName": "不健康科室",
            "patientName1": "不健康人1",
            "patientName2": "11111",
            "patientName3": "王五",
            "patientName4": "赵六",
            "patientName5": "小明",
            "patientName6": "小红"
        };

        // 将 JavaScript 对象转换为 JSON 字符串
        const jsonMessage = JSON.stringify(message); // 要发送的消息内容
        console.log('Sending message:', jsonMessage);
        ws.send(jsonMessage); // 发送 JSON 字符串
    }, 5000);

    ws.on('close', function close() {
        console.log('WebSocket connection closed.');
        clearInterval(interval);
    });
});

接下来,安装 ws 模块,它是一个 WebSocket 库,用于创建 WebSocket 服务器。你可以通过运行 npm install ws 命令来安装它。

cmd命令 执行 “npm install ws”

安装好后生成的文件

cmd命令终端中运行 node server.js 启动服务器

html客户端代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>WebSocket Client</title>
</head>
<body>
  <script>
    const ws = new WebSocket('ws://localhost:8877');

    ws.onopen = function() {
      console.log('WebSocket connected');
    };

    ws.onmessage = function(event) {
      console.log('Received message from server:', event.data);
    };
  </script>
</body>
</html>

直接浏览器打开html就可以看到效果

相关推荐

  1. WebSocket发送接收数据

    2024-04-23 10:34:02       38 阅读
  2. Springboot-接入WebSocket服务

    2024-04-23 10:34:02       43 阅读
  3. python用websockets创建服务websocket创建客户端

    2024-04-23 10:34:02       55 阅读
  4. vue如何使用websocket接收数据和发送数据

    2024-04-23 10:34:02       40 阅读
  5. websocket发送数据

    2024-04-23 10:34:02       36 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-04-23 10:34:02       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-04-23 10:34:02       100 阅读
  3. 在Django里面运行非项目文件

    2024-04-23 10:34:02       82 阅读
  4. Python语言-面向对象

    2024-04-23 10:34:02       91 阅读

热门阅读

  1. hive通过正则过滤其他字段

    2024-04-23 10:34:02       39 阅读
  2. 数学分析复习:洛必达法则、泰勒公式

    2024-04-23 10:34:02       40 阅读
  3. AntD上传文件 结合Axios 服务端由Spring MVC接收

    2024-04-23 10:34:02       32 阅读
  4. Hive第二篇HQL

    2024-04-23 10:34:02       37 阅读
  5. Hive第一篇简介

    2024-04-23 10:34:02       30 阅读
  6. 7、docker 集群

    2024-04-23 10:34:02       36 阅读
  7. 数仓建模—维度建模之维度表

    2024-04-23 10:34:02       39 阅读
  8. VaR模型

    2024-04-23 10:34:02       29 阅读
  9. Docker搭建htpcmanager

    2024-04-23 10:34:02       38 阅读