Web 应用中实现实时通信的需求越来越重要，这表现在在线消息、实时监控和协同编辑等多个场合中。在实现实时通信时，我们通常会选择下面三种方式：
- Express.js
- Socket.IO
- Server-Sent Events
这篇文章将详细介绍这三种方式的实现原理，以及它们的长处与短处，帮助大家选择最适合自己项目的方案。
Express.js
Express.js 是一个针对 Node.js 的 Web 应用框架，它提供了各种构建 Web 应用的工具和方法。为了实现实时通信，我们可以使用 Express.js 中自带的 res.write 和 res.end 方法，将数据实时地发送到客户端。
下面是一段简单的 Express.js 代码：
-- -------------------- ---- -------
----- ------- - ------------------
----- --- - ---------
---------------- ----- ---- -- -
------------------ ---------------- ---------------------
-------------- -- -
---------------- - - ---------- - -------
-- -----
--
----------------这段代码实现了一个简单的 SSE 服务。我们通过 res.writeHead 方法设置响应头，告诉浏览器我们想要使用 SSE，然后在 setInterval 中实时地发送数据到客户端。
优点：
- Express.js 是一个轻量化的框架，它使用了很多 Node.js 自带的模块，渲染速度快。
- 如果你的 Web 应用本来就使用了 Express.js，那么这种方式将非常容易集成。
- 如果你不需要双向通信或者你的实时通信需求不是特别高，那么使用这种方式也是非常不错的选择。
缺点：
- 使用 SSE 会占用浏览器不必要的带宽，在消息量较大时会变得非常慢。
- SSE 只支持单向通信，无法做到双向通信。
Socket.IO
Socket.IO 是实现双向通讯的 Websocket 库，它提供了很多实用的特性，比如自适应的传输协议、断线自动连接，以及支持多个房间等等。
下面是一段使用 Socket.IO 的简单代码：
-- -------------------- ---- -------
----- --- - -------------------------------------
----- -- - -------------------------
----- -- - -------------
----------------
-------- ------- ----- ---- -
--------------------- - --------------
-------- ----- ----- -
-- ----- -
------------------
------ -------------- ------- ------------
-
------------------
-------------
--
-
------------------- -------- -------- -
-------------- -- -
------------------- -----------
-- -----
--这段代码创建了一个 Server 实例，并用 Socket.IO 监听连接事件。接着在连接时发送实时数据到客户端。当客户端连接上 Server 后，我们在 socket.emit 中发送数据。
优点：
- Socket.IO 实现了实时双向通信，消息传输速度快。
- 它使用了多种技术，包括 Websocket、Flash、AJAX 等，能够实现在不同的浏览器上同样的效果。
- 对于一些关键业务需求，Socket.IO 提供了房间系统来管理连接，让你能够编写高效的应用。
缺点：
- Socket.IO 库比较大，需要客户端额外下载一些代码，造成额外的网络开销。
- 客户端实现和服务端实现的 API 不同，导致代码中的难以维护。
Server-Sent Events
Server-Sent Events 是一种实现单向实时通信的协议，其特点是使用 HTTP 传输，具有较小的延迟和优秀的兼容性，仅仅需要浏览器内建支持就可以实现。
下面是一段简单的 Server-Sent Events 代码：
-- -------------------- ---- -------
----- ---- - ---------------
----- ----------- - --
----------------------- ---- -- -
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
--
---------------------
--------------- -- -- -
-------------------------------------------- --
--
---------------
-------------- -- -
--- ---- ---------- -- ------------ -
----------------------- -------------------
-
-- -----这段代码创建了一个 HTTP Server，监听客户端的连接事件。每当一个客户端连接上来之后，就将它的响应对象 res 存储在全局数组 subscribers 里面。然后在 setInterval 中，不断地遍历客户端响应对象，并向客户端发送数据。
优点：
- Server-Sent Events 使用 HTTP 传输，具有较小的延迟和优秀的兼容性，无需额外下载代码，因此传输速度快。
- Server-Sent Events 支持自定义 Event ID，可以防止消息丢失。
缺点：
- Server-Sent Events 只支持单向通信，无法做到双向通信。
- SSE 发送给客户端的消息必须事先序列化成字符串，因此无法让消息携带二进制数据。
总结
本文介绍了三种实现实时通信的方式，它们都有自己的长处与短处。在选择实时通信方式时，需要根据自己项目的需求，选择最适合的方案。
如果你的项目本来就使用了 Express，或者你只需要单向通信，那么使用 Server-Sent Events 可能是最好的选择。如果你的项目需要双向通信，那么使用 Socket.IO 可能会更好。无论哪种方式，我们都需要深入理解它们的原理和机制，这将有助于我们更好地选择和使用技术。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64898bb548841e98947d4584