前端 WebSocket 的一些使用

前端 WebSocket 的一些使用

WebSocket 是一种网络通信协议，用于实现双向通信。在前端中，你可以使用 JavaScript 中的 WebSocket 对象来创建 WebSocket 连接，发送和接收数据。

连接的建立

通过创建一个 WebSocket 对象建立一个 WebSocket 连接

例如：

const ws = new WebSocket('ws://localhost:8080/channel/echo');
1

传给对象的参数是通过 WebSocket 协议通讯的网络地址。

接收消息

接收消息这里指的是接收服务端的消息。

这里有两种方法。

1. 使用 addEventListener： 你可以使用 addEventListener 来监听 message 事件，这是最常见的方式，也是推荐的做法。

   ws.addEventListener('message', (event) => {
       const receivedMessage = event.data;
       console.log('Received message from server:', receivedMessage);
       // 在这里处理接收到的消息
   });
   1
   2
   3
   4
   5

2. 使用 onmessage 属性： 除了使用 addEventListener，你还可以直接设置 onmessage 属性来指定消息处理函数。这与之前的示例相似，但更简洁：

   ws.onmessage = function (event) {
       const receivedMessage = event.data;
       console.log('Received message from server:', receivedMessage);
       // 在这里处理接收到的消息
   };
   1
   2
   3
   4
   5

发送消息

发送消息到服务器： 使用 send() 方法将消息发送到服务器：

ws.send('Hello, server!'); // 发送消息给服务器
1

关闭连接

关闭 WebSocket 连接： 要关闭 WebSocket 连接，你可以简单地使用 WebSocket.close() 方法，例如：

ws.close();
1

如果 WebSocket 连接的 readyState 已经处于 CLOSE 状态，那么该方法不会执行任何操作

检查 WebSocket 是否打开： 你可以通过检查 WebSocket 的 readyState 属性来判断 WebSocket 是否打开。如果 readyState 的值为 WebSocket.OPEN，则表示连接已打开：

if (ws.readyState === WebSocket.OPEN) {
    // WebSocket 连接已打开
}
1
2
3

这样你就可以在代码中判断 WebSocket 是否处于打开状态了

处理

处理连接状态： 你可以监听其他事件，例如 open、close 和 error，以处理连接的不同状态：

ws.addEventListener('open', (event) => {
    console.log('WebSocket 已连接');
});

ws.addEventListener('close', (event) => {
    console.log('WebSocket 连接已关闭');
});

ws.addEventListener('error', (event) => {
    console.error('WebSocket 连接出现异常:', event.error);
});
1
2
3
4
5
6
7
8
9
10
11

同样可以使用onclose 、 onerror 、 onopen 属性定义时间监听函数。

大家好，我是xwhking，一名技术爱好者，目前正在全力学习 Java，前端也会一点，如果你有任何疑问请你评论，或者可以加我QQ（2837468248）说明来意！希望能够与你共同进步