vue websockt 全局引用

创建js
import { Message } from 'element-ui'
import { getToken} from '@/utils/auth'
var url = process.env.VUE_APP_WS_API
var ws;
var tt;
var lockReconnect = false;//避免重复连接
var clientIds = getToken()//在登录时缓存  在store/modules/user.JS login方法中   缓存中取出客户端token
var websocket = {
  Init: function(clientIds) {
	  console.log(url + clientIds)
    if ("WebSocket" in window) {
      ws = new WebSocket(url + clientIds);
    } else if ("MozWebSocket" in window) {
      ws = new MozWebSocket(url + clientIds);
    } else {
      console.log("您的浏览器不支持 WebSocket!");
      return;
    }

    ws.onmessage = setOnmessageMessage

	ws.onclose = function(e) {
      console.log("连接已关闭"+ e.code + ' ' + e.reason + ' ' + e.wasClean)
      Message({
      		message: '连接已关闭',
      		type: 'error',
      });
      reconnect(clientIds);
    }

    ws.onopen = function() {
      Message({
      		message: '连接成功',
      		type: 'success',
      });
      heartCheck.start();
    }

    ws.onerror = function(e) {
      console.log("数据传输发生错误");
      Message({
      		message: '数据传输发生错误',
      		type: 'error',
      });
      reconnect(clientIds)
    }
  },
  Send:function(sender,reception,body,flag){
    let data = {
      sender:sender,
      reception:reception,
      body:body,
      flag:flag
    }
    let msg= JSON.stringify(data)
    console.log("发送消息："+msg)
    ws.send(msg)
  },
  wxOnclose(){
	  ws.onclose = function() {
	    console.log("连接已关闭")
	    Message({
	    		message: '连接已关闭',
	    		type: 'error',
	    });
	    reconnect(clientIds);
	  }
  },
  getWebSocket(){
    return ws;
  },
  getStatus() {
    if (ws.readyState == 0) {
      return "未连接";
    } else if (ws.readyState == 1) {
      return "已连接";
    } else if (ws.readyState == 2) {
      return "连接正在关闭";
    } else if (ws.readyState == 3) {
      return "连接已关闭";
    }
  },
  
}

export default websocket;

//返回消息到页面 在页面调用
async function setOnmessageMessage(event) {
			console.log(event.data, '获得消息');
			//心跳包
			 heartCheck.start()
			// 自定义全局监听事件
			window.dispatchEvent(new CustomEvent('onmessageWS', {
				detail: {
					data: event.data
				}
			}))
        }
function reconnect(sname) {
  if(lockReconnect) {
    return;
  };
  lockReconnect = true;
  //没连接上会一直重连，设置延迟避免请求过多
  tt && clearTimeout(tt);
  tt = setTimeout(function () {
    console.log("执行断线重连...")
    websocket.Init(sname);
    lockReconnect = false;
  }, 4000);
}

//心跳检测
var heartCheck = {
  timeout: 1000 * 60 * 3,
  timeoutObj: null,
  serverTimeoutObj: null,
  start: function(){
    var self = this;
    this.timeoutObj && clearTimeout(this.timeoutObj);
    this.serverTimeoutObj && clearTimeout(this.serverTimeoutObj);
    console.log('开始心跳检测',this.timeout);
    this.timeoutObj = setTimeout(function(){
      //这里发送一个心跳，后端收到后，返回一个心跳消息，
      //onmessage拿到返回的心跳就说明连接正常
      console.log('心跳检测...');
      // ws.send("HeartBeat:"+ clientIds );
      self.serverTimeoutObj = setTimeout(function() {
        if(ws.readyState!=1){
           ws.close();
        }
        // createWebSocket();
      }, self.timeout);

    }, this.timeout)
  }
}

//其中 process.env.VUE_APP_WS_API来自根目录 .env.delvelopment测试文件 线上的话需要配置.env.production文件

```cpp
// .env.delvelopment测试文件
# 开发环境配置
ENV = 'development'

# 系统/开发环境
VUE_APP_BASE_API = '/dev'
VUE_APP_WS_API='ws://192.168.13.52:8989/webSocket/'
# 路由懒加载
VUE_CLI_BABEL_TRANSPILE_MODULES = true

//在main.js引用

import websocket from '@/utils/websocketStore.js'
// 全局方法挂载
Vue.prototype.websocket=websocket

//在页面引用
import { getToken}  from '@/utils/auth'//websockt 
export default {
    name: 'parkScreen',
    data() {
        return {}
        },
      mounted() {
		//调用websockt token可以根据实际情况 选择是否传入
		that.websocket.Init(getToken())
		// 添加socket通知监听
		window.addEventListener('onmessageWS', that.getSocketData,true)
} ,
 destroyed() {
 // 在组件生命周期结束的时候销毁。
		window.removeEventListener("onmessageWS", this.getSocketData);
},
 methods: {    

	// 收到消息处理
		getSocketData (res) {
			console.log('web传来的值',res)
		}
}