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
  }