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

布满荆棘的人生 2023-10-02 23:32 31阅读 0赞

### **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.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验证）时，后端也需要接收处理，设置响应标头，不然就会出线报错；**

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