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 接口，并确保你的应用程序能够正常工作。这时，一个强大的接口测试工具就会派上用场。

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

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

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

立即体验 Apifox

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

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

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

免费使用 Apifox

总结

WebSocket 是一种实现浏览器与服务器间全双工通信的协议，特别适用于需要实时交互的应用场景，如在线聊天、实时游戏、实时数据更新等。在前端开发中，通过 WebSocket API，开发者可以轻松创建与服务器的持久连接，实现高效、低延迟的数据交换。API 包括 onopen、onmessage、onclose 和 onerror 等事件处理程序，以及 readyState 等属性，帮助管理连接状态和数据流。结合 Node.js 和 Apifox 等工具，可以有效构建和测试 WebSocket 应用，提升开发效率和用户体验。