引言
在现代前端开发中，实时通信已经成为了非常重要的一部分。比如，在聊天室中，在线游戏，社交媒体等领域中需要的实时通信效果。在前端实现实时通信时，许多开发人员会首先想到 WebSocket。但在一些简单的场景中，我们可以使用 Server-sent Events（SSE）来实现实时通信。因为 SSE 只需要简单的 HTTP 连接，而不需要一个专门的 Socket 连接。
SSE 简介
SSE 是一项 W3C 标准，它是一种用于实现服务器向客户端推送数据的方法。SSE 通过一个简单的 HTTP 连接来向客户端发送数据。与 WebSocket 不同，SSE 可以通过标准的 HTTP 服务器发送，无需专门的服务器支持。SSE 的另一个好处是，它对于 Web 安全而言非常有用。因为 SSE 不需要向外打开大量的端口，而仅需要开放 HTTP 端口。
建立简单的聊天室
下面我们通过一个简单的聊天室案例来演示如何使用 SSE。
服务器端代码示例
我们使用 Node.js 来作为服务器端，下面是服务器端代码示例：
-- -------------------- ---- ------- ----- ---- - ---------------- ----- -- - -------------- ----------------------- ---- -- - ------------------ - --------------- -------------------- ---------------- ----------- ------------- ------------- --- ----- -------- - -- -- - ----- ------- - ------ ----- --------------------------- ------------------- - --------------------- ------ ----------------展开代码
在该示例中，我们使用了 Node.js 提供的 http 模块来创建服务器端，首先设置了响应头，告诉浏览器本次请求返回的数据是 SSE 格式的数据。然后使用 setInterval() 定时向客户端推送数据。
客户端代码示例
下面是客户端代码示例：
-- -------------------- ---- ------- --------- ----- ------ ------ ---------- ---- ------------ ------- ------ ------- ---- --------- ---- ------------------------ -------- ----- ------------ - ---------------------------------------- ----- --------- - --- -------------------- ------------------- - -------- ------- - ----- ------- - ----------- ---------------------- -- ----- - ------- - ------- -- --------- ------- -------展开代码
在客户端代码中，我们使用了 JavaScript 来与服务器端建立 SSE 连接。我们使用 EventSource 对象来建立 SSE 连接，并指定了服务端的 URL。
当 EventSource 对象开始接收到数据时，会调用 onmessage 回调函数。我们可以在该函数中处理服务器端推送过来的数据，实现聊天室的实时通信效果。
指导意义
本文介绍了使用 SSE 来建立简单聊天室的方法，并给出了相应的示例代码。SSE 虽然不能替代 WebSocket 在一些场景中的使用，但是它可以在一些简单的场景中提供一种简单的实时通信方法，此外，SSE 的优点也在于它不需要在服务器上开放额外的端口，因而相比 WebSocket 更安全和更加兼容。
结语
通过本文，读者将能够获得 Server-sent Events 建立简单的聊天室的方法和示例代码，同时了解了本技术的优劣及适用场景。它是前端实时通信的一个好的选择，欢迎大家使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6795aed1504e4ea9bdbd3792
