前端 WebSocket 的一些使用

文章目录

  • 前端 WebSocket 的一些使用
    • 连接的建立
    • 接收消息
    • 发送消息
    • 关闭连接
    • 处理

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

连接的建立

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

例如:

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

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

接收消息

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

这里有两种方法。

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

    ws.addEventListener('message', (event) => {const receivedMessage = event.data;console.log('Received message from server:', receivedMessage);// 在这里处理接收到的消息});
  2. 使用 onmessage 属性: 除了使用 addEventListener,你还可以直接设置 onmessage 属性来指定消息处理函数。这与之前的示例相似,但更简洁:

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

发送消息

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

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

关闭连接

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

ws.close();

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

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

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

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

处理

处理连接状态: 你可以监听其他事件,例如 opencloseerror,以处理连接的不同状态:

ws.addEventListener('open', (event) => {console.log('WebSocket 已连接');});ws.addEventListener('close', (event) => {console.log('WebSocket 连接已关闭');});ws.addEventListener('error', (event) => {console.error('WebSocket 连接出现异常:', event.error);});

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

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