webSocket通信封装
一. js使用WebSocket介绍
二. webSocket js封装使用
三. js封装代码
一. js使用WebSocket介绍
1. 创建WebSocket实例
url：url之前需添加ws://（未加密）或wss://（已加密），类似http://、https://
protocol：与服务端定义的协议名称相同，协议的参数例如XMPP（Extensible Messaging and Presence Protocol）、SOAP（Simple Object Access Protocol）或者自定义协议
var ws = new WebSocket('ws://url');
var ws1 = new WebSocket('ws://url', 'myprotocol');
var ws2 = new WebSocket('ws://url', ['protocol_1','protovol_2']));
1
2
3
2.属性
①readyState属性：WebSocket当前连接状态
属性值 属性常量 描述
0 CONNECTING 正在与服务端建立WebSocket连接，还没有连接成功
1 OPEN 连接成功并打开，可以发送消息
2 CLOSING 进行关闭连接的操作，且尚未关闭
3 CLOSE 连接已关闭或不能打开
通过 ws.readyState属性查看当前连接状态
alert('ws连接状态：' + ws.readyState);
1
②bufferedAmount：检查传输数据的大小，当客户端传输大量数据时使用避免网络饱和
③protocol：在构造函数中使用，protocol参数让服务端知道客户端使用的WebSocket协议。而WebSocket对象的这个属性就是指的最终服务端确定下来的协议名称，可以为空
3. 方法
①发送数据：send()
②关闭连接：closed()
//发送数据
var message = {
id: 1,
title: '发送ws数据'
}
ws.send(JSON.stringify(message)); // 复杂的数据结构要先进行序列化
//关闭连接
ws.close()
4. 事件
WebSocket API是纯事件驱动，建立连接之后，可自动发送状态改变的数据和通知
事件值 描述
onopen 当建立websocket连接时触发，只触发一次
onerror 当连接出现错误时触发-因为当触发了onerror之后连接就会触发关闭事件
onmessage 当服务端发送数据时触发，可多次触发，页面数据展示处理模块–实现轮询
onclose 当websocket连接关闭时触发，只触发一次
使用示例
var ws = new WebSocket('ws://url');
// 获取连接状态
console.log('ws连接状态：' + ws.readyState);
//监听是否连接成功
ws.onopen = function () {
console.log('ws连接状态：' + ws.readyState);
//连接成功则发送一个数据
ws.send('test1');
}
// 接听服务器发回的信息并处理展示
ws.onmessage = function (data) {
console.log('接收到来自服务器的消息：');
console.log(data);
//完成通信后关闭WebSocket连接
ws.close();
}
// 监听连接关闭事件
ws.onclose = function () {
// 监听整个过程中websocket的状态
console.log('ws连接状态：' + ws.readyState);
}
// 监听并处理error事件
ws.onerror = function (error) {
console.log(error);
}
二. webSocket js封装使用
创建一个js文件, 代码在下, 最后将方法暴露出去, 使用的时候可以直接引用文件中的方法 调用, 或者 将该js文件挂载在vue的prototype中
直接引用文件 方法 调用
import {createWebSocket} from '@/utils/socket’
createWebSocket()
挂载在vue的prototype中
3. 整个项目只有一条webSocket通信:
① 在登录后即可创建webSocket通信, 接受的数据中可定义一个参数, 该参数来控制是 做什么功能
例如这里 :
“webSocket_device_transport” 是某一个界面需要实时添加的一些数据
“webSocket_device_alarm” 是一个全局提示弹框, 需要添加的数据
② 创建了 new Map(); key和value 用来一一对应发送和接受的数据
//思路
var globalCallback = new Map(); //创建 new Map()
globalCallback.set(key,callback); //发送数据的时候, 要定义一个唯一的key 和后端返回的key是一一对应, 定义一个回调函数用来接收数据后处理数据
//例如上图片中 接收的数据 res.method == "webSocket_device_transport", 用sn作为唯一的标识符,
// 客户端在发送数据时 globalCallback.set("sn",resultFunc), 通过globalCallback存了一个key为"sn"的回调函数,
// 然后通信接收的数据中 返回作为标识符的"sn", 用来查找存的回调函数, 然后处理数据. (因为处理数据的方法可能有多种, 不唯一, 所以用回调函数)
const callback = globalCallback.get(ret.sn)
callback(ret);
三. js封装代码
import { getToken} from '@/utils/auth'
var websock = null;
let rec; //断线重连后，延迟5秒重新创建WebSocket连接 rec用来存储延迟请求的代码
let isConnect = false; //连接标识 避免重复连接
let checkMsg = "heartbeat"; //心跳发送/返回的信息 服务器和客户端收到的信息内容如果如下 就识别为心跳信息 不要做业务处理
var globalCallback = new Map();
let createWebSocket = () => {
try {
initWebSocket(); //初始化websocket连接
} catch (e) {
console.log("尝试创建连接失败");
reConnect(); //如果无法连接上webSocket 那么重新连接！可能会因为服务器重新部署，或者短暂断网等导致无法创建连接
}
};
//定义重连函数
let reConnect = () => {
console.log("尝试重新连接");
if (isConnect) return; //如果已经连上就不在重连了
rec && clearTimeout(rec);
rec = setTimeout(function () { // 延迟5秒重连 避免过多次过频繁请求重连
createWebSocket();
}, 5000);
};
//设置关闭连接
let closeWebSocket = () => {
websock.close();
};
//心跳设置
var heartCheck = {
timeout: 20000, //每段时间发送一次心跳包 这里设置为20s
timeoutObj: null, //延时发送消息对象（启动心跳新建这个对象，收到消息后重置对象）
start: function () {
this.timeoutObj = setInterval(function () {
console.log("hearting ....")
if (isConnect) websock.send(checkMsg);
}, this.timeout);
},
reset: function () {
clearInterval(this.timeoutObj)
this.start();
},
stop: function (){
clearInterval(this.timeoutObj)
}
};
// 初始化websocket
function initWebSocket() {
// ws地址
// const wsUri = "ws://10.27.100.151:5000/occpws/customWebSocket";
const wsUri = "wss://cloudiot.notioni.com/ws/occpws/customWebSocket";
websock = new WebSocket(wsUri,getToken())
websock.onmessage = function (e) {
websocketonmessage(e)
}
websock.onclose = function (e) {
websocketclose(e)
}
websock.onopen = function () {
websocketOpen()
heartCheck.start();
}
// 连接发生错误的回调方法
websock.onerror = function () {
console.log('WebSocket连接发生错误')
isConnect = false; //连接断开修改标识
reConnect(); //连接错误 需要重连
}
}
// 实际调用的方法
function sendSock(agentData, callback, key) {
if (!websock){
initWebSocket()
}
globalCallback.set(key,callback)
if (websock.readyState === websock.OPEN) {
// 若是ws开启状态
websocketsend(agentData)
} else if (websock.readyState === websock.CONNECTING) {
// 若是 正在开启状态，则等待1s后重新调用
setTimeout(function () {
sendSock(agentData, callback,key)
}, 2000)
} else {
// 若未开启 ，则等待1s后重新调用
setTimeout(function () {
sendSock(agentData, callback,key)
}, 2000)
}
}
function getSock(key,callback) {
globalCallback.set(key,callback)
}
// 数据接收
function websocketonmessage(e) {
let ret = JSON.parse(decodeUnicode(e.data))
if (!ret) {
heartCheck.reset()
} else {
if (ret.msg === "websocket connect success") {
} else {
if (ret.method === "webSocket_device_transport"){
const callback = globalCallback.get(ret.sn)
if (callback && typeof callback === "function")
callback(ret);
}else if(ret.method === "webSocket_device_alarm"){
const callback = globalCallback.get('deviceAlert')
if (callback && typeof callback === "function")
callback(ret);
}
}
}
// globalCallback(JSON.parse(e.data))
function decodeUnicode(str) {
str = str.replace(/\\/g, "%");
//转换中文
str = unescape(str);
//将其他受影响的转换回原来
str = str.replace(/%/g, "\\");
//对网址的链接进行处理
str = str.replace(/\\/g, "");
return str;
}
}
// 数据发送
function websocketsend(agentData) {
console.log("数据发送",JSON.stringify(agentData))
websock.send(JSON.stringify(agentData))
}
// 关闭
function websocketclose(e) {
console.log(e)
isConnect = false ; //断开后修改标识
heartCheck.stop()
console.log('connection closed (' + e.code + ')')
}
// 创建 websocket 连接
function websocketOpen(e) {
isConnect = true
console.log('连接成功')
}
//登录成功后再建立连接
//initWebSocket()
// 将方法暴露出去
export {
sendSock,
getSock,
createWebSocket,
closeWebSocket,
initWebSocket
}
————————————————
版权声明：本文为CSDN博主「Hello 阿凡达」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_38746300/article/details/128675243
联系客服
