在 Web 开发中，前后端交互是必不可少的。而在实现前后端交互的过程中，WebSocket 技术的应用越来越广泛。WebSocket 技术的优点在于实时性好，性能高，是前后端交互的一种较为高效的方式。本文介绍了一个 npm 包 rx-ws-express 的使用教程，帮助开发者更好地使用 WebSocket 技术。
1. rx-ws-express 介绍
rx-ws-express 是一个基于 Express 的 WebSocket 封装库，它使用 RxJS 进行了封装，使得 WebSocket 的使用更加简单易用。它可以将 WebSocket 的事件包装成一个流，方便开发者进行数据的处理。rx-ws-express 主要具有以下特点：
- 使用方便简单
- 提供了订阅机制
- 支持自定义事件流
- 可以直接应用于 Express 应用中
2. 使用 rx-ws-express
在 Node.js 项目中使用 rx-ws-express 首先需要通过 npm 安装它：
npm install rx-ws-express
安装完成之后，就可以在代码中使用了。在 Express 应用中使用 rx-ws-express 需要引入它并将其与 Express 应用进行关联。
const express = require('express');
const http = require('http');
const RxWebSocketServer = require('rx-ws-express');
const app = express();
const server = http.createServer(app);
const wss = new RxWebSocketServer(server);在上述代码片段中，我们首先引入了需要的模块（express、http 和 rx-ws-express），然后创建了一个 Express 应用及其服务。接着创建了一个 RxWebSocketServer 实例，与我们的服务关联起来。
在通过 rx-ws-express 实现 WebSocket 通信的过程中，需要以下几个步骤：
2.1. 监听 WebSocket 连接
监听 WebSocket 连接需要使用下面的方法：
wss.onConnection((client) => {
console.log('client connected: ', client.id);
});在上面的代码中，我们绑定了 onConnection 事件，当有新 WebSocket 客户端连接时就会执行该方法。在该方法中，我们可以获取到当前连接的信息，例如 id。
2.2. 监听 WebSocket 消息
监听 WebSocket 消息同样需要绑定事件：
wss.onMessage((client, message) => {
console.log('client sent message: ', message);
});在上面的代码中，我们绑定了 onMessage 事件，当 WebSocket 客户端发送消息时就会执行该方法。在该方法中，我们可以获取到当前连接客户端的信息，以及收到的消息。
2.3. 发送消息
在 rx-ws-express 中，发送消息需要执行下面的方法：
wss.sendMessage(client, message);
在上面的代码中，我们传入了要发送消息的客户端和消息内容，即可实现向客户端发送消息的功能。
3. 示例代码
下面是一个简单的 Express 应用，代码展示了如何使用 rx-ws-express 实现基本的 WebSocket 通信：
-- -------------------- ---- ------- ----- ------- - ------------------- ----- ---- - ---------------- ----- ----------------- - ------------------------- ----- --- - ---------- ----- ------ - ----------------------- ----- --- - --- -------------------------- ------------------------- -- - ------------------- ---------- -- ----------- ----------------------- -------- -- --------- ---------- --- ---------------------- -------- -- - ------------------- ---- -------- -- --------- ----------------------- ---- ----- ------------- --- ------------ ----- ---- -- - ------------------- -------------- --- ------------------- -- -- - -------------------- --- --------- -- ---- -------- ---
在上面的代码中，我们首先创建了一个 Express 应用及其服务，然后创建了一个 RxWebSocketServer 实例，与我们的服务关联起来。在 onConnection 方法中，我们向客户端发送了一条欢迎消息；在 onMessage 方法中，我们读取到了客户端发来的消息并向客户端回送了一条消息（附带了客户端发送的消息内容）。
在应用启动之后，就可以通过浏览器打开 http://localhost:3000 进行测试了。打开控制台，在 Console 标签中输入以下代码：
var socket = new WebSocket('ws://localhost:3000');打开 Network 标签，会看到一个请求，请求的 URL 为 ws://localhost:3000，Status 显示为 101 Switching Protocols，表示 WebSocket 协议已成功升级。
Socket 连接成功后，在控制台中继续输入以下代码：
socket.send('Hello, Server!');此时，控制台中应该会出现如下输出：
client sent message: Hello, Server! client sent message: You sent: Hello, Server!
在发送消息的同时，我们也接收到了服务端回复的消息。
总结
本文介绍了如何使用 npm 包 rx-ws-express 实现 WebSocket 通信的功能，同时提供了一个实用的样例代码，希望可以帮助读者理解和掌握 WebSocket 技术的应用。在实际项目开发中，使用 rx-ws-express 能够大大降低代码的复杂度，提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055b1681e8991b448d8c1e