Socket.IO打造基礎(chǔ)聊天室

Socket.IO

01 Socket.io 簡介

  • 一個(gè)100%由 JavaScript 實(shí)現(xiàn)、基于Node.js的用于實(shí)時(shí)通信、跨平臺的開源框架,它包括了客戶端的 JavaScript 庫和 服務(wù)器端的 Node.js 服務(wù)。
  • 實(shí)現(xiàn)了對于其他語言的支持,如 Java、C++、Swift。
  • 提供了一個(gè)與 WebSocket 類似的通用 API:
Socket.io方法與事件

主要特點(diǎn)】:

(1) 可靠性(Reliability):依賴 Engine.IO, 首先建立長輪詢,然后試著升級到更好的傳輸方式,如 WebSocket。
(2)自動(dòng)重連(Auto-reconnection support):除非手動(dòng)設(shè)置,否則當(dāng)客戶端斷開連接時(shí)會(huì)一直嘗試重連。
(3)心跳檢測(Disconnection detection):在 Engine.IO 層面實(shí)現(xiàn)的心跳檢測機(jī)制,允許服務(wù)器和客戶端知道哪一方不再響應(yīng)。

Engine.IO:為 Socket.IO 實(shí)現(xiàn)的基于傳輸、跨瀏覽器/跨設(shè)備的雙向通信層。

(4)其它特點(diǎn)(如下圖):

socket.io其它特點(diǎn)

02 工作流程

Socket.IO 底層是 Engine.IO,這個(gè)庫實(shí)現(xiàn)了跨平臺的雙向通信,使用下面的傳輸方式封裝了一套自己的 Socket 協(xié)議(EIO Socket)。

  • polling: XHR / JSONP polling transport
  • websocket: WebSocket transport

默認(rèn)情況下,一個(gè)完整的 EIO Socket 包括多個(gè) XHR 和 WebSocket 連接:

一個(gè)完整的EIO Socket連接(默認(rèn)情況)
請求流程

EIO Socket 會(huì)首先發(fā)起XHR長輪詢,然后服務(wù)端會(huì)返回以下字段:

  • 0:open標(biāo)志
  • sid:當(dāng)前連接的socket id
  • upgrade:表示可以把連接方式從長輪詢升級到 websocket
  • pingInterval:心跳間隔
  • pingTimeout:心跳超時(shí)時(shí)間

前端收到握手的 upgrades 后,EIO 會(huì)檢測瀏覽器是否支持 WebSocket,如果支持,就會(huì)啟動(dòng)一個(gè) WebSocket 連接,然后通過這個(gè) WebSocket 往服務(wù)器發(fā)一條內(nèi)容為 probe, 類型為 ping 的數(shù)據(jù)。如果這時(shí)服務(wù)器返回了內(nèi)容為 probe, 類型為 pong 的數(shù)據(jù),前端就會(huì)把前面建立的 HTTP 長輪詢停掉,后面只使用 WebSocket 通道進(jìn)行收發(fā)數(shù)據(jù)。(socket.io 的詳細(xì)工作流程是怎樣的?

心跳檢測:
EIO Socket生命周期內(nèi),會(huì)間隔一段時(shí)間 ping - pong 一次,用來測試網(wǎng)絡(luò)是否正常

WebSocket消息幀

綠色:發(fā)送;白色:接收。
類型—> 2:ping,3:pong,4:message。

Socket.IO 在 Engine.IO 的基礎(chǔ)上做了一些封裝,比如 Socket.IO 里面這樣的代碼:

io.emit('add user', 'm') ;

在 Engine.io 里面是這樣:

eio.send('message', '2["add user","m"]') ; // 2 是 socket.io 定義的包類型

因此,message的類型4后面有個(gè)2。

傳輸機(jī)制設(shè)置】:

Socket.io 為我們提供了選項(xiàng),它的默認(rèn)情況是以長輪詢開始,我們也可以手動(dòng)設(shè)置成只使用 websocket 方式來進(jìn)行通信。

// 設(shè)置成只使用 websocket
const socket = io({ 
       transports: ['websocket'] 
}); 

// 重連時(shí),重設(shè)選項(xiàng)
// 防止 websocket 可能因?yàn)榇怼⒎阑饓?、瀏覽器等原因連接失敗socket.on('reconnect_attempt', () => { 
       socket.io.opts.transports = ['polling', 'websocket']; 
}); 
只使用websocket

03 核心方法

Socket.io提供的方法

Socket.io 的核心函數(shù):emiton

socket.emit(eventName[, ...args][, ack]):用來發(fā)射(觸發(fā))一個(gè)事件

  • eventName(string):事件名
  • args:要發(fā)送的數(shù)據(jù)
  • ack(Function):回調(diào)函數(shù),一般省略,如需對方接受到信息后立即得到確認(rèn)時(shí)需要用到
  • Returns Socket
socket.emit('ferret', 'tobi', (data) => {
  console.log(data); // data will be 'woot'
});

// server:
//  io.on('connection', (socket) => {
//    socket.on('ferret', (name, fn) => {
//      fn('woot');
//    });
//  });

socket.on(eventName, callback):用來監(jiān)聽一個(gè) emit 發(fā)射的事件

  • eventName(string):監(jiān)聽的事件名
  • callback(Function):匿名函數(shù),接收對方發(fā)來的數(shù)據(jù),該匿名函數(shù)的第一個(gè)參數(shù)為接收的數(shù)據(jù),若有第二個(gè)參數(shù),則為要返回的函數(shù)
  • Returns Socket
socket.on('news', (data) => {
  console.log(data);
});

// with multiple arguments
socket.on('news', (arg1, arg2, arg3, arg4) => {
  // ...
});
// with callback
socket.on('news', (cb) => {
  cb(0);
});

