在现代的 Web 开发中，实时通信是一个非常重要的方面。传统的轮询技术虽然能够完成实时通信，但是它的效率很低，每次请求都需要发送很大的 HTTP 请求头。为了解决这个问题，HTML5 提出了 Server-sent Events 技术。在本文中，我们将学习如何在 Node.js 中使用 Server-sent Events 和 HTML5 事件发送超文本和 JSON。
什么是 Server-sent Events？
Server-sent Events（SSE）是一项 HTML5 技术，它能够建立一个长连接，使用事件流向客户端发送数据。与传统的轮询技术相比，SSE 技术具有以下优势：
- 在浏览器和服务器之间建立长连接，减少了 HTTP 请求头的发送次数。
- 服务器能够主动向客户端推送数据，这样就解决了客户端不知道服务器有没有更新的问题。
- SSE 技术只需要普通的 HTTP 服务器，不需要使用特殊的协议。
如何使用 Server-sent Events？
在 Node.js 中使用 SSE 技术相对简单。下面是一个基本的 SSE 服务器代码：
-- -------------------- ---- -------
----- ---- - ----------------
----------------------- ---- -- -
----------------------------- ---------------------
------------------------------ ------------
--------------------------- --------------
-------------- -- -
----- ------- - -
----- --- ----------------------
----- ------- -------
--
---------------- ---------------------------------
-- ------
----------------在这个代码中，我们创建了一个 HTTP 服务器，并向客户端发送了一个 MIME 类型为 text/event-stream 的响应头。这告诉浏览器我们将使用 SSE 技术发送事件流。其次，我们设置了 Cache-Control 头，告诉浏览器不要对这个响应缓存。最后，我们使用 setInterval 函数每秒向客户端发送一条消息。在消息中，我们使用 JSON.stringify 方法将一个对象转换为一个 JSON 字符串，并使用 data 字段发送这个 JSON 字符串。注意，每条消息结尾需要使用两个换行符。
在客户端使用 Server-sent Events
在客户端代码中，我们需要使用 EventSource 对象来接收服务器发送的事件流。下面是一个基本的客户端 SSE 代码：
-- -------------------- ---- -------
--------- -----
------
------
------------------ --------------
-------
------
---- --------------------
--------
----- ---------- - ------------------------------------
----- ------ - --- -----------------------
---------------- - ----- -- -
----- ------- - -----------------------
-------------------- -- -------------------------- ---------------------------
--
---------
-------
-------在客户端代码中，我们创建了一个接收事件流的 EventSource 对象，并将其连接到 SSE 服务器的 /events 路径。在 EventSource 对象的 onmessage 事件中，我们解析从服务器端发送的 JSON 字符串，将其转换为一个对象，并将这个对象动态添加到页面中。
发送超文本和 JSON
在服务器端，我们可以使用 res.write 方法发送任何文本数据，包括超文本和 JSON 数据。下面是一个发送超文本的例子：
res.write(`data: <p>Hello, world!</p>\n\n`);
在客户端代码中，我们可以使用 innerHTML 属性向页面中添加超文本。
对于 JSON 数据，我们需要在服务器端先将一个对象转换为 JSON 字符串，然后发送这个字符串。在客户端代码中，我们需要使用 JSON.parse 方法将这个字符串解析为一个对象。以上两个例子已经说明了如何发送和接收 JSON 数据了。
总结
SSE 技术是一种非常有用的实时通信技术。在这篇文章中，我们学习了如何在 Node.js 中使用 Server-sent Events 和 HTML5 事件发送超文本和 JSON。我们写了一个简单的 SSE 服务器和客户端代码，并说明了如何发送超文本和 JSON 数据。希望这篇文章能够帮助你更好地理解 SSE 技术和实时通信。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f43c9ef6b2d6eab3d5457c