Vue?socket.io模塊實現(xiàn)聊天室流程詳解
1.定義
socket.io是一個可以在客戶端和服務(wù)器之間實現(xiàn) 低延遲, 雙向 和 基于事件的 通信的庫。它建立在websocket之上，且當(dāng)瀏覽器不支持websocket時會自動切換為HTTP長輪詢或自動重新連接。
ps.雖然socket.io可能使用websocket進行傳輸，但是由于它為每個數(shù)據(jù)包添加了額外的元數(shù)據(jù)，所以websocket客戶端無法連接socket.io客戶端，而socket.io客戶端同樣也無法連接websocket客戶端。
2.特點
（1）HTTP長輪詢回退
? 若無法建立Websocket連接，將自動回退為HTTP長輪詢
（2）自動重新連接
? 在某些情況下，服務(wù)器和客戶端之間的websocket連接可能會中斷，且連接雙方可能都不知道鏈接斷開的狀態(tài)。而socket.io包含一個心跳機制來定期檢測客戶端的連接狀態(tài)。當(dāng)客戶端最終斷開連接，它會以指數(shù)回退延遲自動重新連接，以免服務(wù)器不堪重負。
（3）數(shù)據(jù)包緩沖
? 當(dāng)客戶端斷開連接時，數(shù)據(jù)包會自動緩沖，并在重新連接時發(fā)送
（4）廣播/單播
? socket.io提供了可以方便的對消息進行廣播和單播的api
（5）多路復(fù)用
? 可以通過單條共享連接拆分應(yīng)用程序的邏輯，實際應(yīng)用上可以理解為聊天室里的房間
3.實例
（1）安裝
npm install socket.io
（2）初始化
服務(wù)器端：
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ā)送消息
服務(wù)器端：
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)文章
這篇文章主要介紹了VueX模塊的具體使用，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
vuejs2.0子組件改變父組件的數(shù)據(jù)實例
本篇文章主要介紹了vuejs2.0子組件改變父組件的數(shù)據(jù)實例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-05-05
這篇文章主要為大家介紹了繪制flowable?流程圖的Vue?庫使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
這篇文章主要為大家介紹了vue使用Swiper踩坑及解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-05-05
大家都經(jīng)常使用美團app買電影票，很多朋友不知道她的功能是怎么實現(xiàn)的，作為我程序員一枚對它的算法很好奇，今天小編就把基于Vue實現(xiàn)美團app的影院推薦選座功能分享到腳本之家平臺，感興趣的朋友一起看看吧2018-08-08
基于Vue2.0和Typescript實現(xiàn)多主題切換的示例
本文主要介紹了基于Vue2.0和Typescript實現(xiàn)多主題切換的示例，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
vue報錯Failed to execute 'appendChild&apos
這篇文章主要為大家介紹了vue報錯Failed to execute 'appendChild' on 'Node'解決方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-11-11
vue3使用拖拽組件draggable.next的保姆級教程
做項目的時候遇到了一個需求,拖拽按鈕到指定位置，添加一個輸入框,這篇文章主要給大家介紹了關(guān)于vue3使用拖拽組件draggable.next的保姆級教程,需要的朋友可以參考下2023-06-06
這篇文章主要給大家介紹了關(guān)于vue中正確使用jsx的相關(guān)資料,JSX就是Javascript和XML結(jié)合的一種格式,React發(fā)明了JSX,利用HTML語法來創(chuàng)建虛擬DOM,當(dāng)遇到<,JSX就當(dāng)HTML解析,遇到{就當(dāng)JavaScript解析,需要的朋友可以參考下2021-07-07
這篇文章主要介紹了Vue3 Composition API的使用簡介，幫助大家更好的理解和學(xué)習(xí)使用vue，感興趣的朋友可以了解下2021-03-03