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

效果图

服务端

html客户端接受的消息

接下来开始实现服务端

创建server.js

javascript 复制代码
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客户端代码

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就可以看到效果

相关推荐
FreeBuf_7 小时前
黄金旋律IAB组织利用暴露的ASP.NET机器密钥实施未授权访问
网络·后端·asp.net
Tanecious.8 小时前
C++--红黑树封装实现set和map
网络·c++
帽儿山的枪手9 小时前
追踪网络流量就这么简单 | 进阶篇 | conntrack
linux·windows·网络协议
yqcoder9 小时前
7. TCP 和 UDP 的区别
网络·网络协议·http
wanhengidc9 小时前
UDP服务器的优缺点都包含哪些?
服务器·网络协议·udp
weixin_4567325910 小时前
tcpdump交叉编译
网络·测试工具·tcpdump
chao_78910 小时前
frame 与新窗口切换操作【selenium 】
前端·javascript·css·selenium·测试工具·自动化·html
小猫会后空翻11 小时前
HTTPS与DNS
网络协议·http·https
IT WorryFree12 小时前
macos安装iper3
网络·macos·iperf·打流
hrrrrb12 小时前
【TCP/IP】14. 远程登录协议
网络·网络协议·tcp/ip