vue使用websocket概念及示例
概念部分:
1,WebSocket 是 HTML5 提供的 TCP 連接上進行全雙工通訊的協(xié)議。一次握手之后,服務(wù)器和客戶端可以互相主動通信,雙向傳輸數(shù)據(jù)。
2,瀏覽器想服務(wù)器發(fā)送請求,建立連接之后,可通過send()方法想服務(wù)器發(fā)送數(shù)據(jù),并通過message事件接受服務(wù)器返回的數(shù)據(jù)。
使用示例
<script> export default { mounted() { this.connectWebsocket(); }, methods: { connectWebsocket() { let websocket; if (typeof WebSocket === "undefined") { console.log("您的瀏覽器不支持WebSocket"); return; } else { let protocol = "ws"; let url = ""; if (window.localtion.protocol == "https:") { protocol = "wss"; } // `${protocol}://window.location.host/echo`; url = `${protocol}://localhost:9998/echo`; // 打開一個websocket websocket = new WebSocket(url); // 建立連接 websocket.onopen = () => { // 發(fā)送數(shù)據(jù) websocket.send("發(fā)送數(shù)據(jù)"); console.log("websocket發(fā)送數(shù)據(jù)中"); }; // 客戶端接收服務(wù)端返回的數(shù)據(jù) websocket.onmessage = evt => { console.log("websocket返回的數(shù)據(jù):", evt); }; // 發(fā)生錯誤時 websocket.onerror = evt => { console.log("websocket錯誤:", evt); }; // 關(guān)閉連接 websocket.onclose = evt => { console.log("websocket關(guān)閉:", evt); }; } } } }; </script>
以上就是vue使用websocket概念及示例的詳細內(nèi)容,更多關(guān)于vue使用websocket的資料請關(guān)注腳本之家其它相關(guān)文章!
- 一文詳解websocket在vue2中的封裝使用
- Vue項目中Websocket的使用實例
- 前端之vue3使用WebSocket的詳細步驟
- vue3.0中使用websocket,封裝到公共方法的實現(xiàn)
- vue3+ts+Vuex中使用websocket協(xié)議方式
- Vue項目使用Websocket大文件FileReader()切片上傳實例
- vue項目使用websocket連接問題及解決
- Vue?websocket封裝實現(xiàn)方法詳解
- vue基于websocket實現(xiàn)智能聊天及吸附動畫效果
- Flask使用SocketIO實現(xiàn)WebSocket與Vue進行實時推送
- vue+flv.js+SpringBoot+websocket實現(xiàn)視頻監(jiān)控與回放功能
- vue項目中使用websocket的實現(xiàn)
- vue 項目中使用websocket的正確姿勢
- vue實現(xiàn)websocket客服聊天功能
- Vue+Websocket簡單實現(xiàn)聊天功能
- vue使用WebSocket模擬實現(xiàn)聊天功能
- websocket+Vuex實現(xiàn)一個實時聊天軟件
- 使用WebSocket+SpringBoot+Vue搭建簡易網(wǎng)頁聊天室的實現(xiàn)代碼
相關(guān)文章
vue 中 get / delete 傳遞數(shù)組參數(shù)方法
這篇文章主要介紹了vue 中 get / delete 傳遞數(shù)組參數(shù)方法,本文給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2021-03-03解決vue 按鈕多次點擊重復(fù)提交數(shù)據(jù)問題
這篇文章主要介紹了vue 按鈕多次點擊重復(fù)提交數(shù)據(jù)的問題,本文通過實例結(jié)合的形式給大家介紹的非常詳細,需要的朋友可以參考下2018-05-05Vue filter 過濾當前時間 實現(xiàn)實時更新效果
這篇文章主要介紹了Vue filter 過濾當前時間 實現(xiàn)實時更新效果,本文通過實例代碼給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下2019-12-12簡單實現(xiàn)vue中的依賴收集與響應(yīng)的方法
這篇文章主要介紹了簡單實現(xiàn)vue中的依賴收集與響應(yīng)的方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2019-02-02