WebSocket前端封装，使用详细？(websocket相关属性和请求体传参)

简述：WebSocket是一种在单个TCP连接上进行全双工通信的协议。相较于传统的HTTP协议，WebSocket提供了更高效、实时的通信方式，特别适用于需要低延迟、持续数据交换的场景，如在线聊天、多人协作编辑、实时股票报价、在线游戏、IoT设备控制等。这里来记录一下

---

⭐WebSocket的属性和方法

---

1. websocket事件

  let socket = null；                                             //socket/ws
  socket = new WebSocket("//请求地址")；       //定义socket
  socket.onopen           连接建立时触发
  socket.onmessage        接收数据时触发
  socket.onerror          通信错误时触发
  socket.onclose          连接关闭时触发 

2. websocket状态码（socket.readyState，表示连接状态，可以是以下值）

 0：未连接（正在建立连接连接，还没有完成）
 1：连接已建立（连接成功建立，可以进行通信）
 2：连接正在关闭（连接正在进行关闭握手，即将关闭）
 3：连接已关闭或打不开连接（ 连接已经关闭或者根本没有建立）

 3. websocket方法

 socket.send()；   向服务器发送数据
 socket.close();   关闭连接

⭐WebSocket使用详细

---

一. WebSocket封装，并使用请求体传参，具体的使用详细如下

//新建websocket.js文件，定义先关数据，方便使用；
let socket = null
let handleMessage = null
let handleErr = null

// 引入cookie方法，获取用户权限 
// 使用vue-cookie/js-cookie和原生cookie都可以获取（vue/js需要下载相关插件）
import Cookies from 'js-cookie'
const TokenKey = Cookies.get("Admin-Token")
// console.log(TokenKey);

//初始化连接websocket，监听websocket各状态
function initSocket(url, data) {
    if (typeof WebSocket === 'undefined') {
        console.log("初始化失败, 不支持使用WebSocket");
    }

    // 定义scoket 请求体传参不需要加data，相当于post;
    socket = new WebSocket(url, [TokenKey])    
    // 定义scoket 拼接传递参数需要加上data，相当于get;
    // socket = new WebSocket(url + data, [TokenKey])

    // 连接成功
    socket.onopen = (e) => {
        socketOnOpen()
    }
    //返回数据
    socket.onmessage = (e) => {
        socketOnMessage(e)
    }
    // 连接失败
    socket.onerror = (e) => {
        socketOnError()
    }
    // 连接关闭时触发
    socket.onclose = (e) => { }
}

//连接成功后的操作
function socketOnOpen(e) {
    console.log("连接成功");
}

//接收到websocket传过来message后的操作
function socketOnMessage(e) {
    //handleMessage为组件中传过来的自定义的方法,判断是否传递过来该方法
    // if (handleMessage) {
    //     console.log("返回信息：");
    //     handleMessage(JSON.parse(e.data))
    // }

    // 对后端返回返回数据做处理
    if (e.data == "Success") {
        console.log("首次连接返回:", "Success");
    } else if (handleMessage) {
        console.log("然后返回数据:");
        handleMessage(JSON.parse(e.data));
    }
}

//连接错误后的操作
function socketOnError(e) {
    if (handleErr) {
        console.log("连接错误");
        handleErr()
    }
}

//向websocket传递参数数据
function socketSend(data) {
    setTimeout(() => {
        if (socket.readyState === 1) {
            socket.send(JSON.stringify(data))
        } else if (socket.readyState === 3) {
            console.log("WebSocket链接已关闭, 没有链接成功");
        }
    }, 500)
}

/** 发送websocket请求
 * @param {String} url 连接的websocket地址
 * @param {Object} data 需要传递的参数
 * @param {Function} handleData 获取websocket传过来的数据后的处理函数
 * @param {Function} handleError websocket连接出错后的处理函数
 */
export function connectSocket(url, data, handleData, handleError) {
    // handleMessage = null
    // handleErr = null
    if (handleData) {
        handleMessage = handleData
    }
    if (handleError) {
        handleErr = handleError
    }
    initSocket(url, data)//初始化
    socketSend(data)//发送参数
}

//关闭webSocket
export function closeSocket() {
    if (socket) {
        socket.close()
    }
}

二. 直接在页面引入使用

// 页面引入使用 路径多去少补
import { connectSocket, closeSocket } from "@/utils/btmSocket";

methods: {
    // 定义websocket方法 ， 方便调用 ，在方法里面初始化websocket
    choseInitSocket() {
       //1、路径，  2、参数， 3、函数调用，
      connectSocket(
        `ws://192.168.0.29:8080/....../real?`,
        "Id=" +
          this......Id +
          "&bus=" +
          this......bus,
        this.handleMessage
      );
    },
    // 定义函数方法，方便js调用
    handleMessage(e) {
      console.log("后端返回数据："，e);
    },
}

mounted() {
    this.choseInitSocket(); //调用方法，初始化socket
},

补充：如果前端需要传Authourization（也就是我们要传给后端的token验证）时，后端也需要做 "Sec-Websocket-Protocol" 处理，不然就会出线报错。

感觉有用，就一键三连，感谢(●'◡'●)