首先是安裝
npm install websocket
或
yarn add websocket我這邊是封裝了一個(gè)websocket的類(lèi)文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-852906.html
/**
* 參數(shù)說(shuō)明：
* webSocketURL：String webSocket服務(wù)地址 eg: ws://127.0.0.1:8088/websocket (后端接口若為restful風(fēng)格可以帶參數(shù))
* callback：為帶一個(gè)參數(shù)的回調(diào)函數(shù)
* message：String 要傳遞的參數(shù)值（不是一個(gè)必要的參數(shù)）
*/
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;
},
// 自定義回調(diào)函數(shù)
setOpenCallback(callback){ // 與服務(wù)端連接打開(kāi)回調(diào)函數(shù)
this.webSocket.onopen = callback;
},
setMessageCallback(callback){ // 與服務(wù)端發(fā)送消息回調(diào)函數(shù)
this.webSocket.onmessage = callback;
},
setErrorCallback(callback){ // 與服務(wù)端連接異常回調(diào)函數(shù)
this.webSocket.onerror = callback;
},
setCloseCallback(callback){ // 與服務(wù)端連接關(guān)閉回調(diào)函數(shù)
this.webSocket.onclose = callback;
},
close(){
this.webSocket.close();
},
sendMessage(message){
this.webSocket.send(message);
},
}再進(jìn)行使用文章來(lái)源地址http://www.zghlxwxcb.cn/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);
//對(duì)接收到的數(shù)據(jù)進(jìn)行處理
})到了這里，關(guān)于在vue3項(xiàng)目中進(jìn)行websocket的連接的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
