前端 WebSocket 的一些使用
前端 WebSocket 的一些使用
文章目录
- 前端 WebSocket 的一些使用
- 连接的建立
- 接收消息
- 发送消息
- 关闭连接
- 处理
WebSocket 是一种网络通信协议，用于实现双向通信。在前端中，你可以使用 JavaScript 中的
WebSocket 对象来创建 WebSocket 连接，发送和接收数据。
连接的建立
通过创建一个 WebSocket 对象建立一个 WebSocket 连接
例如：
const ws = new WebSocket('ws://localhost:8080/channel/echo');
传给对象的参数是通过 WebSocket 协议通讯的网络地址。
接收消息
接收消息这里指的是接收服务端的消息。
这里有两种方法。
-
使用
addEventListener： 你可以使用addEventListener来监听message事件，这是最常见的方式，也是推荐的做法。ws.addEventListener('message', (event) => {const receivedMessage = event.data;console.log('Received message from server:', receivedMessage);// 在这里处理接收到的消息 }); -
使用
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 是否打开： 你可以通过检查 WebSocket 的 readyState 属性来判断 WebSocket 是否打开。如果 readyState 的值为 WebSocket.OPEN，则表示连接已打开：
if (ws.readyState === WebSocket.OPEN) {// WebSocket 连接已打开
}
这样你就可以在代码中判断 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);
});
同样可以使用onclose 、 onerror 、 onopen 属性定义时间监听函数。
大家好，我是xwhking，一名技术爱好者，目前正在全力学习 Java，前端也会一点，如果你有任何疑问请你评论，或者可以加我QQ（2837468248）说明来意！希望能够与你共同进步