Vue?socket.io模塊實現(xiàn)聊天室流程詳解
1.定義
socket.io是一個可以在客戶端和服務器之間實現(xiàn) 低延遲, 雙向 和 基于事件的 通信的庫。它建立在websocket之上，且當瀏覽器不支持websocket時會自動切換為HTTP長輪詢或自動重新連接。
ps.雖然socket.io可能使用websocket進行傳輸，但是由于它為每個數(shù)據(jù)包添加了額外的元數(shù)據(jù)，所以websocket客戶端無法連接socket.io客戶端，而socket.io客戶端同樣也無法連接websocket客戶端。
2.特點
（1）HTTP長輪詢回退
? 若無法建立Websocket連接，將自動回退為HTTP長輪詢
（2）自動重新連接
? 在某些情況下，服務器和客戶端之間的websocket連接可能會中斷，且連接雙方可能都不知道鏈接斷開的狀態(tài)。而socket.io包含一個心跳機制來定期檢測客戶端的連接狀態(tài)。當客戶端最終斷開連接，它會以指數(shù)回退延遲自動重新連接，以免服務器不堪重負。
（3）數(shù)據(jù)包緩沖
? 當客戶端斷開連接時，數(shù)據(jù)包會自動緩沖，并在重新連接時發(fā)送
（4）廣播/單播
? socket.io提供了可以方便的對消息進行廣播和單播的api
（5）多路復用
? 可以通過單條共享連接拆分應用程序的邏輯，實際應用上可以理解為聊天室里的房間
3.實例
（1）安裝
npm install socket.io
（2）初始化
服務器端：
const { Server } = require("socket.io");
const io = new Server(3000, { /* options */ });
io.on("connection", (socket) => {
// ...
});
客戶端：
<script src="/socket.io/socket.io.js"></script> <script> const socket = io(); </script>
（3）發(fā)送消息
服務器端：
io.on("connection", (socket) => {
socket.on("send_msg",(data)){
console.log(data);
io.emit("send_msg",data); //群發(fā)消息
socket.emit("send_msg",data); //私發(fā)消息
}
});
客戶端：
<script>
const socket = io();
socket.emit("send_msg","你好");
socket.on("send_msg",(msg)=> {
console.log(msg);
})
</script>
? 通過上述代碼就可以實現(xiàn)一個基本聊天室的雛形了，總體操作實現(xiàn)起來非常簡單。
到此這篇關(guān)于Vue socket.io模塊實現(xiàn)聊天室流程詳解的文章就介紹到這了,更多相關(guān)Vue socket.io實現(xiàn)聊天室內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了Vue+abp微信掃碼登錄的實現(xiàn)代碼示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-01-01
Vue 解決通過this.$refs來獲取DOM或者組件報錯問題
這篇文章主要介紹了Vue 解決通過this.$refs來獲取DOM或者組件報錯問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
Vue通過getAction的finally來最大程度避免影響主數(shù)據(jù)呈現(xiàn)問題
這篇文章主要介紹了Vue通過getAction的finally來最大程度避免影響主數(shù)據(jù)呈現(xiàn),本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-04-04
本文討論了watch函數(shù)是如何利用副作用函數(shù)和options進行封裝實現(xiàn)的，也通過調(diào)度函數(shù)去控制回調(diào)函數(shù)的立即執(zhí)行和執(zhí)行時機，還可以解決競態(tài)問題，感興趣的可以了解一下2022-04-04
使用vue.js實現(xiàn)聯(lián)動效果的示例代碼
本篇文章主要介紹了使用vue.js實現(xiàn)聯(lián)動效果的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-01-01
這篇文章主要介紹了記一次用vue做的活動頁的方法步驟，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-04-04
這篇文章主要介紹了使用Vue組件實現(xiàn)一個簡單彈窗效果,本文主要內(nèi)容會涉及到彈窗遮罩的實現(xiàn)， slot 插槽的使用方式，props 、 $emit 傳參，具體組件代碼也傳上去了。需要的朋友可以參考下2018-04-04
vue+element_ui上傳文件,并傳遞額外參數(shù)操作
這篇文章主要介紹了vue+element_ui上傳文件,并傳遞額外參數(shù)操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-12-12
這篇文章主要為大家詳細介紹了vue項目實現(xiàn)面包屑導航，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
vue 中 get / delete 傳遞數(shù)組參數(shù)方法
這篇文章主要介紹了vue 中 get / delete 傳遞數(shù)組參數(shù)方法,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-03-03