前端之vue3使用WebSocket的詳細(xì)步驟
WebSocket
WebSocket說明
WebSocket 是全雙工網(wǎng)絡(luò)通信通信協(xié)議,實(shí)現(xiàn)了客戶端和服務(wù)器的平等對話,任何一方都可以主動(dòng)發(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ù)器每次返回信息都會(huì)執(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í)行完本語句,客戶端就會(huì)與服務(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)文章
Vite打包優(yōu)化之縮小打包體積實(shí)現(xiàn)詳解
這篇文章主要為大家介紹了使用Vite縮小打包體積如何實(shí)現(xiàn)的示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-01-01解決v-if 與 v-for 同時(shí)使用報(bào)錯(cuò)的問題
在進(jìn)行項(xiàng)目開發(fā)的時(shí)候因?yàn)樵谝粋€(gè)標(biāo)簽上同時(shí)使用了v-for和v-if兩個(gè)指令導(dǎo)致的報(bào)錯(cuò),遇到這個(gè)問題如何解決呢?下面小編給大家?guī)砹岁P(guān)于v-if 與 v-for 使用報(bào)錯(cuò)問題分析及解決方法,一起看看吧2022-03-03Vuepress生成文檔部署到gitee.io的注意事項(xiàng)及說明
這篇文章主要介紹了Vuepress生成文檔部署到gitee.io的注意事項(xiàng)及說明,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-09-09vue3前端實(shí)現(xiàn)微信支付詳細(xì)步驟
這篇文章主要給大家介紹了vue3前端實(shí)現(xiàn)微信支付的詳細(xì)步驟,隨著移動(dòng)端的普及和互聯(lián)網(wǎng)購買需求的增加,微信支付在電商領(lǐng)域中發(fā)揮著越來越重要的作用,文中給出了詳細(xì)的代碼示例,需要的朋友可以參考下2023-11-11