前端 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)说明来意!希望能够与你共同进步