vue中使用websocket

谁践踏了优雅 2022-12-22 04:38 165阅读 0赞

## 一、websocket可以干什么 ##

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

## 二、vue中使用websocket ##

1.  在src -> utils文件夹里面添加variable.js文件![在这里插入图片描述][20201117160204425.png_pic_center]

const socketRoot = 'ws://xx.x.xxx.xxx:xxxx/ws' // 服务器
    
    export default { 
      socketRoot
    }

1.  在main.js中全局引用

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

1.  在组件中使用

初始化：
    	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已经关闭")
          }

[20201117160204425.png_pic_center]: /images/20221120/90c2e0f9b23640028a105f6b674a6a58.png