vue 项目中的 websocket

app中一直在用个推进行推送，今天和后端的小伙伴一起尝试了下websocket,总结一下。

首先websocket是js向服务器发出连接的一种请求，是h5提出的一种协议，之前的理解就是用了它当状态变化时，后端直接通知前端，很有用。

看了一下菜鸟教程，写的很详细，整体感觉websocket没有想象中的那么复杂。上代码

//创建一个socket对象，这个对象有五个方法，onopen,onmessage,onerror,onclose,send

var Socket = new WebSocket(url );

//url地址是后端小伙伴给你的，比如给你的是'192.168.1.120:9501',，那么这个url就是“ws://192.168.1.120:9501”

现在就可以肆无忌惮的调用它的方法了

Socket.onopen=function(){

      console.log('连接上了')

}

Socket.onmessage = function(e){

       //接收后端发送的数据e,并执行你想要执行的操作

}

基本上这就完成了，就是定义一个对象，调用其两个方法。以vue为例，写全它

思路new WebSocket(url)赋值给vue中的data中的对象，使其具备上述五种方法，然后初始化的时候调用这几种方法，而销毁时关闭

data(){

 socket:null

},

methods:{

 initSocket(){

this.socket= new WebSocket("ws://192.168.1.120:9501");

this.socket.onopen = this.onopen;

 

this.socket.onerror = this.onerror;

 

this.socket.onmessage = this.onmessage;

this.socket.onclose = this.socketclose;

},

//写事件

 onpen(){

//成功了

},

onerror(){

},

onmessage(e){

//收到后端发送的消息，执行事件

},

socketclose(){

 

},

created() {

//进入页面打开变链接

this.initSocket();

},

destroyed() {

//页面销毁时关闭

this.socketclose();

}

 

}

//看着很长，其实也就那两个重要的js new一个socket对象，调用它的几个方法