Socket.io 提供了三種默認(rèn)的事件(客戶端和服務(wù)器都有):

  • connect:當(dāng)與對方建立連接后自動(dòng)觸發(fā);
  • message:當(dāng)收到對方發(fā)來的數(shù)據(jù)后觸發(fā);
  • disconnect:當(dāng)對方關(guān)閉鏈接后觸發(fā)。

除了 socket.io 自身提供的事件之外,還支持自定義事件,豐富了通信:

// 如:
socket.on(‘new message’, function(data) {});
socket.emit(‘new message’, { message: message });

服務(wù)端廣播的三種情況】:

服務(wù)器廣播

客戶端:

const socket = io();
// 監(jiān)聽事件
socket.on(‘message’, (data) => {});
// 觸發(fā)事件
socket.emit(‘message’, { message }); 

服務(wù)端:

io.on(‘connection’, function(socket) {
        socket.on(‘message’, function(data) {
              // 1.廣播給自己
              socket.emit(‘message’, data);
              // 2. 廣播給除了自己的其它客戶端
              socket.broadcast.emit(‘message’, data);
              // 3. 廣播給所有客戶端
              io.emit(‘message’, data);  // 等同于 io.sockets.emit()
        });
});

04 Rooms 和命名空間

【作用】:減少TCP連接數(shù)的同時(shí)區(qū)分不同的通信頻道(在不同的路由層面能體現(xiàn)該作用,具體請參考 socket.io 中namespace 和 room的概念)、實(shí)現(xiàn)私聊

默認(rèn)的命名空間:io.sockets、io

io.on('connection', function(socket){    
      socket.on('disconnect', function(){ });
}); 

自定義命名空間:

// 服務(wù)器端
var nsp = io.of('/my-namespace'); 
nsp.on('connection', function(socket){    
      socket.on('disconnect', function(){ });
}); 

// 客戶端
var socket = io('/my-namespace'); 

Rooms:

// 自定義room
io.on('connection', function(socket){    
      socket.join('some room')); // 加入房間
      socket.leave('some room'); // 離開房間
}); 

// 向房間里的所有客戶端發(fā)送消息
io.to('some room').emit('some event'); 

// 默認(rèn)房間(每一個(gè)id一個(gè)room)
socket.on('say to someone', function(id, msg){    
       socket.broadcast.to(id).emit('my message', msg); 
}); 

獲取房間信息:socket.adapter.rooms

rooms對象

默認(rèn)情況下,每一個(gè) id 便自成一個(gè)房間,房間名為 socket.id(指定命名空間之后,前面會(huì)帶上命名空間);
自定義房間之后,原先的默認(rèn)房間仍然存在;
房間為一個(gè)對象,包含當(dāng)前進(jìn)入房間的 sockets 以及長度。

05 打造基礎(chǔ)聊天室

從官網(wǎng)最基礎(chǔ)的聊天小例子入門,又分析了一下 Demos 中的 Chat demo 源碼之后,自己試著用 react 實(shí)現(xiàn)了一遍,具體的功能及原理如下:

  • 最基礎(chǔ)聊天功能

    【實(shí)現(xiàn)原理】:服務(wù)端運(yùn)用 io.emit 進(jìn)行廣播給每個(gè)建立連接的客戶端。

  • 登錄(Chat Demo)

    【核心操作】:用戶登錄時(shí)(login 事件),服務(wù)端為當(dāng)前的客戶端存儲(chǔ) username。

    socket.username = username
    
  • 顯示用戶進(jìn)入/離開

    【實(shí)現(xiàn)原理】:用戶登錄(login)時(shí),觸發(fā) user joind 事件;用戶斷開連接(disconnection)時(shí),觸發(fā) user left 事件—> 均通過 socket.broadcase.emit 廣播給其它客戶端。

  • 顯示當(dāng)前聊天室人數(shù)

    【實(shí)現(xiàn)原理】:操作 numUsers 變量—> 監(jiān)聽 connection 事件:++numUsers;監(jiān)聽 disconnection 事件:--numUsers 。

  • 顯示各自昵稱

    【實(shí)現(xiàn)原理】:觸發(fā) chat 事件的時(shí)候?qū)?dāng)前連接的 username 通過 io.emit 廣播給每個(gè)給客戶端。

  • 提示對方正在輸入

    【實(shí)現(xiàn)原理】:監(jiān)聽 typingstop typing 事件 —> 均通過 socket.broadcast.emit 廣播給其它客戶端。(typing 通過監(jiān)聽輸入框的 onKeyPress 事件進(jìn)行觸發(fā))

    注意:當(dāng)發(fā)送完信息之后,需要清空“***正在輸入”,客戶端在監(jiān)聽到 chat 時(shí)可將提示置空。

  • 實(shí)現(xiàn)私人聊天

私人聊天

【實(shí)現(xiàn)原理】:運(yùn)用 Room,通過 socket.adapter.rooms 獲取當(dāng)前 room 的信息,包括每個(gè) room 中的 id。

// 加入房間
socket.join('some room'); 
// 離開房間
socket.leave('some room'); 

// 向房間里的所有客戶端發(fā)送消息
io.to('some room').emit('some event'); 

// 向房間中的除了自己的客戶端發(fā)送消息
socket.broadcast.to ('some room')
    .emit('my message', msg);
自娛自樂的實(shí)現(xiàn)版本:

github地址:ioChat

添加昵稱+xxx正在輸入
監(jiān)聽用戶進(jìn)入或離開/顯示在線人數(shù)
Rooms 實(shí)現(xiàn)私人聊天

ps:下一次我會(huì)出一篇聊天室實(shí)現(xiàn) emoji 表情發(fā)送的文章,敬請期待喲~~?(?>?<?)? ~~

§ 參考資料

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲(chǔ)服務(wù)。