js中使用websocket

 后端地址是http的   websocket地址 ws开头;后端地址是https的,websocket地址wss开头;

对于websocket没有跨域的问题

import { MessageBox } from 'element-ui';
let url = "ws://192.168.0.181:8000";  //请求的后端地址

let websocket = null;//全局WebSocket对象
let lockReconnect = false; // 网络断开重连
let wsCreateHandler = null; // 创建连接
export function createWebSocket(fn){
  try{
    if ('WebSocket' in window) {
      websocket = new WebSocket(`${url}/webSocketServer?token=${getToken()}`);
    } else if ('MozWebSocket' in window) {
      websocket = new MozWebSocket(`${url}/webSocketServer?token=${getToken()}`);
    } else {
      websocket = new SockJS(`${url}/sockjs/webSocketServer?token=${getToken()}`);
    }
  }catch {
    reconnect();
    return;
  }

  websocket.onopen = function(event) {
   // websocket.send("连接成功");
    console.log("服务已连接")
  };

  websocket.onmessage = function(event){
    var data=JSON.parse(event.data);
    if(data.type === 'exit'){
      MessageBox.alert(data.name, '提示', {
        dangerouslyUseHTMLString: true,
        showConfirmButton: true,
        type: 'warning',
      }).then(()=>{
        store.dispatch('user/resetToken').then(() => {
          removeToken();
          // window.location.reload();
          router.replace("/login")
        });
      });

    }
    fn(data);


  };
  websocket.onclose = function(event) {
    console.log("服务连接关闭")
  };
  websocket.onerror = function(event) {

    console.log(event,"连接出错")
  };
}
/**
 *  异常处理
 * 处理可以检测到的异常,并尝试重新连接
 */
function reconnect() {
  if (lockReconnect) {
    return;
  }
  console.log("reconnect");
  lockReconnect = true;
  // 没链接上会一直连接,设置延迟,避免过多请求
  wsCreateHandler && clearTimeout(wsCreateHandler);
  wsCreateHandler = setTimeout(function() {
    console.log("-----websoket异常-------");
    createWebSocket();
    lockReconnect = false;
  }, 1000);
}
export function websocketClose() {
  console.log('执行了关闭')
  websocket.close();    //手动关闭websocket
}

注意:系统退出后需要关闭websocket,尤其是平台需要单账号登陆的。

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值