WebSocket 对象
let Socket = new WebSocket(url, [protocol] );以上代码中的第一个参数 url, 指定连贯的 URL。第二个参数 protocol 是可选的，指定了可承受的子协定。1、websocket事件；
let socket = new WebSocket("//申请地址" ); // 定义socket socket.onopen 连贯建设时触发socket.onmessage 接收数据时触发socket.onerror 通信谬误时触发socket.onclose 连贯敞开时触发 2、websocket状态码（socket.readyState，示意连贯状态，能够是以下值）
0：未连贯（正在建设连贯连贯，还没有实现） 1：连贯已建设（连贯胜利建设，能够进行通信） 2：连贯正在敞开（连贯正在进行敞开握手，行将敞开） 3：连贯已敞开或打不开连贯（ 连贯曾经敞开或者基本没有建设）3、websocket办法；
socket.send()； 向服务器发送数据 socket.close(); 敞开连贯封装
webSocket.js
/** * websocket相干办法类 * websocket相干属性（仅供参考）： * 在此新增、编辑、删除、获取websocket * 应用时间接应用 send办法即可，而后依据须要调用其余的办法 * */class WebsocketApi { constructor() { this.websocket = new Map(); //初始化websocket容器 this.baseUrl = baseUrl; //默认URL，在config.js中配置，在main.js中注入 this.isOpen = false; // 开启标识，连贯标识 防止反复连贯 this.heartbeatInterval = 60000; //心跳发送频率,每段时间发送一次心跳包 这里设置为60s,不同于重连频率 this.heartbeatData = null; // 心跳发送的数据内容 this.heartbeatTimer = null; // 心跳timer this.heartbeat = null; //延时发送音讯对象（启动心跳新建这个对象，收到音讯后重置对象） this.isReconnect = true; // 是否主动重连 this.reconnectInterval = 3000; // 重连频率，不同于心跳包发送工夫距离 this.reconnectCount = 3; // 重连次数 this.reconnectCurrent = 0; // 已发动重连次数 this.reconnectTimer = null; // 重连timer } /** * 初始化websocket * @param url * websocket地址，默认为 this.baseUrl * @param callback * 初始化过程中的回调函数 * 如果是一般字符串，则视为拼接到websocketURL前面的参数 * @param callback：回调函数，用于获取onmessage事件返回的数据 * @returns 无返回值 */ init(_url, callback) { const url = _url ? _url : this.baseUrl; if (!('WebSocket' in window)) { console.warn('浏览器不反对WebSocket'); return; } // 曾经创立过连贯不再反复创立 if (this.websocket) { return this.websocket; } this.websocket = new WebSocket(url); // 连贯胜利 this.websocket.onopen = () => { console.log('连贯胜利'); this.isOpen = true; this.isReconnect = true; // 开启心跳 this.heartbeat(); }; this.websocket.onmessage = res => { this.getMessage(res, callback); }; // 连贯产生谬误 this.websocket.onerror = function (e) { console.error('WebSocket连贯产生谬误'); if (!this.isOpen) { this.reconnect(url); //重连 } }; // 敞开连贯 this.websocket.onclose = e => { console.log(`连贯已断开 (${e.code})`); clearInterval(this.heartbeatInterval); this.isOpen = false; // 须要从新连贯 if (this.isReconnect) { this.reconnectTimer = setTimeout(() => { // 超过重连次数 if (this.reconnectCurrent > this.reconnectCount) { clearTimeout(this.reconnectTimer); return; } // 记录重连次数 this.reconnectCurrent += 1; this.reconnect(url); }, this.reconnectInterval); } }; } /** * 心跳办法，定时唤起连贯 * @returns 没有返回值 */ heartbeat() { this.heartbeat = setInterval(() => { if (this.isOpen) { this.send(this.heartbeatData); } else { this.clear(); } }, this.heartbeatInterval); if (this.heartbeatTimer) { clearInterval(this.heartbeatTimer); } this.heartbeatTimer = setInterval(() => { this.send(this.heartbeatData); }, this.heartbeatInterval); } /** * 发送音讯办法 * @param data 要发送的数据内容 * @param callback 发送之后的回调函数 * @returns websocket实例或者undefined */ send(data, callback) { // 开启状态间接发送 if (this.websocket.readyState === this.websocket.OPEN) { this.websocket.send(JSON.stringify(data)); //在这里依据本人的须要转换数据格式 if (callback) { callback(); } // 正在开启状态，则期待1s后从新调用 } else if (this.websocket.readyState === this.websocket.CONNECTING) { setTimeout(() => { this.send(data, callback); }, 1000); // 未开启，则期待1s后从新调用 } else { this.init(); setTimeout(() => { this.send(data, callback); }, 1000); } } /** * 接管音讯办法 * @param cb 接管到的音讯后的回调函数 * @returns websocket实例或者undefined */ getMessage(cb) { this.websocket.onmessage = message => { try { const params = JSON.parse(message.data); if (params !== null && cb) { return cb(params); } else { return params; } } catch (error) { console.error(error); } }; } /** * 从新连贯的办法 * @returns 没有返回值 */ reconnect(_url) { const url = _url ? _url : this.baseUrl; console.log('发动从新连贯', this.reconnectCurrent); if (this.websocket && this.isOpen) { this.clear(); } this.websocket = null; this.init(url); } /** * 清理websocket容器中连贯曾经敞开或者关上链接失败的websocket */ clear() { this.websocket.close(); this.heartbeat = null; this.heartbeatTimer = null; }}const websocketApi = new WebsocketApi();export default websocketApi;利用
例子1
<script src="./webSocket.js"></script><script type="text/javascript">websocketApi.init();websocketApi.clear();websocketApi.getMessage(res => { console.log(JSON.parse(res.data));});websocketApi.send('1234');</script>