即时通讯系统是现代网络世界中不可或缺的一部分，如何快速构建低延迟、高并发的即时通讯系统是前端开发人员关注的焦点。SSE 和 WebSocket 是两种常见的实现技术，本文将详细讲述如何利用它们来构建一个即时通讯系统。
SSE（Server-Sent Events）
SSE 全称为 Server-Sent Events，即服务器推送事件。它是 HTML5 新增的一项 API，通过使用 EventSource 接口，使得浏览器可以接收服务器传来的数据并进行处理。与传统的 AJAX 直接拉取数据不同，SSE 是一种推模式，即服务器推送数据给客户端。
前端实现
在客户端，我们可以通过创建一个 EventSource 实例来与服务器建立连接并接收推送数据。下面是一个示例代码：
let source = new EventSource('/push')
source.addEventListener('message', e => {
console.log(e.data)
})在这个示例中，我们首先通过创建一个 EventSource 实例来与服务器建立 SSE 连接。连接的 URL 在这里是 /push，客户端与服务端通过该 URL 建立连接。当服务端向客户端推送数据时，客户端会触发 addEventListener 绑定的 message 事件，从而获取数据。
后端实现
在服务端，我们需要创建一个路由 /push，这个路由将用于 SSE 长连接。在 Express 框架中，我们可以使用 res.write() 方法来向客户端发送数据，代码如下：
-- -------------------- ---- -------
---------------- ------------- ---- -
------------------ -
--------------- -------------------- -- -- --- ---
---------------- ----------- -- ----
------------- ------------- -- ---
--
-- ------
---------------------- -
---------------- --- ------------- -- --------
-- -----
--这段代码中，我们首先设置了响应头 Content-Type 为 text/event-stream，这是告诉浏览器这是一个 SSE 流数据。然后禁止缓存并开启长连接。最后，我们定时发送数据给客户端。
WebSocket
WebSocket 是一种双向通信协议，能够实现客户端与服务器的实时通信。相比较于 SSE，它具有更低的延迟和更高的并发性，但是实现难度稍稍高了一些。
前端实现
在客户端，我们可以通过创建一个 WebSocket 实例来与服务器建立连接并发送/接收数据。下面是一个示例代码：
let socket = new WebSocket('ws://localhost:8080') // 建立 WebSocket 连接
socket.onmessage = function(event) {
console.log(event.data)
}
socket.send('hello') // 发送数据在这个示例中，我们首先通过创建一个 WebSocket 实例来与服务器建立连接。连接的 URL 在这里是 ws://localhost:8080，使用 WebSocket 的协议头 ws:，开启 WebSocket 连接，通过 onmessage 这个事件监听函数来处理从服务器传来的数据。最后，我们发送数据给服务器。
后端实现
在服务端，我们需要创建一个 WebSocket 服务器。一般来说，我们可以选择使用第三方库如 ws 来实现，它支持多种协议的 WebSocket 连接。下面是一个示例代码：
-- -------------------- ---- -------
----- --------- - ------------- -- -- -- -
-- -----
----- --- - --- ------------------ ----- ---- --
-------------------- -------- -------------- -
---------------- -------- ----------------- -
---------------------- ---- --------
---------------- -- --------
--
--在这个示例中，我们首先导入 ws 库，并创建一个 WebSocket 服务器。当客户端连接到该服务器时，wss 会接收到 connection 事件，通过 ws 建立连接。当客户端发送消息时，服务器会收到 message 事件并进行处理，处理完成后返回数据到客户端。
总结
本文介绍了如何利用 SSE 和 WebSocket 来构建即时通讯系统。SSE 是一种服务器推送事件的实现，可以实现客户端与服务器之间的实时通信。WebSocket 则是一种双向通信协议，能够实现客户端与服务器的实时通信。两种技术各有优缺点，开发者可以根据自己的需求进行选择。本文提供的示例代码可以作为学习和实践的基础。
参考资料
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/650423bf95b1f8cacd0e0bc1