在vue3项目中进行websocket的连接-Toy模板网

这篇具有很好参考价值的文章主要介绍了在vue3项目中进行websocket的连接。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

首先是安装

npm install websocket
或
yarn add websocket

我这边是封装了一个websocket的类

/**
 * 参数说明：
 *  webSocketURL：String    webSocket服务地址    eg: ws://127.0.0.1:8088/websocket (后端接口若为restful风格可以带参数)
 *  callback：为带一个参数的回调函数
 *  message：String 要传递的参数值（不是一个必要的参数）
 */
export default{
    // 初始化webSocket
    webSocketInit(webSocketURL){      // ws://127.0.0.1:8088/websocket
        this.webSocket = new WebSocket(webSocketURL);
        this.webSocket.onopen = this.onOpenCellback;
        this.webSocket.onmessage = this.onMessageCallback;
        this.webSocket.onerror = this.onErrorCallback;
        this.webSocket.onclose = this.onCloseCallback;
    },

    // 自定义回调函数
    setOpenCallback(callback){ //  与服务端连接打开回调函数
        this.webSocket.onopen = callback;
    },
    setMessageCallback(callback){   //  与服务端发送消息回调函数
        this.webSocket.onmessage = callback;
    },
    setErrorCallback(callback){ //  与服务端连接异常回调函数
        this.webSocket.onerror = callback;
    },
    setCloseCallback(callback){ //  与服务端连接关闭回调函数
        this.webSocket.onclose = callback;
    },

    close(){
        this.webSocket.close();
    },
    sendMessage(message){
        this.webSocket.send(message);
    },
}

再进行使用文章来源地址https://www.toymoban.com/news/detail-852906.html

import webSocket from '@/utils/webSocket';


const webSocketUrl = import.meta.env.VITE_APP_SOCKET_API;
  webSocket.webSocketInit(webSocketUrl + `/websocket/platform${id}`); //初始化webSocket
  webSocket.setOpenCallback((res) => {
    console.log('连接建立成功', res);
  });
  webSocket.setMessageCallback((res) => {
    console.log('接收到回信', resData);
    //对接收到的数据进行处理    
})

到了这里，关于在vue3项目中进行websocket的连接的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！