JavaScript 之 WebSocket 用法

前端领域中的 WebSocket

Websocket 是一种应用层协议，它基于 TCP 连接提供全双工通信。在前端领域，Websocket 可以用于实现实时通信，相对于一般的 HTTP 请求/响应模式，Websocket 可以更快速、实时地传输数据，并且可以保持长时间连接。

以下是 Websocket 在前端领域的应用：

实时消息和通知： Websocket 可以用于实现实时消息和通知功能，例如在线聊天室、实时游戏等。
实时数据传输： Websocket 可以用于，例如股票市场的实时报价、天气预报等实时数据传输。
远程会议和视频会议： Websocket 可以用于实现实时的语音、视频会议，同时保持高品质音频和视频。
实时协作应用： 例如 Google Docs，通过 Websocket，多个用户可以同时编辑同一个文档，并即时看到对方在做什么。
与服务器保持长连接： 通过 Websocket，浏览器可以与服务器保持长时间的连接，从而避免了重复的 HTTP 请求。这可以优化应用程序的性能，提高响应速度。

JavaScript 中的 WebSocket

介绍

WebSocket 是 JavaScript 中的一种浏览器内置的 API，使得 Web 应用程序能够建立双向通信通道，能够在浏览器与服务器之间进行实时的数据传输和交换。

WebSocket API

WebSocket 具备以下几个属性方法：

onopen: 当与服务器建立连接时触发的事件处理程序函数。
onmessage: 当接收到来自服务器的消息时触发的事件处理程序函数。
onclose: 当 WebSocket 连接关闭时触发的事件处理程序函数。
onerror: 当发生 WebSocket 错误时触发的事件处理程序函数。

readyState 一个只读属性，用于表示 WebSocket 的当前状态。可能的值为：

0: 初始状态，即 CONNECTING
1: 已连接状态，即 OPEN
2: 正在关闭状态，即 CLOSING
3: 已关闭状态，即 CLOSED
binaryType: 一个字符串属性，用于表示服务器发送的数据类型。可能的值为 "blob" 或 "arraybuffer"。
extensions: 一个字符串属性，用于表示服务器提供的与 WebSocket 关联的扩展。
protocol: 一个字符串属性，用于表示服务器和客户端之间所使用的协议名称。

深入了解:全面深入：WebSocket API 的详细解析

前端实践 WebSocket

Nodejs 起一个 WebSocket 服务

我们需要使用 Nodejs 去起一个 WebSocket 服务，具体代码如下：

 // 引入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');
});

页面编写

我们需要创建一个 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 服务并需要进行调试，我建议你使用一些很棒的 API 调试工具，如 Apifox，这款工具可以完美调试 WebSocket 服务~

谷歌插件

Apifox 有 Web端和客户端。

如果你使用的是 Web端，想要调试本地服务，需要安装 Apifox 的谷歌插件：Apifox 谷歌浏览器插件。

新建 WebSocket 请求

WebSocket 是客户端和服务端之间的长链接，因此你需要在 Apifox 中创建一个 WebSocket 请求，以便跳转到 Apifox 界面并填写相应的请求信息。

点击创建按钮
填入 WebSocket 服务的地址
可以选择填写 Message 和 Params

Message 和 Params

Message

在 Message 中，你可以填写要传递到服务端的信息。服务端将接收你发送的信息。

Params

在传输过程中，你也可以携带参数，可以通过在地址上添加查询参数完成，可以携带的数据类型包括：

string
integer
number
array

保存请求

写完所需信息之后，可以点击保存按钮，进行保存，方便下次可继续调用。

连接、发送 WebSocket 请求

连接 WebSocket 服务

我们想要跟服务端进行 WebSocket 通信，就需要先建立一个 WebSocket 连接，我们只需要点击连接按钮。

连接成功之后，Apifox 有成功的提示。

服务端那边也会因为连接成功，而做出响应。

发送 WebSocket 请求

接着我们就可以跟服务端进行 WebSocket 通信了。

我们可以使用 Apifox 点击发送按钮向服务端进行发送 Message、Params。

与 WebSocket 服务通信

发送之后，服务端也可以向客户端发送信息，例如我这里，我设置服务端每秒向客户端发送当时的时间戳~

这就是 Apifox 的 WebSocket 功能，非常方便。

关于 Apifox

欢迎体验一下，完全免费的哦：在线使用 Apifox

Apifox 是一款 Web API 构建工具，为 API 设计和管理提供了全套工具和功能，具有重要的地位。 Apifox 提供可视化编辑器、模板和代码生成器、mock server、自动文档生成和API监视等功能，有助于开发者更高效地设计、测试和维护 API。该工具还提供多个 API 端点的连接，以便在创建 API 时更轻松地与其他应用程序集成。因此，Apifox 在 API 工具中具有很高的地位，并且可以为开发人员提供更快速，更高效的 API 开发和管理工作。