vue中使用websocket

一、websocket可以干什么

对于前端工程师来说，一般是前端通过触发事件，主动发起请求来获取后台数据。但是特定情况下，需要后端服务器主动推送数据到前端。这时候普通的axios等请求是无法实现的，websocket恰好可以实现这个需求。

二、vue中使用websocket

1. 在src -> utils文件夹里面添加variable.js文件

const socketRoot = 'ws://xx.x.xxx.xxx:xxxx/ws' // 服务器

export default {
  socketRoot
}

2. 在main.js中全局引用

import variable from "./utils/variable";
Vue.prototype.websocketUrl = variable

3. 在组件中使用

初始化：
	created(){
      this.init()
    }

离开页面后关闭：
 	destroyed () {
      this.socket.close()// 关闭连接
    }

methods里面的方法：

	 init () {
        if(typeof(WebSocket) === "undefined"){
          alert("您的浏览器不支持socket")
        }else{
          this.socket = new WebSocket(this.websocketUrl.socketRoot) // 实例化socket
          this.socket.onopen = this.open// 监听socket连接
          this.socket.onerror = this.error // 监听socket错误信息
          this.socket.onmessage = this.getMessage   // 监听socket消息
          this.socket.onclose = this.close   // 关闭socket消息
        }
      },
      open () {
        console.log("温度socket连接成功")
      },
      error() {
        console.log("连接错误")
      },
      getMessage(msg) {
       console.log("推送回来的数据",msg)
      },
      close(){
        console.log("socket已经关闭")
      }