01 Socket.io 簡(jiǎn)介
- 一個(gè)100%由 JavaScript 實(shí)現(xiàn)颗品、基于Node.js的用于實(shí)時(shí)通信躯枢、跨平臺(tái)的開源框架锄蹂，它包括了客戶端的 JavaScript 庫和 服務(wù)器端的 Node.js 服務(wù)败匹。
- 實(shí)現(xiàn)了對(duì)于其他語言的支持掀亩，如 Java槽棍、C++炼七、Swift豌拙。
- 提供了一個(gè)與 WebSocket 類似的通用 API：
【主要特點(diǎn)】：
（1） 可靠性（Reliability）：依賴 Engine.IO, 首先建立長(zhǎng)輪詢按傅，然后試著升級(jí)到更好的傳輸方式唯绍，如 WebSocket况芒。
（2）自動(dòng)重連（Auto-reconnection support）：除非手動(dòng)設(shè)置绝骚，否則當(dāng)客戶端斷開連接時(shí)會(huì)一直嘗試重連皮壁。
（3）心跳檢測(cè)（Disconnection detection）：在 Engine.IO 層面實(shí)現(xiàn)的心跳檢測(cè)機(jī)制蛾魄，允許服務(wù)器和客戶端知道哪一方不再響應(yīng)滴须。
Engine.IO：為 Socket.IO 實(shí)現(xiàn)的基于傳輸、跨瀏覽器/跨設(shè)備的雙向通信層痛侍。
（4）其它特點(diǎn)（如下圖）：
02 工作流程
Socket.IO 底層是 Engine.IO主届，這個(gè)庫實(shí)現(xiàn)了跨平臺(tái)的雙向通信君丁，使用下面的傳輸方式封裝了一套自己的 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長(zhǎng)輪詢华嘹，然后服務(wù)端會(huì)返回以下字段：
- 0：open標(biāo)志
-
sid：當(dāng)前連接的socket id -
upgrade：表示可以把連接方式從長(zhǎng)輪詢升級(jí)到 websocket -
pingInterval：心跳間隔 -
pingTimeout：心跳超時(shí)時(shí)間
前端收到握手的 upgrades 后除呵，EIO 會(huì)檢測(cè)瀏覽器是否支持 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 長(zhǎng)輪詢停掉慎璧，后面只使用 WebSocket 通道進(jìn)行收發(fā)數(shù)據(jù)胸私。（socket.io 的詳細(xì)工作流程是怎樣的鳖谈？）
心跳檢測(cè)：
EIO Socket生命周期內(nèi)缆娃，會(huì)間隔一段時(shí)間 ping - pong 一次贯要，用來測(cè)試網(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)情況是以長(zhǎng)輪詢開始，我們也可以手動(dòng)設(shè)置成只使用 websocket 方式來進(jìn)行通信酱畅。
// 設(shè)置成只使用 websocket
const socket = io({
transports: ['websocket']
});
// 重連時(shí)圣贸，重設(shè)選項(xiàng)
// 防止 websocket 可能因?yàn)榇碛蹙⒎阑饓τ煤g覽器等原因連接失敗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ù)，一般省略瘟斜，如需對(duì)方接受到信息后立即得到確認(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ù)虽惭，接收對(duì)方發(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)與對(duì)方建立連接后自動(dòng)觸發(fā)咆课； -
message：當(dāng)收到對(duì)方發(fā)來的數(shù)據(jù)后觸發(fā)傀蚌； -
disconnect：當(dāng)對(duì)方關(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)該作用，具體請(qǐng)參考 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è)對(duì)象，包含當(dāng)前進(jìn)入房間的 sockets 以及長(zhǎng)度彻消。
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è)給客戶端。 -
提示對(duì)方正在輸入
【實(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ā)送的文章桃熄，敬請(qǐng)期待喲~~?(?>?<?)? ~~
