封装
根据项目的目录结构，在相应的文件夹下创建一个js文件，用来封装一个websocket类，假如项目中用到js的地方很多，最好把文件放在全局公共文件夹中；
export class WS{
constructor(config) {
this.ws = null;
this.url = null;
this.config = config;
this.socketLink(config)
}
socketLink(config) {
// console.log(config);
this.url = config.url;
this.createWebSocket(this.url);
}
createWebSocket(url) {
try {
if ('WebSocket' in window) {
this.ws = new WebSocket(url, 'echo-protocol');
} else if ('MozWebSocket' in window) {
this.ws = new MozWebSocket(url, 'echo-protocol');
} else {
alert("您的浏览器不支持websocket")
}
this.initWebSocket();
} catch (e) {
// this.reconnect(url);
console.log(e);
}
}
initWebSocket() {
this.ws.onclose = () =>{
window.alert("websocket连接关闭!")
};
this.ws.onerror = () => {
window.alert("websocket连接错误!")
};
this.ws.onopen = () => {
window.alert(this.config.url + '连接成功')
};
this.ws.onmessage = (event) => {
if(event.data){
this.config.getMsg(event.data)
}
};
}
//如果需要向服务器发送消息，可以通过调用这个函数实现
sendWebSocket (agentData) {
// 添加状态判断，当为OPEN时，发送消息
if (this.ws.readyState === this.ws.OPEN) { // 1
let params = JSON.stringify(agentData)
}else if (this.ws.readyState === this.ws.CLOSED) { // 3
window.alert('websocket连接异常!')
}else{
window.alert("not OPEN")
}
}
//如果有重复连接的需要可以加个定时器，在连接失败时再次连接
reconnect(url) {
setTimeout(()=> {
this.createWebSocket(url);
}, 2000);
}
}
使用
在需要创建websocket连接的地方引入这类，并初始化(这里是vue3)
import {WS} from '@/config/websocket/websocket.js'
const socketInstance = ref({})
//websocket配置
const config = {
url:'http://xxx',
getMsg: (val) => {
//接收到返回的message
const resInfo = JSON.parse(val)
//to do ...
}
}
//发送消息msg
socketInstance.sendWebSocket(msg)