场景1: 只有单个长链接，不要求保活

class WebSocketClass {

constructor() {

this.instance = null;

this.connect();

}

static getInstance() {

if (!this.instance) {

this.instance = new WebSocketClass();

}

return this.instance;

}

connect() {

this.ws = new WebSocket('ws://xxxxxx');

this.ws.onopen = e => {

this.status = 'open';

console.log(`${name}连接成功`, e);

};

}

getMessage() {

this.ws.onmessage = e => {

console.log(e.data);

return e.data;

};

}

close() {

this.ws.send('close');

this.ws.close();

console.log('close');

}

}

export default new WebSocketClass();

复制代码

调用方法：

import WebSocketClass from '@/services/webSocket';

var ws = WebSocketClass;

console.log(ws.getMessage());

复制代码

关闭方法：

import WebSocketClass from '@/services/webSocket';

var ws = WebSocketClass;

ws.close();

复制代码

场景2： 多个长链接共存

如果还是需要单例调用的话，直接用上面单个模式创建，有几个创建几个，如果不需要保证单例的话：

class WebSocketClass {

constructor(name) {

this.connect(name);

}

connect(name) {

this.ws = new WebSocket(name);

this.ws.onopen = e => {

this.status = 'open';

console.log(`${name}连接成功`, e);

};

}

getMessage() {

this.ws.onmessage = e => {

console.log(e.data);

return e.data;

};

}

close() {

this.ws.send('close');

this.ws.close();

console.log('close');

}

}

export default WebSocketClass;

复制代码

调用方式：

import WebSocketClass from '@/services/webSocket';

var ws = new WebSocketClass('ws://xxxxx');

console.log(ws.getMessage());

复制代码

关闭：这种情况就无法跨域关闭了，只能在哪里开的在哪里关，不然是关不了的，拿不到创建的时候的ws长链接对象。

保活

保活的原理-->心跳，前端每隔一段时间发送一段约定好的message给后端，后端收到后返回一段约定好的message给前端，如果多久没收到前端就调用重连方法进行重连。

import { message } from 'antd';

class WebSocketClass {

constructor() {

this.instance = null;

this.connect();

}

static getInstance() {

if (!this.instance) {

this.instance = new WebSocketClass();

}

return this.instance;

}

connect() {

this.ws = new WebSocket('ws:xxxxx');

this.ws.onopen = e => {

this.status = 'open';

message.info('连接成功');

console.log(`连接成功`, e);

this.heartCheck();

this.getMessage();

};

}

heartCheck() {

// 心跳机制的时间可以自己与后端约定

this.pingPong = 'ping'; // ws的心跳机制状态值

this.pingInterval = setInterval(() => {

if (this.ws.readyState === 1) {

// 检查ws为链接状态 才可发送

this.ws.send('ping'); // 客户端发送ping

}

}, 10000);

this.pongInterval = setInterval(() => {

if (this.pingPong === 'ping') {

this.closeHandle('pingPong没有改变为pong'); // 没有返回pong 重启webSocket

}

// 重置为ping 若下一次 ping 发送失败 或者pong返回失败(pingPong不会改成pong)，将重启

console.log('返回pong');

this.pingPong = 'ping';

}, 20000);

}

closeHandle(e = 'err') {

// 因为webSocket并不稳定，规定只能手动关闭(调closeMyself方法)，否则就重连

if (this.status !== 'close') {

console.log(`断开，重连websocket`, e);

if (this.pingInterval !== undefined && this.pongInterval !== undefined) {

// 清除定时器

clearInterval(this.pingInterval);

clearInterval(this.pongInterval);

}

this.connect(); // 重连

} else {

console.log(`websocket手动关闭,或者正在连接`);

}

}

getMessage() {

this.ws.onmessage = e => {

if (e.data === 'pong') {

this.pingPong = 'pong'; // 服务器端返回pong,修改pingPong的状态

} else {

message.info(e.data);

}

console.log(e.data);

return e.data;

};

}

close() {

clearInterval(this.pingInterval);

clearInterval(this.pongInterval);

this.status = 'close';

this.ws.send('close');

this.ws.close();

message.info('已断开连接');

console.log('close');

}

}

export default new WebSocketClass();

复制代码