websocket.js
javascript
class WebSocketUtil {
/**
*
* @param {*} deviceCode
* @param {*} reconnectDelay
* @param {*} isLog
*/
constructor(url, reconnectDelay) {
this.socket = null;
this.socketUrl = url;
this.onSendCallback = null;
this.onOpenCallback = null;
this.onMessageCallback = null;
this.onCloseCallback = null;
this.onErrorCallback = null;
this.onReconnectCallback = null;
this.reconnectDelay = reconnectDelay; // 重连延迟时间,单位为毫秒
this.isReconnect = true; // 是否重连,自动关闭设置为false
this.isLog = false;//打印
}
socketListener(onOpen, onMessage, onSend, onClose, onError, onReconnect) {
this.onOpenCallback = onOpen;
this.onMessageCallback = onMessage;
this.onSendCallback = onSend;
this.onCloseCallback = onClose;
this.onErrorCallback = onError;
this.onReconnectCallback = onReconnect;
}
socketConnect() {
if (this.socketIsConnect()) {
return
}
this.isReconnect = true//设置为true
this.socket = new WebSocket(this.socketUrl);
this.socket.onopen = () => {
if (this.isLog) {
console.log('WebSocketUtil--WebSocket连接已打开');
}
if (typeof this.onOpenCallback === 'function') {
this.onOpenCallback();
}
};
this.socket.onmessage = (event) => {
if (this.isLog) {
console.log('WebSocketUtil--收到消息:', event.data);
}
if (typeof this.onMessageCallback === 'function') {
this.onMessageCallback(event);
}
};
this.socket.onclose = () => {
if (this.isLog) {
console.log('WebSocketUtil--WebSocket连接已关闭');
}
if (typeof this.onCloseCallback === 'function') {
this.onCloseCallback();
}
//是否重连
if (this.isReconnect && !this.socketIsConnect()) {
this.socketReConnect()
}
};
this.socket.onerror = (error) => {
if (this.isLog) {
console.error('WebSocketUtil--WebSocket连接发生错误:', error);
}
if (typeof this.onErrorCallback === 'function') {
this.onErrorCallback(error);
}
// //是否重连
// if (this.isReconnect) {
// this.reConnect()
// }
};
}
/**
* 发送消息
* @param {*} message
* @param {*} onSend
*/
socketSend(message, onSend) {
var isSuccess = false
var error = ""
if (this.socketIsConnect()) {
const msg = JSON.stringify(message);
const sendResult = this.socket.send(msg);
if (sendResult == undefined) {
if (this.isLog) {
console.log('WebSocketUtil--消息发送成功:', msg);
}
isSuccess = true
} else {
if (this.isLog) {
console.error('WebSocketUtil--消息发送失败', msg);
}
isSuccess = false
}
} else {
if (this.isLog) {
console.error('WebSocketUtil--WebSocket连接未建立或已关闭');
}
error = "连接未建立或已关闭"
isSuccess = false
}
if (typeof this.onSendCallback === 'function') {
this.onSendCallback(message, isSuccess, error)
}
if (typeof onSend === 'function') {
onSend(message, isSuccess, error);
}
}
/**
* 关闭
*/
socketClose() {
this.isReconnect = false
if (this.socketIsConnect()) {
this.socket.close();
} else {
if (this.isLog) {
console.error('WebSocketUtil--WebSocket连接未建立或已关闭');
}
}
}
/**
*
*/
socketReConnect() {
if (this.socketIsConnect()) {
return
}
if (this.isLog) {
console.error('WebSocketUtil--reConnect');
}
if (typeof this.onReconnectCallback === 'function') {
this.onReconnectCallback();
}
setTimeout(() => {
if (!this.socketIsConnect() && this.isReconnect) {
this.socket.close();
this.socketConnect();
}
}, this.reconnectDelay);
}
socketIsConnect() {
var isC = false;
if (this.socket != null && this.socket.readyState === WebSocket.OPEN) {
isC = true
}
return isC;
}
}
export default WebSocketUtil;
使用
javascript
import WebSocketUtil from '../api/websocket.js';
initWebSocket(deviceCode) {
this.websocket = new WebSocketUtil(api.webSocketUrl + deviceCode, 3000);
const self = this;
this.websocket.socketListener(
function onOpen() {
console.log('连接已经打开');
self.socketTips = "已连接"
},
function onMessage(event) {
var aaa = JSON.parse(event.data)
console.log('收到消息', aaa, aaa.sysMsgType);
},
function onSend(msg, isSuccess, error) {
if (isSuccess) {
console.log('消息发送成功:', msg);
} else {
console.log('消息发送失败:', msg);
}
},
function onClose() {
console.log('连接已经关闭');
self.socketTips = "连接关闭"
},
function onError(error) {
console.log('连接出现错误:', error);
},
function onReconnect() {
console.log('---重连中---:');
self.socketTips = "重连中"
},
);
this.websocket.socketConnect();
},