websocket

高级

适用范围:

1. 全双工通信-同时上行下行-同时上传下载-相互通信-相互流通-相互交通
2. 发送接受互联网请求-响应网络请求

特点

• 可以建立持久链接

梗概:

• websocket是一种协议, 需要前后端同时适配
  • 与http是互不相通的

使用指南

• child::

  使用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实现前后段之间的实时通信。

  指向原始笔记的链接