在 Web 应用中，实时通信是一个不可或缺的部分，也是前端开发工作中的核心内容之一。一些用例例如聊天应用和在线游戏，就需要即时双向通信以产生正确的用户体验。这时候，WebSocket 技术就能够施展威力。WebSocket 是一种基于 HTTP 协议的双向通信协议，能够在客户端和服务器之间建立稳定、高效的通信管道。在本文中，我们将看到如何在 Express.js 中利用 WebSocket 实现即时聊天功能。
准备工作
在介绍如何使用 WebSocket 之前，我们先来了解一下准备工作。
安装依赖
首先，我们需要安装依赖包。我们将使用 express 和 ws 包。 express 用于设置 Web 服务器， ws 则是一个用于实现 WebSocket 通信的包。
使用以下命令进行依赖包安装：
npm i express ws
实现服务器
接下来，我们需要实现服务器，以便于监听客户端的请求。
在本例子中，我们以 app.js 作为服务器入口文件。我们先来看看这个文件的基本结构。
const express = require('express');
const app = express();
app.use(express.static(__dirname + '/public'));
app.listen(3000, () => {
console.log('Server started on http://localhost:3000');
})上述代码加载 express 包，使用 app() 函数创建 app 实例。然后我们使用 app.use() 函数设置 public 目录为静态资源目录，这里可自定义静态资源目录，省去返回静态资源的重复工作。
最后，我们在服务器上监听端口 3000。
实现 WebSocket
现在服务器已经启动并监听着端口，接下来我们需要实现 WebSocket。
在本例中，我们将使用的是 WebSocket 的内建实现，即 ws 包。当然，你也可以选择其他第三方 WebSocket 服务器。
处理 WebSocket 请求
需要用到 WebSocket 的路径需要使用服务器实例 app 自带的 ws() 函数。 ws() 函数就是用于处理 WebSocket 请求的。
-- -------------------- ---- -------
----- ------- - -------------------
----- --- - ----------
----- --------- - --------------
----------- ---- ---- -- -
------------------- ------------
-------------- -- -- -
------------------- ---------------
---
---------------- --------- -- -
----------------- ---- -------- -------------
---
---
---------------- -- -- -
------------------- ------- -- ------------------------
---在上述代码中，我们使用 app.ws() 函数来处理客户端的 WebSocket 请求。当有客户端通过请求路径为 /（即根路径）向服务器发起 WebSocket 请求时，app.ws() 函数回调将会被执行。回调中的 ws 对象表示与客户端建立的 WebSocket 连接对象，我们可以使用它来处理消息和关闭连接的事件。
当客户端连接时，服务端会打印出 "Client connected"，当客户端关闭连接时，服务端会打印出 "Client disconnected"，当服务端接收到客户端发送的消息时，服务端会打印出 "User sent message："。
处理消息
当一个客户端通过 WebSocket 连接到服务器时，用户可能发送消息，而这些消息会作为 WebSocket 连接的一部分被传递到服务器的 ws 对象上。我们需要监听 message 事件，以便及时处理消息。该事件会在客户端发送消息时被触发，事件的回调函数将接收客户端发送的消息，然后进行处理。
ws.on('message', (message) => {
console.log(`User sent message: ${message}`);
});在上述代码中，我们使用 ws.on() 监听客户端 message 事件，回调函数会接收到用户发送的消息。在本例中，我们只是简单地将消息打印到控制台中。当然，为了实现聊天功能，我们需要将所收到的消息转发给其他客户端，而不是简单的打印出来。
转发消息
在客户端发送消息的接受处理之后，我们需要将消息转发给其他连接的客户端。
-- -------------------- ---- -------
----- --- - --- ------------------
------- ---
---
-------------------- ---- ---- -- -
---------------- --------- -- -
---------------------------- -- -
-- ------------------ --- --------------- -
---------------------
-
---
---
---以上代码是将消息转发给其他客户端的实现。我们首先创建一个 WebSocket 服务，监听客户端的连接。在回调函数中，我们使用 ws.on() 监听客户端发送到服务器的消息。我们使用 wss.clients 遍历每一个连接的客户端，并判断该客户端是否处于已连接状态，如果是，使用 client.send() 函数将消息发送给他们。
到目前为止，我们已经通过WebSocket实现了一个简单的聊天应用程序。
客户端实现
在服务器端已经完成相关工作后，我们需要在客户端使用 WebSocket 实现即时的聊天功能。在实现前，我们需要先安装 socket.io 的依赖包：
npm i socket.io-client
连接服务器
在实例化 Socket.io 对象前，我们需要先连接到服务器（即上述 app.js）.在 index.js 中，我们需要先建立客户端 WebSocket 连接, 并 监听 服务器发来的消息，这样我们就能在客户端进行实时聊天了。
-- -------------------- ---- -------
----- ------ - ------------------------------------
-------------------- --------- -- -
--------------------- -------- -------------
---
-------- ------------- -
----- ------------ - ----------------------------------------
----- ------- - -------------------
---------------------
------------------ - ---
-在上述代码中，我们使用 io.connect（） 在客户端代码中实例化一个 WebSocket 连接实例。我们使用 socket.on() 监听从服务器发来的消息，'message' 事件将由服务端广播。我们在回调函数中简单地将消息打印到控制台上。
这是一个简单的用于发送消息的函数。我们首先找到包含消息的文本框。当用户点击发送按钮时，我们通过调用 socket.send() 函数向服务器发送消息。
发送消息
我们使用 socket.send()。我们可以在客户端代码的任意位置调用该函数，根据需要发送消息。在本例中，用户单击 "发送" 按钮时将调用此函数。
socket.send() 函数将在客户端连接到服务器时连接到服务器中定义的 WebSocket 端点。在服务器端，我们在连接处理程序中监听这些请求。在客户端发送给服务器的 WebSocket 消息到达服务端时，服务器会触发 message 事件，我们将在这里处理接收到的消息，然后将其发送回连接的其他客户端。
结论
通过本文，我们了解了 Express.js 和 WebSocket 的基础知识，并且使用它们实现了一个简单的在线聊天应用程序。我们的重点是学习如何使用 WebSocket 建立一个双向而非单向的通信通道，并如何处理消息和关闭连接的事件。通过松散耦合、轻量级的通信机制提供实时功能，WebSockets 和 Express.js 正在变得越来越流行分布式系统之间的通信方式。
当然，建立完这个简单应用之后，我们可以考虑往这个应用中加入更炫酷的功能。例如：支持对话框，支持发送图片和音频等功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67518e8d8bd460d3ad8ab65a