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：
【主要特點(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)（如下圖）：
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 連接：
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ò)是否正常
綠色：發(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'];
});
03 核心方法
Socket.io 的核心函數(shù)：emit 和 on
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ù)端廣播的三種情況】：
客戶端：
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
默認(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)聽
typing和stop 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
ps：下一次我會(huì)出一篇聊天室實(shí)現(xiàn) emoji 表情發(fā)送的文章，敬請期待喲~~?(?>?<?)? ~~
