在 Web 应用程序中，即时通信是一种重要的功能，尤其在某些应用程序如聊天室和在线游戏中更是不可或缺的。在实现即时通信功能时，WebSocket 技术是一种较为常用和可靠的解决方案。本文将指导你如何使用 WebSocket 技术在 Express.js 中实现实时通讯系统。
什么是 WebSocket？
WebSocket 是 HTML5 新增的协议，它提供双向的通信机制，可以在客户端和服务器之间创建持久性连接，以传输低延迟，高效率的实时数据。WebSocket 协议是基于 TCP 协议的，可以在浏览器和服务器之间建立一个可控的双向通信通道。
WebSocket 的工作原理
与 HTTP 请求不同，WebSocket 请求的头部将带有 Upgrade 字段，指示服务器其请求是从 HTTP 协议升级的 WebSocket 协议。当服务器收到这个请求时，它将发回一个响应，表明协议转换成功。之后，客户端和服务器之间的通信将遵循 WebSocket 协议，直到连接关闭为止。
在 WebSocket 连接期间，客户端和服务器可以发送任意数量的数据，并且数据可以在两端之间实时地双向传输。此外，WebSocket 连接是持久的，这意味着与 HTTP 请求不同的是，客户端和服务器之间的在线路连接不会在单个请求期间关闭。
在 Express.js 中启用 WebSocket
要在 Express.js 中使用 WebSocket，我们需要使用一种第三方 WebSocket 库。在本文中，我们将使用 WebSocket-Node 库来实现我们的即时通讯系统。
安装 WebSocket-Node
使用以下命令来安装 WebSocket-Node：
npm install --save websocket
实现 WebSocket 服务器
我们将使用 Express.js 搭建 WebSocket 服务器，首先在 Express.js 中初始化一个 HTTP 服务器，并将其传递给 WebSocket-Node 来启用 WebSocket：
-- -------------------- ---- ------- ----- ------- - ------------------- ----- --- - ---------- ----- ---------- - ---------------------------------- ----- --------------- - ---------------------------- -- --------- --- ----- -------- - --- ----------------- ----------- ----------- ---------------------- ----- ---展开代码
在上面的代码中，我们初始化了一个 Express.js 应用程序，并创建了一个 HTTP 服务器。然后，我们使用 WebSocketServer 类来创建 WebSocket 服务器，通过将 HTTP 服务器传递给其构造函数来启用 WebSocket。此外，您可以选择在服务器上接受或拒绝连接请求。在本实例中，我们选择拒绝所有连接请求，并在需要时手动接受它们。
处理 WebSocket 连接请求
在 WebSocket 服务器初始化后，我们需要实现 WebSocket 连接处理程序来处理客户端的连接请求：
-- -------------------- ---- ------- ---------------------- ------- -- - ----- ---------- - -------------------- ---------------- ------------------------ ------- -- - -- ------------- --- ------- - --------------------- -------- ---------------------- -- -------- - --- ---------------------- ------------ ------------ -- - ----------------------- ------- ------------- - ----------------- -- -------- --- ---展开代码
在上面的代码中，我们使用 WebSocketServer 实例的 request 事件监听器处理 WebSocket 连接请求。当从客户端收到连接请求时，我们将调用 accept() 方法来接受连接，并将其添加到连接列表中。接下来，我们将监听 connection 对象上的 message 事件，以接收客户端发送的数据。处理完数据后，我们可以使用 coonection 对象的 send() 方法来向客户端发送响应。最后，我们还将监听 connection 对象的 close 事件，以处理当连接关闭时的事件。
客户端代码
在客户端，我们可以使用 WebSocket API 来创建一个 WebSocket 连接，并向服务器发送数据：
-- -------------------- ---- ------- ----- ------ - --- --------------------------------- ------------- - -- -- - ------------------------------ ------------------ ------------- -- ---------------- - ----- -- - --------------------- -------- ---------------- -- -------------- - -- -- - ------------------------------ --展开代码
在上面的代码中，我们使用新的 WebSocket 实例来创建一个连接，并监听其 open、message、和 close 事件，以处理与服务器的交互。
总结
本文介绍了如何在 Express.js 中使用 WebSocket 实现实时通讯系统，并深入介绍了 WebSocket 的工作原理。我们使用了第三方 WebSocket 库 WebSocket-Node，在 Express.js 中启用 WebSocket，处理 WebSocket 连接请求以及客户端代码的编写。使用 WebSocket 技术，可以轻松实现低延迟，高效率的实时数据传输，为 Web 应用程序增添更多的功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65a33749add4f0e0ffb52a3c
