Vue-websocket,vue全局通讯

import moment from 'moment'
import Vue from 'vue'
Vue.prototype.$moment = moment
var websock = null
var ws = null
var globalCallback = function () {};

let rec; //断线重连后，延迟5秒重新创建WebSocket连接  rec用来存储延迟请求的代码
let isConnect = false; //连接标识 避免重复连接
let checkMsg = "ping"; //心跳发送/返回的信息 服务器和客户端收到的信息内容如果如下 就识别为心跳信息 不要做业务处理
var data = {
    to:-1,
    text:'/'
};
let createWebSocket = () => {
    try {
        var ishttps = 'https:' == document.location.protocol ? true : false;
        var ws 
        if(ishttps) {
            ws = 'wss://wdev.xxx.com/api/screen/webSocket/'+moment().valueOf()
        } else {
            ws = 'ws://wdev.xxx.com/api/screen/webSocket/'+moment().valueOf();
        }
        initWebSocket(); //初始化websocket连接
    } catch (e) {
        console.log("尝试创建连接失败");
        reConnect(); //如果无法连接上webSocket 那么重新连接！可能会因为服务器重新部署，或者短暂断网等导致无法创建连接
    }
};
//定义重连函数
let reConnect = () => {
    console.log("尝试重新连接");
    if (isConnect) return; //如果已经连上就不在重连了
    rec && clearTimeout(rec);
    rec = setTimeout(function () { // 延迟5秒重连  避免过多次过频繁请求重连
        createWebSocket();
    }, 5000);
};
 //心跳设置
var heartCheck = {
    timeout: 20000, //每段时间发送一次心跳包 这里设置为20s
    timeoutObj: null, //延时发送消息对象（启动心跳新建这个对象，收到消息后重置对象）

    start: function () {
        this.timeoutObj = setTimeout(function () {
            // if (isConnect) websock.send(checkMsg);
            // console.log('0',websock)
            // websock.send(checkMsg);
            websock.send(JSON.stringify(data));
        }, this.timeout);
    },

    reset: function () {
        clearTimeout(this.timeoutObj);
        this.start();
    }
};


// 数据接收
function websocketonmessage (e) {
    // console.log(JSON.parse(e.data))
    globalCallback(JSON.parse(e.data))
}
 
// 数据发送
function websocketsend (agentData) {
//   websock.send(JSON.stringify(agentData))
  setTimeout(() => { 
    // 添加状态判断，当为OPEN时，发送消息
    if (websock.readyState === websock.OPEN) { // futwebsock.OPEN = 1 
    // 发给后端的数据需要字符串化
    websock.send(agentData)
    }
    if (websock.readyState === websock.CLOSED) { // futwebsock.CLOSED = 3 
        // document.write("重连中，请稍候" + "</br>");
        console.log("重连中，请稍候")
        isConnect = false; //连接断开修改标识
        reConnect(); //连接错误 需要重连
    }
  }, 500)
}
 
// 关闭
function websocketclose (e) {
    // e.code === 1000  表示正常关闭。 无论为何目的而创建, 该链接都已成功完成任务。
    // e.code !== 1000  表示非正常关闭。
    // document.write('websocket 连接关闭 connection closed (' + e.code + ')' + "</br>")
    isConnect = false ; //断开后修改标识
    console.log('connection closed (' + e.code + ')')
    console.log('websocket 连接关闭')
}
 
// 创建 websocket 连接
function websocketOpen (e) {
    console.log('连接成功')
}
 // 初始化websocket
function initWebSocket (path) {
    if (typeof(WebSocket) === "undefined") {
        alert("您的浏览器不支持socket")
    } else {
        // ws = path
        // ws地址 -->这里是你的请求路径
        var ishttps = 'https:' == document.location.protocol ? true : false;
        var ws 
        if(ishttps) {
            // ws = `wss://` + 'v3.zt.uhappy.net.cn/ws/msg?token='+token+'&uid='+uid;
            ws = 'wss://wdev.xxx.com/api/screen/webSocket/'+moment().valueOf()
        } else {
            ws = 'ws://wdev.xxx.com/api/screen/webSocket/'+moment().valueOf()
        }
        websock = new WebSocket(ws)
        websock.onmessage = function (e) {
            websocketonmessage(e)
            heartCheck.reset();
        }
        websock.onclose = function (e) {
            websocketclose(e)
            reConnect(); //连接错误 需要重连
        }
        websock.onopen = function () {
            websocketOpen()
            heartCheck.start();
        }
        
        // 连接发生错误的回调方法
        websock.onerror = function () {
            // document.write('WebSocket连接发生错误' + "</br>")
            console.log('WebSocket连接发生错误')
            isConnect = false; //连接断开修改标识
            reConnect(); //连接错误 需要重连
        }
    }
}
 
// 实际调用的方法
function sendSock (agentData, callback) {
  globalCallback = 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 getSock(callback) {
    globalCallback = callback
}
 
/**
 * 关闭websocket函数
 */
function closeSock () {
    if (websock) {
        websock.close() // 关闭websocket
    }
  }
initWebSocket()
// 将方法暴露出去
export {
    initWebSocket,
    sendSock,
    getSock,
    closeSock
}

import * as socketApi from '@/api/websocket'
Vue.prototype.socketApi = socketApi
websocket.js  //路径在api里
initWebSocket()  //连接websocket (已自动连接)

vue页面中调用方法：
发送消息：
 var data = {};
    data["to"] = -1;
    data["text"] = '456';  //text 发送值
//发送的参数：JSON.stringify(data)   回调方法：this.getConfigResult
this.socketApi.sendSock(JSON.stringify(data), this.getConfigResult);

获取消息：
this.socketApi.getSock(this.getConfigResult);

关闭连接：
this.socketApi.closeSock

<template>
    <div class="msgContent">
        <p>【发送消息】：<input type="text" value="hello websocket" v-model="value">
        <!-- <p>【操作开启socket】：<div><button onclick="openSocket()">开启socket</button></div> -->
        <div class="sendBtn" @click="sendMessage()">发送消息</div>
        <div>
            【收到消息】：
            <p v-for="(item,index) in message" :key="index">{{item}}</p>
        </div>
    </div>
</template>
 
<script>
    export default {
        name: 'mymarquee',
        data() {
            return {
                path: 'ws://wdev.xxx.com/api/screen/webSocket/',
                message:[],
                msgShow:false,
                value:''
            }
        },
        created(){
            // this.path += this.$moment().valueOf()
            // this.socketApi.initWebSocket(this.path);
            this.socketApi.getSock(this.getConfigResult);
        },
        methods: {
            stop(){
                this.msgShow = false;
            },
            getConfigResult (res) {
                this.message.push(res.date+' 消息：'+ res.text)
                // // 接收回调函数返回数据的方法
                console.log(this.message)
            },
            sendMessage() {
                if(typeof(WebSocket) == "undefined") {
                    console.log("您的浏览器不支持WebSocket");
                }else {
                    var data = {};
                    data["to"] = -1;
                    data["text"] = this.value;
                    console.log(JSON.stringify(data))
                    this.socketApi.sendSock(JSON.stringify(data), this.getConfigResult);
            
                }
            },
        }, 
        destroyed () {
            this.socketApi.closeSock()
        },
　　}
 </script>
 
<style lang="less">
.msgContent {
    width: 100%;
    font-size: 32px;
    margin-top: 200px;

    .sendBtn {
        width: 300px;
        padding: 10px;
        border: 1px solid #333;
        margin: 50px auto;
        cursor: pointer;
    }
}
</style>