智慧团建入口登录网站,市场推广计划方案,找WordPress主题,网站推广每天必做的流程创建 WebSocket 连接的函数 创建 WebSocket 连接#xff1a;通过传入的 url 参数创建一个 WebSocket 实例。 监听连接打开事件#xff1a;当连接成功建立时#xff0c;执行传入的 onOpen 回调函数。 监听消息接收事件#xff1a;当接收到消息时#xff0c;将消息解析为 …创建 WebSocket 连接的函数 创建 WebSocket 连接通过传入的 url 参数创建一个 WebSocket 实例。 监听连接打开事件当连接成功建立时执行传入的 onOpen 回调函数。 监听消息接收事件当接收到消息时将消息解析为 JSON 格式然后执行传入的 onMessage 回调函数并将解析后的消息作为参数传递给回调函数。如果未传入 onMessage 回调函数则禁止重新连接。 监听错误事件当发生错误时尝试重新连接。 监听连接关闭事件当连接关闭时如果不需要重新连接则关闭WebSocket 连接否则尝试重新连接。 重新连接在可以重新连接且未锁定重新连接状态时延迟 5 秒后重新连接。 心跳检测每隔 15 秒向服务器发送心跳消息以保持连接。 发送消息如果 WebSocket 连接已经打开则发送消息给服务器否则打印错误信息。 关闭WebSocket 连接设置标志位 needReconnect 为 false然后关闭 WebSocket 连接。
封装的websocket.js文件内容如下
export function createWebSocket(url, onOpen, onMessage) {if (!url) {return;}let canReconnect true;// 避免重复连接let lockReconnect false;let needReconnect true;let ws null;connect();heartCheck();return {ws,sendMessage,closeWs,};// 连接服务端function connect() {ws new WebSocket(url);ws.onopen function () {if (onOpen) {onOpen();}};ws.onmessage function (msg) {if (msg msg.data) {let response JSON.parse(msg.data);console.log(response);if (onMessage) {onMessage(response);} else {canReconnect false;}}};ws.onerror function () {reconnect();};ws.onclose function () {console.log(close);if (!needReconnect) {ws.close();} else {reconnect();}};}// 重新连接服务端function reconnect() {if (!canReconnect || lockReconnect) {return;}console.log(reconnect, reconnect);lockReconnect true;setTimeout(function () {connect();lockReconnect false;}, 5000);}// 保持心跳连接function heartCheck() {if (ws ws.readyState 1) {ws.send(JSON.stringify({id: new Date().getTime(),method: PING,}));}setTimeout(function () {heartCheck();}, 15000);}function sendMessage(message) {if (ws ws.readyState 1) {ws.send(message);} else {console.log(WebSocket is not open);}}function closeWs() {needReconnect false;ws.close();}
}
ws 变量是 WebSocket 的实例可以用于其他操作比如手动触发事件、监听其他事件等。sendMessage方法可以用于发送消息给服务器。它接受一个参数即要发送的消息内容。closeWs 方法可以用于关闭 WebSocket连接并停止重连。调用这个方法之后将不会再尝试重新连接服务器。如果是自己主动关闭的话
使用方法
script
import { createWebSocket } from /utils/websocket.js;
export default {
data(){
return{
websocket: null
}}
methods:{
handleOnOpen() {if (this.websocket) {let data {你要订阅的信息};this.sendMessage(JSON.stringify(data));}},sendMessage(data) {this.websocket.sendMessage(data);},getMessage(e) {console.log(e, 接收到的数据);
}
},mounted() {
this.websocket createWebSocket(wss:xxxxx,//websocket链接的urlthis.handleOnOpen,this.getMessage);
}
}
/script
