vue使用websocket方法介绍_websocket在vue中怎么用
我们在使用vue进行项目开发的过程中,或多或少会遇到实时数据的推送和更新的需求。这时候我们有比较多的选择,其中运用比较广泛的解决方案是websocket。
websocket最大的特点就是服务端可以主动向客户端推送消息,客户端也可以主动向服务端发送消息,websocket的出现让前后端的数据实时交互更高效。
不过很多开发者在vue中使用websocket或多或少总会遇到一些问题,我这里总结了下在vue中使用websocket需要注意的几点:
(1)首先需要判断浏览器是否支持websocket
(2)在vue组件加载的时候连接websocket,在组件销毁的时候断开websocket
(3)后端接口需要引入socket模块,否则不能实现连接
做过相关浏览器兼容的程序员应该都知道要做好以上3点并不是一件容易的事情。
为了更好的解决以上问题,GoEasy提供开放的API接口,完美兼容世界上的绝大多数浏览器,包括IE6, IE7之类的非常古老的浏览器。让你无需单独开发websocket服务,几行代码即可快速实现websocket服务。
下面我给大家简单介绍下vue中使用websocket(GoEsy)的方法。
1、在vue项目中引入GoEasy:
要使用GoEasy提供的websocket服务,首先需要在你的vue项目中引入GoEasy。目前GoEasy提供三种方式的引入,你可以根据实际项目的需求进行选择引入方式。
<script type="text/javascript" src="https://cdn.goeasy.io/goeasy-1.0.3.js"></script> //如果需要支持低版本的IE6,IE7,IE8浏览器,请引入json2.js。 <script type="text/javascript" src="https://cdn.goeasy.io/json2.js"></script> Copy
或
npm install --save goeasy import GoEasy from 'goeasy'; Copy
或下载 https://cdn.goeasy.io/goeasy-1.0.3.js
import GoEasy from './goeasy-1.0.3';
初始化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项目中进行消息的收发测试了。
2、在vue中接收消息:
this.$goEasy.subscribe({ channel: "my_channel", //替换为您自己的channel onMessage: function (message) { console.log("Channel:" + message.channel + " content:" + message.content); } });
3、在vue中发送消息:
this.$goEasy.publish({ channel: "my_channel", //替换为您自己的channel message: "Hello, GoEasy!" //替换为您想要发送的消息内容 });
通过以上三个步骤,就完成了vue中使用websocket进行消息推送的测试。
4、服务端推送消息:
在实际开发过程中,我们更多的会是从服务器端往vue客户端发送消息。针对这样的使用场景,GoEasy提供了丰富的服务端Rest API接口,通过GoEasy提供的Rest API接口,你可以方便快捷的推送消息到vue客户端。
URL:http(s)://<REST Host>/publish
在使用Rest API的过程中,请根据您的应用所在区域,替换<REST Host>,杭州:rest-hangzhou.goeasy.io,新加坡:rest-singapore.goeasy.io。
Method:Post
参数:
参数名字 | 是否必须 | 描述 |
appkey | 是 | 您的appkey |
channel | 是 | 您的目标channel |
content | 是 | 推送的消息内容 |
更多关于Rest API的使用技巧,可以来这里看看:GoEasy服务器发送消息,GoEasy提供了php、java、python等多种服务端语言的支持。