Vue使用socket实现实时通信

一、新建socket文件

class SocketService {constructor() {this.socket = null;this.reconnectTimer = null;this.messageCallback = null;this.connectionParams = null;this.path=null}init() {this.clearReconnectTimer(); // 尝试重新连接之前先清除重连定时器if (typeof WebSocket === "undefined") {throw new Error("您的浏览器不支持WebSocket");}this.socket = new WebSocket(this.path);this.socket.addEventListener("open", this.open.bind(this));this.socket.addEventListener("error", this.error.bind(this));this.socket.addEventListener("close", this.close.bind(this));this.socket.addEventListener("message", this.getMessage.bind(this));}open() {console.log('%c [ WebSocket已连接 ]', 'font-size:16px; background:#7fce50; color:white;')this.clearReconnectTimer();}close(event) {console.log('%c [ WebSocket已关闭并断开连接 ]', 'font-size:16px; background:red; color:white;')this.destroyWebsocket();}error(event) {console.log('%c [ WebSocket已断开连接 ]', 'font-size:16px; background:red; color:white;')this.startReconnectTimer();}getMessage(event) {if (event.data === "连接成功") {return;}const message = event.data;if (this.messageCallback) {this.messageCallback(message);}}startReconnectTimer() {if (!this.reconnectTimer) {this.reconnectTimer = setInterval(() => {console.log('%c [ WebSocket已断开 尝试重新连接... ]', 'font-size:16px; background:red; color:white;')if (this.connectionParams) {this.init();}}, 3000); // 重连间隔为 3 秒}}clearReconnectTimer() {if (this.reconnectTimer) {clearInterval(this.reconnectTimer);this.reconnectTimer = null;this.clearReconnectTimer();}}destroyWebsocket() {if (this.socket) {this.socket.close();this.socket = null;this.clearReconnectTimer();this.messageCallback = null; // 或者清除 messageCallback 的引用}}
}const socketService = new SocketService();
export default socketService;

二、引入并调用

//引入
import socketService from "./socket.js";
//开启
initSocketService() {// const id = '';const path = `${Monitor_Alarm}${this.tenantId}/${this.userInfo.id}`;// const path =// 	"ws://aes.aes-iot.com:8301/sys-alarm/ws/dashboard/admin/d35fd488525686145aca387b0158c234";// let url = .replace(/^https?:\/\//g, "");// const path = `ws://${url}/sys-alarm/ws/dashboard/802/10000`;// const type = "device";// 初始化 WebSocket 连接 传递类型 设备idsocketService.path = path;socketService.init();socketService.messageCallback = this.handleMessage;},
//接收消息后的处理
handleMessage(message) {}
//关闭
this.closeWebsocket();