Node.js 实现 WebSocket 连接

WebSocket 是一种在客户端和服务器之间建立持续连接的协议，它提供了一种实时、双向的通信方式。在前端方面，它的主要应用场景如下：

实时通信： WebSocket 可以与服务器建立持久的连接，通过它可以进行实时的消息传递，如聊天室、游戏等。
实时数据更新： 对于需要实时更新数据的场景，如股票行情、快递物流信息等，通过 WebSocket 能够快速地将数据推送给客户端，实现实时更新。
实时通知： 在需要告知用户的情况下，无需用户发出请求，服务器可以直接通过 WebSocket 向客户端推送通知，例如新邮件、提醒等。

Nodejs 实现 WebSocket

前端用的最多的后端语言就是 Nodejs，今天带大家使用 Nodejs 实现一个 WebSocket 服务，开始！

安装插件

使用 nodejs-websocket 插件，开发人员可以在 Node.js 中创建 WebSocket 服务器和客户端。

我们需要使用 npm 进行安装：

npm init
npm i nodejs-websocket
npm i nodemon -g

我们来介绍一下这个库提供的 API：

createServer：创建一个 WebSocket 服务
on：监听事件
sendText：给订阅端发送信息

代码编写

我们需要创建一个 index.js 并写入以下的代码：

 // 引入nodejs-websocket
const ws = require('nodejs-websocket');
// 定义监听的host地址跟port端口
const HOST = '127.0.0.1'
const PORT = 3001;
// 创建ws服务
const service = ws.createServer((conn) => {
  conn.on('text', (message) => {
    // 当收到消息的时候就开始定时推送
    console.log('message', message);
    setInterval(() => {
      // 随机推送message里的内容
      conn.sendText(`Now is ${new Date().getTime()}`);
    }, 1 * 1000);
  });
}).listen(PORT, HOST, () => {
  console.log('service---success');
});

启动服务

最后使用命令进行启动：

node index.js

我们可以看到这样的界面，说明运行成功：

mac@MacBook-Pro % nodemon index.js
[nodemon] 2.0.12
[nodemon] to restart at any time, enter `rs`
[nodemon] watching path(s): *.*
[nodemon] watching extensions: js,mjs,json
[nodemon] starting `node index.js`
service---success

前端页面连接 WebSocket

页面编写

我们需要创建一个 index.html，并写入以下代码。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script>
    window.onload = () => {
        if ('WebSocket' in window) {
            // 创建websocket连接
            let ws = new WebSocket('ws://127.0.0.1:3001/websocket');
            // 成功连接的时候推送一条消息，此时服务端就可以开始推送数据了
            ws.onopen = () => {
                console.log('websocket success---');
                ws.send('success');
            }
            ws.onmessage = (message) => {
                let data = message.data;
                console.log('get websocket message---', data);
            }
            ws.onerror = () => {
                console.error('websocket fail');
            }
        } else {
            console.error('dont support websocket');
        };
    };
</script>

</head>
<body>
  
</body>
</html>

启动页面

在 index.html 右键，并打开此文件。

启动页面

查看效果

可以看到后端先接收到前端的信息，open 建立成功。

然后建立连接后，后端一直在为前端输出信息。

在 Apifox 中调试 WebSocket

如果你要调试 WebSocket 接口，并确保你的应用程序能够正常工作。这时，一个强大的接口测试工具就会派上用场。

Apifox 是一个比 Postman 更强大的接口测试工具，Apifox = Postman + Swagger + Mock + JMeter。它支持调试 http（s）、WebSocket、Socket、gRPC、Dubbo 、SSE 等多种协议的接口，这使得它成为了一个非常全面的接口测试工具，所以强烈推荐去下载体验！

在 Apifox 中，你需要创建一个 WebSocket 请求以便进入相应的界面进行必要的信息填写。以下是步骤：

新建一个 HTTP 项目后，在项目中点击“+”按钮。
输入 WebSocket 服务的地址，例如 http://localhost:3000。
选择性地填写要传输的消息（Message）和参数（Params）。
填写完必要信息后，点击“保存”按钮以保留本次请求信息，方便下次调用。

立即体验 Apifox

要与服务器进行通信，你首先需要建立一个 WebSocket 连接。只需点击“连接”按钮即可。连接成功后，Apifox 会给出提示，同时服务器也会对此作出响应。

成功连接后，你可以使用 Apifox 提供的“发送”按钮，来发送消息和参数给服务器。

发送消息后，服务器同样可以向客户端回传信息，这一功能展示了 Apifox 的 WebSocket 功能的简便性，快去试试吧！

免费使用 Apifox

总结

WebSocket 协议允许客户端与服务器间保持持久连接，实现全双工通信，适用于实时通信、数据更新及通知等场景。利用 Node.js 及其 nodejs-websocket 库，开发者可轻松搭建 WebSocket 服务端，通过简单的 API（如 createServer, on, sendText）实现消息的接收与发送。前端页面通过 JavaScript 建立与 WebSocket 服务器的连接，实现数据交互。Apifox 等工具则提供了便捷的接口测试手段，帮助开发者调试 WebSocket 接口，确保应用稳定运行。