前端实现websocket的应用场景以及逻辑实现

深碍√TFBOYSˉ_ 2024-03-02 08:08 89阅读 0赞

## 前端实现websocket的应用场景以及逻辑实现 ##

前端在基础业务逻辑外，根据具体的业务需求还可以实现更复杂的交互逻辑，如：

*  数据同步：WebSocket 可用于实时更新数据，当服务器端数据发生变化时，通过 WebSocket 将变化的数据推送给前端，以保持数据的实时同步。
 *  聊天功能：使用 WebSocket 实现实时聊天功能，前端用户可以发送消息给服务器并接收其他用户发送的消息。
 *  多用户协同编辑：通过 WebSocket 将多个用户之间的编辑操作实时同步，实现多人协同编辑功能。
 *  实时数据展示：将实时数据从服务器传输到前端，展示在页面上，如股票行情、实时天气等。

## websocket实现逻辑 ##

1.  连接建立：
    
     *  当 WebSocket 连接成功建立时，触发 `onopen` 事件处理程序。
     *  可以在该处理程序中发送认证信息或其他初始化数据给服务器，例如用户身份验证、订阅特定频道等。
2.  消息收发：
    
     *  当收到服务器发送的消息时，触发 `onmessage` 事件处理程序。
     *  可以解析并处理服务器发送的消息内容，并根据业务需求进行相应的操作，如展示在页面上、更新本地数据等。
     *  如果有需要，可以将某些消息分类，使用不同的处理逻辑。
3.  错误处理：
    
     *  当发生错误时，触发 `onerror` 事件处理程序。
     *  可以在该处理程序中记录日志、展示错误提示信息等。
4.  连接关闭：
    
     *  当 WebSocket 连接关闭时，触发 `onclose` 事件处理程序。
     *  可以在该处理程序中进行必要的清理工作、重新连接尝试或展示状态信息。
5.  断线重连：
    
     *  如果由于网络问题等原因导致 WebSocket 连接断开，可以尝试自动进行断线重连。
     *  可以在 `onclose` 事件处理程序中实现重新连接逻辑，例如等待一定时间后再次尝试连接服务器。
6.  心跳保持：
    
     *  如果需要保持 WebSocket 连接的活跃状态，可以实现心跳机制。
     *  可以定时向服务器发送心跳消息，确保连接不会因为长时间无数据传输而断开。

## 代码示例： ##

// 创建 WebSocket 连接
    const socket = new WebSocket('ws://example.com/socket');
    
    // 连接成功时触发
    socket.onopen = function(event) {
        
      console.log('WebSocket 连接已建立');
      
      // 发送消息到服务器
      socket.send('Hello, server!');
    };
    
    // 接收到服务器发送的消息时触发
    socket.onmessage = function(event) {
        
      const message = event.data;
      console.log('收到消息：', message);
      
      // 关闭 WebSocket 连接
      socket.close();
    };
    
    // 连接关闭时触发
    socket.onclose = function(event) {
        
      console.log('WebSocket 连接已关闭');
    };
    
    // 连接发生错误时触发
    socket.onerror = function(error) {
        
      console.error('WebSocket 错误:', error);
    };

首先通过 `new WebSocket(url)` 创建了 WebSocket 对象，并指定要连接的服务器地址。然后，通过设置 WebSocket 对象的各种事件处理程序来处理不同的事件，例如 `onopen` 处理连接成功、`onmessage` 处理接收消息、`onclose` 处理连接关闭等。在 `onopen` 处理程序中，可以使用 `send()` 方法向服务器发送消息。而在 `onmessage` 处理程序中，可以通过 `event.data` 获取服务器发送的消息内容。

需要根据实际情况将 `ws://example.com/socket` 替换为实际的 WebSocket 服务器地址。通常，后端会提供一个 WebSocket 服务器供前端连接。

另外，需要注意的是，WebSocket 连接是异步的，并且在浏览器中只能与支持 WebSocket 协议的服务器进行连接。在开发过程中，可以使用 `localhost` 或部署在本地的服务器进行测试。

## 前端实现 WebSocket 的心跳监听 ##

在前端实现 WebSocket 的心跳监听，可以使用定时器定期发送心跳消息来保持连接的活跃状态。以下是一个示例代码：

// 创建 WebSocket 连接
    const socket = new WebSocket('ws://example.com/socket');
    
    // 心跳相关变量
    let heartbeatTimer = null;
    const heartbeatInterval = 30000; // 心跳间隔时间，单位为毫秒
    
    // 连接成功时触发
    socket.onopen = function(event) {
        
      console.log('WebSocket 连接已建立');
      
      // 开始发送心跳消息
      startHeartbeat();
    };
    
    // 接收到服务器发送的消息时触发
    socket.onmessage = function(event) {
        
      const message = event.data;
      console.log('收到消息：', message);
      // 处理接收到的消息
      
      // 重置心跳计时器
      resetHeartbeat();
    };
    
    // 连接关闭时触发
    socket.onclose = function(event) {
        
      console.log('WebSocket 连接已关闭');
      
      // 停止心跳计时器
      stopHeartbeat();
    };
    
    // 连接发生错误时触发
    socket.onerror = function(error) {
        
      console.error('WebSocket 错误:', error);
      
      // 停止心跳计时器
      stopHeartbeat();
    };
    
    // 发送心跳消息
    function sendHeartbeat() {
        
      socket.send('heartbeat'); // 发送心跳消息
    }
    
    // 开始心跳
    function startHeartbeat() {
        
      heartbeatTimer = setInterval(sendHeartbeat, heartbeatInterval);
    }
    
    // 重置心跳计时器
    function resetHeartbeat() {
        
      clearInterval(heartbeatTimer); // 清除旧的计时器
      heartbeatTimer = setInterval(sendHeartbeat, heartbeatInterval); // 开启新的计时器
    }
    
    // 停止心跳
    function stopHeartbeat() {
        
      clearInterval(heartbeatTimer);
    }

我们创建了一个名为 heartbeatTimer 的定时器变量，并设置了心跳间隔时间为 30 秒（30000 毫秒）。在连接成功建立时，会调用 startHeartbeat() 函数开始发送心跳消息，并在接收到服务器发送的消息时调用 resetHeartbeat() 函数来重置心跳计时器。当连接关闭或发生错误时，会调用 stopHeartbeat() 函数停止心跳计时器。

通过以上实现，定时器会定期调用 sendHeartbeat() 函数发送心跳消息给服务器，以保持连接的活跃状态。每次收到服务器发送的消息时，都会重置心跳计时器，确保连接不会因为长时间无数据传输而断开。