Vue中使用Websocket进行前后端实时交互

使用场景：

前端需要和服务端进行服务连接，当前端在收到服务端发送的相关指令后可进行页面上的相关处理或者数据展示；

为什么使用它呢？

答案很简单，因为 HTTP 协议有一个缺陷：通信只能由客户端发起。
举例来说，我们想了解今天的天气，只能是客户端向服务器发出请求，服务器返回查询结果。HTTP 协议做不到服务器主动向客户端推送信息。
WebSocket 协议在2008年诞生，2011年成为国际标准。所有浏览器都已经支持了。
它的最大特点就是，服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息，是真正的双向平等对话，属于服务器推送技术的一种。

方式对比.png

大家一起手把手撸一次：

最近做的项目中发现Websocket的使用频率还是比较高的，话不多说，上代码：

//data中定义要使用的变量：
data(){
    return {
      websock: null,  //websocket
    }
  },

相关api的使用：
!!!在相关的操作方法在可以加上自己项目的实际逻辑操作

methods:{
  // WebSocket
    initWebSocket(){ 
      console.log('websocket连接了');
     //初始化weosocket
      let Ip = window.location.host      
    //这里的wsuri是根据服务端的ip进行配置（开发环境），生产环境的话可以使用上面的Ip或者是nginx做代理
      const wsuri = `ws://192.168.20.28:10068/websocket/power`;      //协议标识符是ws（如果加密，则为wss），服务器网址就是 URL。 
      // const wsuri = `ws://${Ip}/ws/${localStorage.getItem('name')}`;  
      this.websock = new WebSocket(wsuri);        
      this.websock.onmessage = this.websocketonmessage;    
      this.websock.onopen = this.websocketonopen;     
      this.websock.onerror = this.websocketonerror;     
      this.websock.onclose = this.websocketclose;
    },
    websocketsend(){//数据发送
      // let msg=JSON.stringify(111111);
      // this.websock.send(msg);
    }, 
    websocketonopen(){ //连接建立之后执行send方法发送数据
    },
    websocketonerror(error){//连接建立失败重连
      this.initWebSocket();
    },
    websocketonmessage(e){ //数据接收
      console.log(e）
    },
    websocketclose(e){  //关闭
      this.websock.close() 
    },
}

钩子函数：

mounted(){
    this.initWebSocket()
  },
  beforeDestroy () {
    this.websocketclose()
  }

注意：在单独某些页面使用的时候切记要在beforeDestroy里进行销毁，虽然是轻量级，但不用的时候是还是断开吧。

当然，在使用的时候还会出现一种情况：就是出现连接失败，控制台报错，因为代码中的处理方式是断线一直重新连接，在这里，我们可以自行添加一个‘心跳处理’，就是如果一段时间没有相关处理，那就不在主动进行连接，这个读者可以自行编写，或者查阅一下相关处理方式；

Tips:以上是本人在项目中的处理方式，或许存在不完善的地方，欢迎大家留言指正。

附上阮老师的详解链接：http://www.ruanyifeng.com/blog/2017/05/websocket.html 有兴趣的小伙伴可以深入研究一下。
希望各位小猿技术更上一层楼！