前端之vue3使用WebSocket的詳細(xì)步驟
更新時間：2022年11月25日 09:38:30 作者：一只愛吃蘿卜的小兔子
websocket實現(xiàn)的全雙工通信,真真太香了,下面這篇文章主要給大家介紹了關(guān)于前端之vue3使用WebSocket的詳細(xì)步驟,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下
WebSocket
WebSocket說明
WebSocket 是全雙工網(wǎng)絡(luò)通信通信協(xié)議，實現(xiàn)了客戶端和服務(wù)器的平等對話，任何一方都可以主動發(fā)送數(shù)據(jù)。并且在第一次建立后，就一直保持連接。
WebSocket圖示
客戶端使用WebSocket
vue3中, 客戶端使用WebSocket步驟
setup(props) {
// 1.建立鏈接 -- 攜帶cookie參數(shù)
var ws = new WebSocket(
`ws://localhost:9000/judge/submit?satoken=${cookieValue}`
);
// 2. ws.send()給服務(wù)器發(fā)送信息
let submitCode = JSON.stringify({
userId: id,
problemId: props.problemId,
isDebug: "0",
lang: lang.value,
code: code.value,
info: "",
});
ws.send(submitCode);
// 3.服務(wù)器每次返回信息都會執(zhí)行一次onmessage方法
ws.onmessage = function (e) {
console.log("服務(wù)器返回的信息: " + e.data);
if (e.data === "judging") {
showTitleClass.color = "green";
showTitle.value = "judging...";
showRes.value = "";
} else if (e.data === "connected") {
showTitleClass.color = "green";
showTitle.value = "";
}
};
// 4.卸載前, 關(guān)閉鏈接
onUnmounted(() => {
ws.close();
});
},
更多方法
使用構(gòu)造函數(shù),新建ws實例
// 執(zhí)行完本語句,客戶端就會與服務(wù)器進(jìn)行連接。
var ws = new WebSocket("wss://echo.websocket.org");
連接成功后的回調(diào)函數(shù)
ws.onopen = function(evt) {
console.log("Connection open ...");
ws.send("Hello WebSockets!");
};
// 若需要多個回調(diào) 實例.addEventListener
// ws.addEventListener('open', function (event) {
// ws.send('Hello Server!');
// });
用于指定收到服務(wù)器數(shù)據(jù)后的回調(diào)函數(shù)。
服務(wù)器數(shù)據(jù)可能是文本，也可能是二進(jìn)制數(shù)據(jù)（blob對象或Arraybuffer對象）
ws.onmessage = function(evt) {
console.log( "Received Message: " + evt.data);
ws.close();
};
指定連接關(guān)閉后的回調(diào)函數(shù)。用法同open
ws.onclose = function(evt) {
console.log("Connection closed.");
};
總結(jié)
到此這篇關(guān)于前端之vue3使用WebSocket的文章就介紹到這了,更多相關(guān)vue3使用WebSocket內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家學(xué)習(xí)介紹了基于Vue如何實現(xiàn)視頻播放的功能，文中的示例代碼講解詳細(xì)，具有一定的參考價值，需要的小伙伴可以了解一下2023-08-08
Vite打包優(yōu)化之縮小打包體積實現(xiàn)詳解
這篇文章主要為大家介紹了使用Vite縮小打包體積如何實現(xiàn)的示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
本文主要介紹了淺談Vue+Ant Design form表單的一些坑，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06
在進(jìn)行項目開發(fā)的時候因為在一個標(biāo)簽上同時使用了v-for和v-if兩個指令導(dǎo)致的報錯，遇到這個問題如何解決呢？下面小編給大家?guī)砹岁P(guān)于v-if 與 v-for 使用報錯問題分析及解決方法，一起看看吧2022-03-03
這篇文章主要介紹了Vue3之路由的元數(shù)據(jù)信息meta詳解,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-05-05
Vuepress生成文檔部署到gitee.io的注意事項及說明
這篇文章主要介紹了Vuepress生成文檔部署到gitee.io的注意事項及說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要給大家介紹了vue3前端實現(xiàn)微信支付的詳細(xì)步驟,隨著移動端的普及和互聯(lián)網(wǎng)購買需求的增加,微信支付在電商領(lǐng)域中發(fā)揮著越來越重要的作用,文中給出了詳細(xì)的代碼示例,需要的朋友可以參考下2023-11-11
這篇文章主要介紹了vue中如何給靜態(tài)資源增加路由前綴，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
這篇文章主要介紹了nuxt靜態(tài)部署打包相對路徑操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
這篇文章主要介紹了vue項目中Token的使用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-09-09