vue封装websocket建立心跳并使用

新建websocket.js

var websock = null;
var global_callback = null;

function initWebSocket(url){ //初始化weosocket
    // 处理地址转化ws
    // if(url.indexOf('https')!=-1){
    //   url='ws'+url.substring(5)
    // }else if(url.indexOf('http')!=-1){
    //   url='ws'+url.substring(4)
    // }
    //ws地址
    websock = new WebSocket(url);
    websock.onmessage = function(e){
        websocketonmessage(e);
    } 
    websock.onclose = function(e){
        websocketclose(e);
    }
    console.log(url)
    websock.onopen = function () {
        websocketOpen();
    }
    
    //连接发生错误的回调方法
    websock.onerror = function () {
        console.log("WebSocket连接发生错误");
    }
}
 
// 实际调用的方法
function sendSock(agentData,callback){  
    global_callback = callback;
    if (websock.readyState === websock.OPEN) {
        //若是ws开启状态
        websocketsend(agentData)
    }else if (websock.readyState === websock.CONNECTING) {
        // 若是 正在开启状态,则等待1s后重新调用
        setTimeout(function () {
            sendSock(agentData,callback);
        }, 1000);
    }else {
        // 若未开启 ,则等待1s后重新调用
        setTimeout(function () {
            sendSock(agentData,callback);
        }, 1000);
    }
}
 
//数据接收
function websocketonmessage(e){ 
    global_callback(e.data);
    // global_callback(JSON.parse(e.data));
}
 
//数据发送
function websocketsend(agentData){
    websock.send(agentData);
    // websock.send(JSON.stringify(agentData));
}
 
//关闭
function websocketclose(e) {
    websock.close()
    console.log("connection closed (" + e + ")");
}
 
function websocketOpen(e){
    console.log("连接成功");
}
 
 
export default{sendSock,initWebSocket,websocketclose}

我是局部使用

导入

import  ws  from "../../../../../utils/websocket";

使用

let url = "url;
 ws.initWebSocket(url);
// 12345 为发送的参数  this.wsMessage  回调函数,用来处理返回值(methods中定义wsMessage(res)"{}方法)
 ws.sendSock("12345", this.wsMessage);


// 关闭websocket
ws.websocketclose()

这样就表示连接成功 

  • 1
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值