websocket使用，双向通信（前端篇）

websocket

一、什么是websocket？

WebSocket 是一种基于 TCP 的网络协议。在 2009 年诞生，2011 年被 W3C 定为标准 
（万维网联盟：Web技术领域具有权威和影响力的国际中立性技术标准机构。））

WebSocket 是一种全双工通信的协议，双端建立连接成功了，既允许客户端向服务器主动发送消息，也允许服务器主动向客户端发送消息。在 WebSocket 中，客户端和服务器只需要完成一次握手，两者之间就可以建立持久性的连接，进行双向数据传输。

• 聊天室
• 在线协作编辑
• 实时通知和提醒（CRM-消息通知；H5-签到页面实时刷新）

二、为什么使用websocket？

答案很简单，因为 HTTP 协议有一个缺陷：通信只能由客户端发起。

websocket未出现之前实时通讯的解决方案

1、短轮询（Short Polling）

短轮询是指客户端每隔一段时间就询问一次服务器是否有新的消息，如果有就接收消息。

优点

• 实现简单；
• 浏览器兼容性较好

缺点

• 有一定延迟、服务器压力较大

• 浪费带宽流量、大部分是无效请求

• 延迟：客户端30s发送请求，

  ​ 服务端在第15s左右有消息，

2、长轮询（Long Polling）

 客户端发送一个 HTTP 请求到服务器，服务器保持请求打开，直到有新数据可发送，然后立即回复给客户端。客户端收到响应后，再发送新的请求，如此往复。

优点

• 减少轮询次数，低延迟

缺点

• 服务器需要保持大量连接。

等等。。。

相比之下，WebSocket 允许双方自由通讯，减少一部分限制，大大提高了效率和性能

三、如何使用websocket？

1、创建websocket对象

const socket = new WebSocket('ws://example.com/socket');
// 在这里，ws://example.com/socket 是 WebSocket 服务器的地址。

websocket是一种全新的协议，不属于http无状态协议，协议名为"ws"加密"wss".便于开发者理解和使用

2、处理连接事件

常用属性

• onopen: 连接建立成功时触发。

• onmessage: 接收到服务器发送的消息时触发。

• onclose: 连接关闭时触发。

• onerror: 连接发生错误时触发。

• socket.onopen = function(event) {
      console.log('连接已打开');
  };
  
  socket.onmessage = function(event) {
      console.log('接收到消息: ' + event.data);
  };
  
  socket.onclose = function(event) {
      console.log('连接已关闭');
  };
  
  socket.onerror = function(error) {
      console.error('连接发生错误: ' + error.message);
  };
  
  

方法

• websocket.send(data) ：向服务器发送消息

• websocket.close() ：当不再需要连接时，可以调用 close 方法关闭连接

• // 发送消息
  socket.send('Hello, WebSocket!');
  // 关闭链接
  socket.close();
  

心跳重连机制

问题：

websocket在连接后，如果长时间服务端和客户端不发消息，连接可能会断开，或者存在网络忽然断开的情况，这时服务器端并没有触发onclose的事件。服务器会继续向客户端发送多余的信息，这些数据会丢失。

为了解决上面的问题，就需要⼀种方案来检测客户端和服务端是否处于正常的连接状态。

心跳机制的目的是定期发送小的探测消息，以确保连接仍然有效，如果连接断开或出现问题，可以及时发现并采取措施。

实现方法

1、建立连接后定义心跳间隔

const heartbeatInterval = 30000; // 30秒

2、定义心跳消息

const heartbeatMessage = 'ping';

• 发送方->接收方：ping – 客户端
• 接收方->发送方：pong – 服务端

3、设置心跳定时器

一旦WebSocket连接打开，使用setInterval函数设置一个定时器，以便每隔一段时间发送心跳消息。

socket.onopen = function(event) {
   console.log('WebSocket连接已打开');
   heartbeat = setInterval(() => {
        socket.send(heartbeatMessage);
    }, heartbeatInterval);
};

4、处理心跳消息

socket.onmessage = function(event) {
    const message = event.data;

    if (message === 'pong') {
        console.log('接收到心跳消息');
        // 在这里可以执行一些处理心跳消息的操作
    } else {
        console.log('接收到其他消息：', message);
        // 处理其他类型的消息
    }
};

5、清除心跳定时器

当WebSocket连接关闭时，清除之前设置的心跳定时器，以防止继续发送心跳消息。

socket.onclose = function(event) {
   console.log('WebSocket连接已关闭');
   clearInterval(heartbeat);
};