实时消息通知实现

概述

在手机上，我们可以看到基本上都有消息通知的功能，这是一个再常见不过的需求了，对应的其实聊天通讯，多人协作编辑，原理类似，对应到web端也一样。

实现思路

大致一下两种思路：

1 、轮询

这个算最简单的方法，通过接口轮询的方式定时去拉取最新数据，然后实时同步到界面更新，但是有性能问题，以及定时器会不断轮询

主要不足

定时器会不断轮询
频繁建立和关闭连接（握手），造成资源浪费。

2、websocket

WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议，它使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。

主要特点

全双工通信：客户端和服务器可以同时发送和接收数据
低延迟：相比 HTTP 轮询，WebSocket 连接建立后通信效率更高
持久连接：一旦建立连接，会保持打开状态直到被显式关闭
轻量级：数据帧头很小，减少了数据传输的开销

实现

综上对比，通过socket的方式来做这个功能，是最合适的，以下为实现思路

客户端

js 复制代码

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

// 连接打开时
socket.onopen = function(event) {
  console.log('连接已建立');
  socket.send('Hello Server!');
};

// 接收消息
socket.onmessage = function(event) {
//区分类型，然后做消息广播和处理
  console.log('收到消息: ' + event.data);
};

// 连接关闭时
socket.onclose = function(event) {
  console.log('连接已关闭');
};

// 错误处理
socket.onerror = function(error) {
  console.log('发生错误: ' + error);
};

服务端

js 复制代码

const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', function connection(ws) {
  console.log('新客户端连接');
  
  ws.on('message', function incoming(message) {
    console.log('收到消息: %s', message);
    // 广播消息给所有客户端
    wss.clients.forEach(function each(client) {
      if (client !== ws && client.readyState === WebSocket.OPEN) {
        client.send(message);
      }
    });
  });
});

思考

如何保证当前用户只接受自己能收到的相关消息
如何保证网络问题导致的socket连接中断问题
如何保证多开标签页，都能收到消息
...

总结

上面的为实现思路，至于思考中的一些问题，可以根据实际情况处理，至于技术选型，目前比较成熟的socket.io库可以帮助我们管理心跳相关的一些实现，我们不用自己处理因为网络相关问题的逻辑。