部分开发者在vue的开发过程中，会使用到websocket服务。这时候会问如何在vue中定义全局websocket，然后可以在各个组件中进行引用和使用。在这里我给大家分享一下网友提供的一套解决方案，希望能解决在vue全局websocket的使用问题。

1）首先创建一个全局 js 文件，如 global.js ，用于定义全局变量 ws 和方法 setWs()。

// global.js
export default {
ws: {},
setWs: function(newWs) {
this.ws = newWs
}
}

2）在 main.js 中引入 global.js

// main.js
import global from ‘./xx/global.js’
Vue.prototype.global = global

3）在 app.vue 中初始化 webSocket ,并在 created() 方法中调用

//app.vue
localSocket() {
let that = this;
if (“WebSocket” in window) {
console.log(“您的浏览器支持 WebSocket!”);

that.ws = new WebSocket(wss://echo.websocket.org/);
that.global.setWs(that.ws);
that.ws.onopen = that.onopen();

that.ws.onclose = function() {
// 关闭 websocket
console.log(“连接已关闭…”);
setTimeout(() => {
that.localSocket();
}, 2000);
};

} else {
// 浏览器不支持 WebSocket
console.log(“您的浏览器不支持 WebSocket!”);
}
},

4）在其他页面发送和接收 socket 消息

//pageA.vue

// 发送和接收消息
handdleMsg(msg) {
let that = this;
console.log(that.global.ws);
if (that.global.ws && that.global.ws.readyState == 1) {
console.log(“发送信息”, msg);
that.global.ws.send(msg);
}
that.global.ws.onmessage = function(res) {
console.log(“收到服务器内容”, res);
};
}

通过以上步骤，就可以实现vue全局使用websocket了。

当然，我们还有更方便快捷的在vue中使用websocket的方法，那就是使用GoEasy提供的服务。

要使用GoEasy提供的websocket服务，首先需要在你的vue项目中引入GoEasy。目前GoEasy提供三种方式的引入，你可以根据实际项目的需求进行选择引入方式。

1、引入GoEasy：

<script type=”text/javascript” src=”https://cdn.goeasy.io/goeasy-1.0.3.js”></script>

或

npm install –save goeasyimport GoEasy from ‘goeasy’;

或下载 https://cdn.goeasy.io/goeasy-1.0.3.js

import GoEasy from ‘./goeasy-1.0.3’;

2、 初始化GoEasy：

//初始化全局GoEasy对象
Vue.prototype.$goEasy = new GoEasy({
host:’hangzhou.goeasy.io’,//应用所在的区域地址，杭州：hangzhou.goeasy.io，新加坡：singapore.goeasy.io
appkey: “my_appkey”,//替换为您的应用appkey
onConnected: function() {
console.log(‘连接成功！’)
},
onDisconnected: function() {
console.log(‘连接断开！’)
},
onConnectFailed: function(error) {
console.log(‘连接失败或错误！’)
}
});

通过两步，我们已经成功的在vue中引入了GoEasy服务，接下来就是在vue项目中进行消息的收发测试了。 更多在vue中使用websocket的教程，可以看这里：vue websocket消息推送