vue中使用websocket实现方法---详解

一、认识webscoket是干嘛的

WebSockets 是一种先进以及广泛的技术，它可以在用户的浏览器和服务器之间打开交互式通信会话，实时获取数据。使用此 API，可以向服务器发送消息并接收事件驱动的响应，而无需通过轮询服务器的方式以获得响应，很方便。

 WebSockets 这种技术中有一个接口名为WebSocket，它是一个用于连接 WebSocket 服务器的主要接口，之后可以在这个连接上发送和接受数据。

下面的案例则是使用该接口创建一个WebSocket对象来实现如何管理。

二、创建webscoket对象

使用WebSocket接口创建对象，在创建对象之前的时候，判断当前使用的浏览器是否支持该webscoket，不支持就无法接下来的操作，判断代码如下。     

使用WebSocket接口中的构造器创建对象，构造器中传入要连接的 URL，也就是WebSocket 服务器将响应的 URL。其中ws表示使用的是WebSocket协议；还有一种wss相较于ws更为安全，他们类似于http和https。

//在任何一个文件 进行以下代码运行 都能看出是否支持WebSocket

if ("WebSocket" in window) {
    //url是你链接的地址 需要自己更改
    const url = 192.168.3.xxx:xxxx/xx/xx
    const wsUrl = url;
    socket = new WebSocket(wsUrl);
    //或者直接写
    socket = new WebSocket("192.168.3.xxx:xxxx/xx/xx");
  } else {
    Notification.error({
      title: "错误",
      message: "您的浏览器不支持websocket，请更换Chrome或者Firefox",
    });
  }

三、处理事件

        在上面对象创建成功并且浏览器支持webscoket,就可以使用以下的处理事件了。

四、webSocket已经基本创建,下面是完整代码(我写了个js文件)

import json from 'highlight.js/lib/languages/json'
import store from '../store'
let webSocket = null
let socketOpen = false

// 发送消息
// 初始化websocket
export const contactSocket = val => {
  console.log(val)
  if ('WebSocket' in window) {
    webSocket = new WebSocket('链接地址 路径')
    webSocket.onopen = function () {
      console.log('连接成功！')
    }
    webSocket.onmessage = function (evt) {
      if (evt.data == '连接成功') return
     //evt.data 是获取的数据
    }
    webSocket.onclose = function () {
      console.log('连接关闭！')
    }
    webSocket.onerror = function () {
      console.log('连接异常！')
    }
  }
}

window自定义事件

//定义
window.dispatchEvent(new CustomEvent("事件名", {参数key:参数value}))
 
//监听
window.addEventListener("事件名", 参数key => {})

五、在main.js中挂载到vue原型上

import websocket from './utils/webSocket';
Vue.prototype.$websocket = websocket;

六、在需要建立连接的组件中这样写

  async mounted() {
    this.initWebSocket();
  },
 
  methods: {
    async initWebSocket() {
      this.$websocket.initWebSocket();
    },
  },

七、在需要从服务器获取的数据进行操作的组件中这样写

  mounted() {
    window.addEventListener("onmessageWS", this.getSocketData);
  },
  
  methods: {
    getSocketData(res) {
      this.PieValue = Number(res.detail.data.sendInfoStr.onlineUserCount);
      this.userNumValue = Number(res.detail.data.sendInfoStr.totalUserCount);
    },

八、在需要关闭连接的组件(比如退出时需要关闭)中这样写

//退出登录
    logOut() {
      this.$confirm("确定要退出登录吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "退出成功!",
          });
          this.$websocket.close();
          localStorage.removeItem("token");
          this.$router.push("/login");
        }).catch(() => {
          this.$message({
            type: "info",
            message: "已取消退出",
          });
        });
    },

九、除了按钮可以主动关闭WebSocket连接以外，直接关闭浏览器窗口也会关闭连接，故此需要一个窗口监听器，来防止连接还没断开就关闭窗口，服务端出现异常。

    //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接
    window.onbeforeunload = function () {
        websocket.close();
    }