Vue如何使用WebSocket

Vue如何使用 WebSocket

简介

websocket是基于TCP的一种双向通信协议。在此之前，一直是采用轮询的方式进行双向通信，这种方式效率低下还非常浪费资源。为了解决这种问题，websocket应运而生。

特性(特点)

1.双向通信：websocket使得客户端跟服务端之间交换数据变得更加简单。允许服务器主动向客户端推送数据。浏览器只需要和服务器完成一次握手，就可以创建持久性的连接，并进行双向数据传输。
2.实时性强: 服务器可以主动给客户端推送数据，相比http请求需要先由客户端发起请求，浏览器才会响应，延迟明显更少、时间更短。
3.连接保持：websocket连接创建成功后，只要连接不断开，通信会一直保持，而且还会省略部分状态信息（http请求可能每次请求都需要携带状态信息）

使用场景

相对于http，websocket优势显而易见。所以在一些实时通信上，都需要用到websocket，比如电池电量的获取,类似一些需要持续的双向信息获取的地方.

如何在Vue中使用

1、我们先在utils下新建一个websocket.js文件

let webSocket = null;
let socketOpen = false;
 
// 发送消息
export const doSend = (message) => {
  if (socketOpen) {
    webSocket.send(message)
  }
}
 
// 初始化websocket
export const contactSocket = () => {
  if ("WebSocket" in window) {
    webSocket = new WebSocket("ws://192.168.5.147:8088/");
    webSocket.onopen = function () {
      console.log("连接成功！");
      socketOpen = true
    };
    webSocket.onmessage = function (evt) {
      var received_msg = evt.data;
      console.log("接受消息：" + received_msg);
    };
    webSocket.onclose = function () {
      console.log("连接关闭！");
    };
    webSocket.onerror = function () {
      console.log("连接异常！");
    };
  }
}

2、页面引入文件

import { contactSocket, doSend }  from '@/utils/contactSocket'

3、具体使用实例

// 初始化websocket
contactSocket()
// 发送消息内容
setTimeout(() => {
  doSend("向服务端发送的消息")
}, 1000)