Vue?socket.io模塊實(shí)現(xiàn)聊天室流程詳解

更新時(shí)間：2022年12月30日 09:47:31 作者：volit_

vue-socket.io其實(shí)是在socket.io-client（在瀏覽器和服務(wù)器之間實(shí)現(xiàn)實(shí)時(shí)、雙向和基于事件的通信）基礎(chǔ)上做了一層封裝，將socket掛載到vue實(shí)例上，同時(shí)可使用sockets對(duì)象輕松實(shí)現(xiàn)組件化的事件監(jiān)聽(tīng)，在vue項(xiàng)目中使用起來(lái)更方便

1.定義

socket.io是一個(gè)可以在客戶(hù)端和服務(wù)器之間實(shí)現(xiàn) 低延遲, 雙向和基于事件的通信的庫(kù)。它建立在websocket之上，且當(dāng)瀏覽器不支持websocket時(shí)會(huì)自動(dòng)切換為HTTP長(zhǎng)輪詢(xún)或自動(dòng)重新連接。

ps.雖然socket.io可能使用websocket進(jìn)行傳輸，但是由于它為每個(gè)數(shù)據(jù)包添加了額外的元數(shù)據(jù)，所以websocket客戶(hù)端無(wú)法連接socket.io客戶(hù)端，而socket.io客戶(hù)端同樣也無(wú)法連接websocket客戶(hù)端。

2.特點(diǎn)

（1）HTTP長(zhǎng)輪詢(xún)回退

? 若無(wú)法建立Websocket連接，將自動(dòng)回退為HTTP長(zhǎng)輪詢(xún)

（2）自動(dòng)重新連接

? 在某些情況下，服務(wù)器和客戶(hù)端之間的websocket連接可能會(huì)中斷，且連接雙方可能都不知道鏈接斷開(kāi)的狀態(tài)。而socket.io包含一個(gè)心跳機(jī)制來(lái)定期檢測(cè)客戶(hù)端的連接狀態(tài)。當(dāng)客戶(hù)端最終斷開(kāi)連接，它會(huì)以指數(shù)回退延遲自動(dòng)重新連接，以免服務(wù)器不堪重負(fù)。

（3）數(shù)據(jù)包緩沖

? 當(dāng)客戶(hù)端斷開(kāi)連接時(shí)，數(shù)據(jù)包會(huì)自動(dòng)緩沖，并在重新連接時(shí)發(fā)送

（4）廣播/單播

? socket.io提供了可以方便的對(duì)消息進(jìn)行廣播和單播的api

（5）多路復(fù)用

? 可以通過(guò)單條共享連接拆分應(yīng)用程序的邏輯，實(shí)際應(yīng)用上可以理解為聊天室里的房間

3.實(shí)例

（1）安裝

npm install socket.io

（2）初始化

服務(wù)器端：

const { Server } = require("socket.io");
const io = new Server(3000, { /* options */ });
io.on("connection", (socket) => {
  // ...
});

客戶(hù)端：

<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ā)消息
  }
});

客戶(hù)端：

<script>
  const socket = io();
  socket.emit("send_msg","你好");
  socket.on("send_msg",(msg)=> {
      console.log(msg);
  })
</script>

? 通過(guò)上述代碼就可以實(shí)現(xiàn)一個(gè)基本聊天室的雛形了，總體操作實(shí)現(xiàn)起來(lái)非常簡(jiǎn)單。

到此這篇關(guān)于Vue socket.io模塊實(shí)現(xiàn)聊天室流程詳解的文章就介紹到這了,更多相關(guān)Vue socket.io實(shí)現(xiàn)聊天室內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: