使用js和nodejs完成websocket双向通讯

发布时间 2023-12-16 23:17:12作者: 万金流

如题。感谢AI。

先用js完成一个最简单的例子。

web端:

html:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="j1.js"></script>
    </head>
    <body onload="myinit()">
        内容:<input  type="text" id="t1"/>
        <input type="button" value="执行" onclick="f1();"/>
    </body>
</html>

j1.js: 

let socket;
function myinit()
{
    // 创建 WebSocket 连接
    socket = new WebSocket('ws://127.0.0.1:8080');
    
    // 当连接建立时触发
    socket.onopen = () => {
      console.log('连接已建立');
      
      // 发送文本消息
      socket.send('hi');
    };
    
    // 当接收到服务器消息时触发
    socket.onmessage = (event) => {
      console.log('接收到服务器消息:', event.data);
    };
    
    // 当连接关闭时触发
    socket.onclose = () => {
      console.log('连接已关闭');
    };
    
    // 当连接发生错误时触发
    socket.onerror = (error) => {
      console.error('WebSocket 错误:', error);
    };
}

function f1()
{
    t1=document.querySelector("#t1");
    tosend=t1.value;
    socket.send(tosend);
}

代码很简单,略。

 


 

服务端

使用的是websocket,需要先安装websocket插件“ws”。

App.js代码:

const WebSocket = require('ws');

// 创建 WebSocket 服务器
const wss = new WebSocket.Server({ port: 8080 });

// 监听连接事件
wss.on('connection', (ws) => {
  console.log('客户端已连接');

  // 监听消息事件
  ws.on('message', (message) => {
    disp=message.toString();
    console.log('接收到消息:', disp);

    // 在消息后面添加 "Hi from server"
    const response = message + ' Hi from server';

    // 发送回客户端
    ws.send(response);
  });

  // 监听关闭事件
  ws.on('close', () => {
    console.log('客户端已断开连接');
  });
});

console.log('WebSocket 服务器已启动');

注意:消息默认以二进制发送,服务端想要解析消息内容,需要toString。

运行结果正常。 


 

想要维护一个客户列表,向客户广播消息,服务端代码修改为:

 1 const WebSocket = require('ws');
 2 
 3 // 创建 WebSocket 服务器
 4 const wss = new WebSocket.Server({ port: 8080 });
 5 
 6 // 用于存储已连接的客户端
 7 //clients不可再分配空间,但里面的值可以修改。
 8 const clients = new Set();
 9 
10 // 监听连接事件
11 wss.on('connection', (ws) => {
12   console.log('客户端已连接');
13 
14   // 将新连接的客户端添加到列表中
15   clients.add(ws);
16 
17   // 监听消息事件
18   ws.on('message', (message) => {
19     console.log('接收到消息:', message.toString());
20     broadcastMessage("server:"+message);
21   });
22 
23   // 监听关闭事件
24   ws.on('close', () => {
25     console.log('客户端已断开连接');
26     // 从列表中移除断开连接的客户端
27     clients.delete(ws);
28   });
29 });
30 
31 // 定义向所有客户端发送消息的函数
32 function broadcastMessage(message) {
33   clients.forEach((client) => {
34     // 发送消息给每个客户端
35     client.send(message);
36   });
37 }
38 
39 // 启动定时器,每隔一段时间向所有客户端发送消息
40 // setInterval(() => {
41 //   broadcastMessage('hi');
42 // }, 5000);
43 
44 console.log('WebSocket 服务器已启动');

测试通过。 


小结:js不愧是最简单的东西。