使用websocket与后端实时通信

高级

代码示例

// 前端代码
const socket = new WebSocket('ws://localhost:3000');
 
socket.onopen = () => {
  console.log('WebSocket连接已建立');
};
 
socket.onmessage = (event) => {
  console.log('收到消息:', event.data);
};
 
socket.onerror = (error) => {
  console.error('WebSocket连接发生错误:', error);
};
 
socket.onclose = () => {
  console.log('WebSocket连接已关闭');
};
 
// 后端代码(Node.js示例)
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 3000 });
 
wss.on('connection', (ws) => {
  console.log('客户端已连接');
 
  ws.on('message', (message) => {
    console.log(`收到消息: ${message}`);
    // 处理收到的消息，并向客户端发送响应
    ws.send('服务器收到消息: ' + message);
  });
 
  ws.on('close', () => {
    console.log('客户端已断开连接');
  });
});

实时通信流程

1. 客户端通过WebSocket与后端建立连接。
2. 后端使用WebSocket模块创建一个WebSocket服务器，并监听指定的端口。
3. 当客户端与后端成功建立连接时，会触发onopen事件，表示WebSocket连接已建立。
4. 客户端可以通过send()方法向后端发送消息，后端可以通过send()方法向客户端发送消息。
5. 当客户端接收到来自后端的消息时，会触发onmessage事件，客户端可以处理这些消息。
6. 当有任何错误发生时，会触发onerror事件。
7. 当客户端或后段关闭了连接时，会触发onclose事件。

通过以上实时通信流程，我们可以使用WebSocket实现前后段之间的实时通信。