前端之vue3使用WebSocket的詳細(xì)步驟
WebSocket
WebSocket說明
WebSocket 是全雙工網(wǎng)絡(luò)通信通信協(xié)議,實(shí)現(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實(shí)例
// 執(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!");
};
// 若需要多個(gè)回調(diào) 實(shí)例.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)文章
解決Vue.js應(yīng)用回退或刷新界面時(shí)提示用戶保存修改問題
這篇文章主要介紹了Vue.js應(yīng)用回退或刷新界面時(shí)提示用戶保存修改問題,本文通過兩種手段防止運(yùn)營編輯時(shí)丟失數(shù)據(jù),具體內(nèi)容詳情,感興趣的朋友跟隨小編一起看看吧2019-11-11
vue如何通過id從列表頁跳轉(zhuǎn)到對應(yīng)的詳情頁
這篇文章主要介紹了vue如何通過id從列表頁跳轉(zhuǎn)到對應(yīng)的詳情頁 ,需要的朋友可以參考下2018-05-05
vue.js 實(shí)現(xiàn)點(diǎn)擊按鈕動態(tài)添加li的方法
今天小編就為大家分享一篇vue.js 實(shí)現(xiàn)點(diǎn)擊按鈕動態(tài)添加li的方法,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
詳解vue-cli之webpack3構(gòu)建全面提速優(yōu)化
這篇文章主要介紹了詳解vue-cli之webpack3構(gòu)建全面提速優(yōu)化,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-12-12
Vue加載讀取本地txt/json等文件的實(shí)現(xiàn)方式
這篇文章主要介紹了Vue加載讀取本地txt/json等文件的實(shí)現(xiàn)方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
vue中for循環(huán)更改數(shù)據(jù)的實(shí)例代碼(數(shù)據(jù)變化但頁面數(shù)據(jù)未變)
這篇文章主要介紹了vue中for循環(huán)更改數(shù)據(jù)的實(shí)例代碼(數(shù)據(jù)變化但頁面數(shù)據(jù)未變)的相關(guān)資料,需要的朋友可以參考下2017-09-09
vue 項(xiàng)目中實(shí)現(xiàn)按鈕防抖方法
這篇文章主要介紹了vue 項(xiàng)目中實(shí)現(xiàn)按鈕防抖方法,首先需要新建 .js文件存放防抖方法,引入防抖文件,methods中添加方法,本文結(jié)合示例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2022-12-12
淺談Vue使用Cascader級聯(lián)選擇器數(shù)據(jù)回顯中的坑
這篇文章主要介紹了淺談Vue使用Cascader級聯(lián)選擇器數(shù)據(jù)回顯中的坑,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
解決vue2.0動態(tài)綁定圖片src屬性值初始化時(shí)報(bào)錯(cuò)的問題
下面小編就為大家分享一篇解決vue2.0動態(tài)綁定圖片src屬性值初始化時(shí)報(bào)錯(cuò)的問題,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03

