随着 Web 技术的发展，越来越多的应用开始向移动端和 Web 端转移。在这些应用中，聊天功能往往是必不可少的特性之一。但是，实现一个高效、稳定、良好用户体验的聊天室并不是一件简单的事情。在本文中，我们将学习如何使用 Server-sent Events 技术来实现一个基础的聊天室，并在学习的过程中了解 Server-sent Events。
什么是 Server-sent Events
Server-sent Events 又称为 SSE，是 HTML5 新增的一种实现服务器推送的技术。相比于以前的实现方式，例如轮询和长轮询，Server-sent Events 技术具有以下优势：
- 无需使用大量的 HTTP 请求，降低服务器压力
- 即时性更强，并且需要更少的网络开销
- 容易实现多个客户端之间的实时通知
简单来说，Server-sent Events 技术让服务器可以主动向客户端发送消息，而不是客户端请求服务器获取数据。通过这种方式，客户端可以实时获取服务器端的数据变化。
实现 Server-sent Events 的基本步骤
在了解 Server-sent Events 的基本原理之后，我们可以开始实现我们的聊天室。首先，我们需要完成以下几个步骤：
1. 创建一个基础的聊天页面
我们可以使用 HTML 和 CSS 来创建一个基础的聊天页面，例如：
-- -------------------- ---- -------
------
------
----------- ------------
-------
------
---- -----------------------
--- ----------------------
------
------ ----------- --------------------- ----------------- ---- ------------
------- ---------------------------
-------
------
-------
-------这个聊天页面包含一个消息列表和一组表单元素，可以让用户输入消息。现在我们需要使用 JavaScript 来实现 Server-sent Events，并将新的消息添加到列表中。
2. 使用 JavaScript 实现 SSE
在 JavaScript 中，我们可以使用 EventSource 对象来实现 Server-sent Events。我们可以创建一个新的 EventSource 对象，并指定要接收事件的 URL，例如：
const eventSource = new EventSource('/events')此时，客户端可以向服务器发送请求，订阅事件信息 (/events)。接着，我们需要监听 EventSource 对象的 message 事件，并将收到的消息添加到聊天页面的消息列表中：
eventSource.addEventListener('message', (event) => {
const messages = document.querySelector('.messages')
const newMessage = document.createElement('li')
newMessage.textContent = event.data
messages.appendChild(newMessage)
})在这段代码中，我们首先获取消息列表元素，将接收到的消息创建为列表元素，并将其添加到列表中。
3. 服务端推送事件
现在，我们需要在服务端推送事件。在 Node.js 中，我们可以使用 EventSource 对象来创建一个 HTTP 服务器，然后在客户端请求 SSE 时将事件推送到客户端：
-- -------------------- ---- -------
----- ---- - ---------------
----- ------ - ----------------------- ---- -- -
-- -------- --- ---------- -
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
--
----- ------ - -------------- -- -
----- ------- - ---- -------- ----- --------
----------------- -------------- ----------------
-- -----
---------------------- -- -- -
---------------------
--
- ---- -
------------------
---------
-
--
-------------------在这段代码中，我们首先判断客户端是否请求 SSE，如果是，则返回一个带有 "Content-Type": "text/event-stream" 的响应。接着，我们使用 setInterval 定期向客户端发送一条名为 "message" 的事件。在事件中，我们将消息作为事件内容发送到客户端。注意，每一条事件需要添加两个换行符来表示事件的结束。最后，我们还需要判断客户端是否已经关闭连接，并在关闭连接后清除定时器。
运行项目并测试聊天室
现在，我们已经实现了一个简单的聊天室。我们可以通过启动服务器并在浏览器中打开 http://localhost:3000 来验证聊天室是否正常工作。在首次访问聊天室 URL 时，聊天页面应该是空的。每隔一秒钟，新的消息应该会出现在消息列表中，例如：
New message: Tue Jul 20 2021 16:22:42 GMT+0800 (China Standard Time) New message: Tue Jul 20 2021 16:22:43 GMT+0800 (China Standard Time) New message: Tue Jul 20 2021 16:22:44 GMT+0800 (China Standard Time)
现在，我们可以尝试在聊天页面中输入文本并单击发送按钮，我们就可以在消息列表中看到刚刚输入的消息了。
结论
在本文中，我们了解了 Server-sent Events 技术是如何实现服务器推送的。我们实现了一个基础的聊天室，使用了 EventSource 对象来接收服务器推送的消息，并将其显示在聊天页面的消息列表中。Server-sent Events 技术在实现实时通信方面具有很大的优势，可以帮助开发人员高效地构建实时应用程序。不过 Server-sent Events 技术需要浏览器本身的支持，在某些情况下可能会有兼容性问题，需要注意。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/671eaa1b2e7021665ef90a81