快捷導(dǎo)航

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對象輕松實(shí)現(xiàn)組件化的事件監(jiān)聽，在vue項(xiàng)目中使用起來更方便

1.定義

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

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

2.特點(diǎn)

（1）HTTP長輪詢回退

? 若無法建立Websocket連接，將自動回退為HTTP長輪詢

（2）自動重新連接

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

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

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

（4）廣播/單播

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

（5）多路復(fù)用

? 可以通過單條共享連接拆分應(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) => {
  // ...
});

客戶端：

<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>

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

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

您可能感興趣的文章: