前端web端使用WebSocket进行通信

WebSocket 是一种在 Web 开发中用于实现双向通信的协议，它允许客户端和服务器之间建立持久的连接，以便在连接上进行实时的数据传输。相较于传统的 HTTP 请求，WebSocket 具有更低的延迟和更高的效率，适用于需要实时性较高的场景，比如聊天应用、实时数据展示等。

WebSocket 的特点：

1. 双向通信： 客户端和服务器可以同时向对方发送消息，实现真正意义上的双向通信。
2. 持久连接： WebSocket 连接一旦建立，就会保持活跃状态，而不需要像 HTTP 请求那样在每次通信时重新建立连接。
3. 低延迟： 相较于传统的 HTTP 请求，WebSocket 的通信延迟更低，适用于实时性要求较高的场景。
4. 轻量级： WebSocket 协议的数据头部相对较小，通信效率较高。

使用 WebSocket 的基本流程：

1. 创建 WebSocket 连接： 在前端代码中使用 new WebSocket(url) 来创建一个 WebSocket 连接，其中 url 是 WebSocket 服务器的地址。
2. 处理连接事件： 监听 WebSocket 连接的 onopen、onmessage、onclose 和 onerror 事件，分别处理连接建立、消息接收、连接关闭和出错等情况。
3. 发送和接收消息： 使用 socket.send(message) 方法向服务器发送消息，并通过监听 onmessage 事件接收服务器发送的消息。

示例代码：

// 创建 WebSocket 连接
var socket = new WebSocket('ws://example.com');

// 监听 WebSocket 连接建立事件
socket.onopen = function(event) {
  console.log('WebSocket 连接已建立');
};

// 监听 WebSocket 接收到消息事件
socket.onmessage = function(event) {
  console.log('接收到消息：', event.data);
};

// 监听 WebSocket 连接关闭事件
socket.onclose = function(event) {
  console.log('WebSocket 连接已关闭');
};

// 监听 WebSocket 出错事件
socket.onerror = function(error) {
  console.error('WebSocket 出错：', error);
};

// 向服务器发送消息
function sendMessage(message) {
  socket.send(message);
}
// 接受服务器的消息
socket.addEventListener('message', e => {
        console.log('来自服务端的消息->', e)
    }, false)

代码解读：

1. var socket = new WebSocket('ws://example.com');：创建了一个新的 WebSocket 实例，指定连接的 URL 为 ws://example.com。这里的 ws:// 是 WebSocket 的标准协议前缀，表示使用 WebSocket 进行连接。

2. socket.onopen = function(event) { console.log('WebSocket 连接已建立'); };：当 WebSocket 连接成功建立时，会触发 onopen 事件，这里通过赋值函数来监听该事件，并在事件触发时在控制台输出 "WebSocket 连接已建立"。

3. socket.onmessage = function(event) { console.log('接收到消息：', event.data); };：当 WebSocket 接收到服务器发送的消息时，会触发 onmessage 事件，这里通过赋值函数来监听该事件，并在事件触发时在控制台输出收到的消息内容。

4. socket.onclose = function(event) { console.log('WebSocket 连接已关闭'); };：当 WebSocket 连接关闭时，会触发 onclose 事件，这里通过赋值函数来监听该事件，并在事件触发时在控制台输出 "WebSocket 连接已关闭"。

5. socket.onerror = function(error) { console.error('WebSocket 出错：', error); };：当 WebSocket 发生错误时，会触发 onerror 事件，这里通过赋值函数来监听该事件，并在事件触发时在控制台输出错误信息。

6. function sendMessage(message) { socket.send(message); }：定义了一个函数 sendMessage，用于向服务器发送消息，实际上就是调用 socket.send(message) 方法发送消息给服务器。

7. 这里使用了 addEventListener 方法来监听 WebSocket 实例对象 socket 的 message 事件。当收到来自服务端的消息时，会触发这个事件，然后执行相应的回调函数。在这个回调函数中，打印了来自服务端的消息内容 e，并附带一条提示信息。这种方式与直接给 onmessage 赋值回调函数的方式效果是相同的，只是写法上更加现代化和灵活。前端页面展示数据可以在addEventListener 方法下进行绑定。

8. 在这里可以用socket.close()方法销毁创建的WebSocket 实例

提示：

在前端使用全局 WebSocket 实例的好处在于能够在整个应用程序范围内共享同一个 WebSocket 连接，这样可以避免重复创建多个连接，节省资源和减少连接数量。同时，全局实例可以使得在不同模块或组件中都能方便地访问和操作同一个 WebSocket 连接，提高了代码的灵活性和可维护性。如下示例

// 创建全局 WebSocket 实例
this.socket =null

// 初始化 WebSocket 连接
function initWebSocket(url) {
  this.socket = new WebSocket(url);
}

// 销毁 WebSocket 连接
function destroyWebSocket() {
  if (this.socket ) {
    this.socket.close();
    this.socket = null;
  }
}

// 使用示例
initWebSocket('ws://example.com');

// 在某个时刻销毁 WebSocket 连接
setTimeout(function() {
  destroyWebSocket();
}, 5000); // 5 秒后销毁连接