js实现websocket
2021-04-08 本文已影响0人
五岁小孩
js实现websocket
-
js
var socketUrl = "ws://" + window.location.host + "/dashboard/ws/getLinkTrendData/"; var socket = ""; $(function () { //webSocket LinkId不同,连接对象不同 let linkId = $(".link-rate-active").attr("data-linkId"); webSocketConn(linkId); }); //当用户频繁切换链路时,被切换的链路socket连接会在后台返回数据时进行重连, // 导致页面趋势图数据绘制错误,为防止出现这种错误,故只指定唯一的重连对象LinkId,保证重连的对象为当前点击的链路 //在重连的监听事件(onclose)中对重连对象再次判断连接是否关闭,以防止同一对象链路重连多次 var linkIdTemp=""; // web socket连接 function webSocketConn(linkId) { if (linkId === ""||linkId===undefined) { return false; } // webSocket.org提供测试的WebSocket服务器 ->开源的接口地址 // let selectid=treeNode.id; if (socket !== "" && socket !== undefined) { //关闭之前的websocket socket.close(); } //指定重连的linkId,保证重连的对象为当前点击的链路 linkIdTemp=linkId; socket = new WebSocket(socketUrl + linkId); // 建立连接触发 socket.onopen = function (e) { // 发送数据 socket.send('dashboard get link trend data'); }; // 接收数据触发 socket.onmessage = function (result) { //console.log(result); var data = JSON.parse(result.data); console.log(data); var initData=data["data"]; var countMap =data["countMap"]; console.log(countMap); }; // 连接发生错误时触发 socket.onerror = function (ev) { console.log("webSocketConn onerror:", ev); }; // 连接关闭时触发,网络异常或后台服务关闭,5秒后再连接 socket.onclose = function (ev) { //保证只重连当前点击的对象 //防止多次点击,连接多次触发重连接 if(socket.readyState !== socket.OPEN){ console.log("socket connect close......",ev); setTimeout(function () { if (linkIdTemp!==""&&linkIdTemp!==undefined) { console.log("正在重新连接......",linkIdTemp); webSocketConn(linkIdTemp) }else{ console.log("重新连接对象为空,取消重新连接......") } }, 5000); }else{ console.log("连接已成功,取消多次重新连接......") } }; }
-
websocket 抽取
//websocket /** * * @param socketUrl : 连接的url,如"ws://" + window.location.host + "/ws"; * @param openCallBack : 打开连接后回调函数,参数为sock对象,event事件,如openCallBack(socket,ev) * @param messageCallBack : 收到消息回调函数,参数为sock对象,event事件,如messageCallBack(socket,ev) * @param sendCallBack : 发送消息调用函数,参数为sock对象,event事件,如sendCallBack(socket,ev) * @param errorCallback : 连接错误回调函数,参数为sock对象,event事件,如errorCallback(socket,ev) * @param closeCallback : 连接关闭回调函数,参数为sock对象,event事件,如closeCallback(socket,ev) * @param reConnObj(TODO 参数未启用) : 连接关闭/错误后重连接json对象:{isReConn:true,ReConnInterval:3000},null则默认不重连, * @param reConnObj(TODO 参数未启用) : 参数:{ * isReConn:true,//是否重连 * ReConnInterval:3000,//重连间隔,单位毫秒 * ReConnTimes:5 //重连次 * }, * @returns {WebSocket} */ function newWebSocket(socketUrl,openCallBack,messageCallBack,sendCallBack, errorCallback,closeCallback,reConnObj) { let socket=new WebSocket(socketUrl) //打开连接 socket.onopen=function (ev) { if (typeof openCallBack == 'function'){ //打开后回调 openCallBack(socket,ev) }else{ console.log("websocket 连接'" + socketUrl + "'成功:",ev); } } //收到消息 socket.onmessage=function(ev){ if (typeof messageCallBack == 'function'){ //收到消息调用 messageCallBack(socket,ev) }else{ console.log("当前websocket(" + socketUrl + ") 无回调函数; 收到消息:" + ev.data); } } //连接错误 socket.onerror=function (ev) { if (typeof errorCallback=='function'){ errorCallback(socket,ev) }else{ console.log("当前websocket(" + socketUrl + ") 连接error:" + ev); } } //连接关闭 socket.onclose=function (ev) { if (typeof closeCallback=='function'){ closeCallback(socket,ev) }else{ console.log("当前websocket(" + socketUrl + ") 连接error:" + ev); } } //返回连接对象 return socket }