在现代 Web 开发中，实时消息推送成为了很多应用的必要功能。而实现实时消息推送的两项核心技术 WebSocket 和 SSE 的出现，则让这一功能更加高效与可靠。本文将详细介绍如何使用 WebSocket 和 SSE 实现实时消息推送。
什么是 WebSocket？
WebSocket 是一种实现了双向通信的协议，它更加轻量化，更加高效 - 不会在每个请求和响应中带有头信息，而是保持了一个开放的套接字，为通过它传输的数据提供了更好的处理。 因此，WebSocket 允许客户端和服务器之间实时、基于事件的消息传递。它建立在 HTTP 协议上，端口号为 80 和 443。
什么是 SSE？
SSE （Server-Sent Events）也是一种基于 HTTP 的协议，它允许服务器向客户端推送新消息，这种通信方式是单向的，只能由服务器端向客户端发送消息。SSE 通过使用一个持续打开的 HTTP 连接，仅使用简单的文本协议，从而提供了一种很好的实时消息传递机制。 端口号为 80 和 443。
使用 WebSocket 实现实时消息推送
客户端 WebSocket
首先，我们需要用 JavaScript 编写一个客户端 WebSocket 对象，用于连接到服务器并接收实时消息。
const ws = new WebSocket('ws://localhost:8080');
ws.addEventListener('open', () => {
console.log('connection opened');
});
ws.addEventListener('message', event => {
console.log(event.data);
});在这里，我们使用了 WebSocket 构造函数来创建一个连接，并将其连接到 HTTP 服务器的 WebSocket 端口 8080 上。addEventListener 事件监听器监听了连接打开和收到消息的事件。在收到消息后，数据会出现在控制台中。在我们连接到服务器时，控制台也会显示连接打开的消息。
服务器端 WebSocket
接下来，我们需要建立一个 WebSocket 服务器，用于与客户端通信并发送实时消息。
-- -------------------- ---- -------
----- --------- - --------------
----- --- - --- ------------------ ----- ---- ---
-------------------- -- -- -
----------------------- ---------
---------------- ---- -- -
------------------
-------------------------- -- -
-- ------------------ --- --------------- -
------------------
-
---
---
---在这段代码中，我们使用 Node.js 和 ws 模块建立了一个 WebSocket 服务器。函数 wss.on('connection') 监听了连接事件，并用 WebSocket.OPEN 状态的客户端迭代，向所有已连接的客户端广播从任何一个客户端发送过来的消息。这样，每个客户端都可以实时地接收其他客户端的消息。
使用 SSE 实现实时消息推送
客户端 SSE
对于 SSE，客户端 SSE 实现非常简单，我们只需要执行一个 GET 请求，发送一个带有一些特殊标记的 HTTP 响应，就可以从服务器端接收到实时消息。
const eventSource = new EventSource('/events');
eventSource.onmessage = event => {
console.log(event.data);
};在这里，我们创建了一个 EventSource 对象，指向本地服务器上的 /events 端点。当服务器向客户端推送消息时，eventSource.onmessage 处理程序将在浏览器窗口的控制台中输出消息。可见 SSE 的客户端实现大大简化了代码。
服务器端 SSE
对于服务器端 SSE，请使用以下代码将消息推送到客户端。
-- -------------------- ---- -------
----- ---- - ----------------
----------------------- ---- -- -
------------------ -
--------------- --------------------
---------------- -----------
----------- ------------
---
----- ----- - -------------- -- -
---------------- ---- -- - ------- ---- --------------
-- ------
--------------- -- -- -
--------------------
----------------- ---------- ---------
--
----------------使用 http 模块创建了一个 HTTP 服务器，添加了大量的 HTTP 头信息以确保服务器正确地响应 SSE 格式。接下来，我们使用 setInterval 函数来定期发送消息给所有客户端。
这样，当客户端连接到该服务端 SSE 端点时，该服务端根据设置的时间周期向该客户端推送消息。
结论
通过本文的详细介绍，可以清晰地了解 WebSocket 和 SSE 技术，并了解了如何将其与客户端和服务器进行集成，实现实时的消息推送。现在，您可以按照这一教程，使用 WebSocket 或 SSE 技术构建一些酷炫的实时应用程序了。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66ee5db46fbf960197217ba2