原文地址：關(guān)于socket.io的使用
這段時(shí)間學(xué)習(xí)了socket.io，用它寫了小項(xiàng)目舀奶，在此總結(jié)下它的基本使用方式和一些要點(diǎn)。
socket.io是基于Node.js和WebSocket協(xié)議的實(shí)時(shí)通信開源框架碌宴，它包括客戶端的JavaScript和服務(wù)器端的Node.js页慷。
服務(wù)端
這里后端使用的框架是koa2，socket.io將自身綁定到koa的進(jìn)程中去执庐，其中最重要的事件就是 connection 和 disconnect酪耕。它們是框架本身定義的系統(tǒng)事件，也就意味著它是自然就存在的不需要我們自定義轨淌，當(dāng)然還有其它系統(tǒng)事件迂烁，但很少會用得到看尼。
const koa = require('koa')
const app = new koa()
const server = require('http').createServer(app.callback())
const io = require('socket.io')(server)
//監(jiān)聽connect事件
io.on('connection', socket => {
socket.emit('open');//通知客戶端已連接
console.log('connected');
//監(jiān)聽disconnect事件
socket.on('disconnect', () => {
console.log('disconnect')
}
});
server.listen(3001);
客戶端
web端直接傳入url地址即可，其中這里監(jiān)聽的 open 事件是用戶自定義的盟步，對應(yīng)服務(wù)端的則是發(fā)送open事件藏斩。
import io from 'socket.io-client';
//建立websocket連接
const socket = io('http://127.0.0.1:3001');
//收到server的連接確認(rèn)
socket.on('open', () => {
showTip('socket io is open !');
init();
});
emit 和 on
emit 和 on 是最重要的兩個(gè)api，分別對應(yīng) 發(fā)送 和 監(jiān)聽 事件却盘。
- socket.emit(eventName[, ...args])：發(fā)射（觸發(fā)）一個(gè)事件
- socket.on(eventName, callback)：監(jiān)聽一個(gè) emit 發(fā)射的事件
我們可以非常自由的在服務(wù)端定義并發(fā)送一個(gè)事件emit狰域，然后在客戶端監(jiān)聽 on，反過來也一樣黄橘。
發(fā)送的內(nèi)容格式也非常自由兆览，既可以是基本數(shù)據(jù)類型 Number，String塞关，Boolean 等拓颓，也可以是 Object，Array 類型描孟，甚至還可以是函數(shù)驶睦。而用回調(diào)函數(shù)的方式則可以進(jìn)行更便攜的交互。
/*** 服務(wù)端 **/
socket.on('message',data =>{
console.log(data)
});
socket.emit('send','hello everybody');
/*** 客戶端 **/
socket.emit('message',{id:'1',txt:'hello'});
socket.on('send',data =>{
console.log(data);
});
//回調(diào)函數(shù)
/*** 服務(wù)端 **/
socket.on('sayit', (word, callback)=> {
callback('say ' + word);
});
/*** 客戶端 **/
socket.emit('sayit', 'wow', data => {
console.log(data); // say wow
});
broadcast 廣播
broadcast 默認(rèn)是向所有的socket連接進(jìn)行廣播匿醒，但是不包括發(fā)送者自身场航，如果自己也打算接收消息的話，需要給自己單獨(dú)發(fā)送廉羔。
/*** 服務(wù)端 **/
io.on('connection', socket => {
const data= {
txt:'new user login',
time:new Date()
}
//廣播向所有socket連接
socket.broadcast.emit('userin',data);
//給自己也發(fā)一份
socket.emit('userin',data);
});
namespace 命名空間
如果你想隔離作用域溉痢，或者劃分業(yè)務(wù)模塊，namespace 是個(gè)有效的法子憋他。namespace 相當(dāng)于建立新的頻道孩饼，你可以在一個(gè) socket.io 服務(wù)上面隔離不同的連接，事件和中間件竹挡。
默認(rèn)的連接也是有namespace的镀娶，那就是 /；
使用命名空間的方式一：直接在鏈接后面加子域名揪罕，這種其實(shí)用的還是同一個(gè) sokcet 服務(wù)進(jìn)程梯码，可以看成是軟隔離吧。
/*** 客戶端 **/
import io from 'socket.io-client';
//默認(rèn)的namespace
const socket = io('http://127.0.0.1:3001');
// mypath
const socket = io('http://127.0.0.1:3001/mypath', { forceNew: true });
/*** 服務(wù)端 **/
//默認(rèn)的namespace
io.on('connection', socket => {
});
// mypath
io.of('/mypath').on('connection', socket => {
});
使用命名空間的方式二： path 參數(shù)好啰，這種就是實(shí)打?qū)嵉闹匦缕鹆艘粋€(gè) socket 服務(wù)了轩娶。
/*** 客戶端 **/
const socket = io('http://localhost', {
path: '/mypath'
});
/*** 服務(wù)端 **/
// 另外重新起socket服務(wù)
const io = require('socket.io')({
path: '/mypath'
});
middleware 中間件
socket.io 的中間件 和 kao2 的非常相似，這意味著我們可以在變動很小的情況下框往，將koa2的中間件改造為 socket.io 所用鳄抒。
const mypath = io.of('/mypath').on('connection', socket => {
socket.on('message', data => {
});
});
//中間件
const auth = (socket, next) => {
const data = socket.request;
if(!verify(data)){
throw new Error('not verify');
}
next();
}
// mypath 這個(gè) namespace 注冊中間件
mypath.use(auth);
rooms
每一個(gè)socket連接都會有一個(gè)獨(dú)一無二的標(biāo)志，那就是 socket.id，我們就是通過id來區(qū)分不同連接的许溅。除此之外瓤鼻，socket.id 本身也是房間 room 的標(biāo)志，通俗講闹司，每個(gè)socket 連接自身都擁有一間房 room。那么我們就可以給這個(gè) room 發(fā)送消息沐飘，還有如果你加入了房間游桩，就能接受到房間里的廣播信息。當(dāng)然你可以自定義 room 耐朴，讓socket連接加入或離開借卧。還有如果 socket 斷開連接，也就是 disconnect 后筛峭，它會被自動移出room铐刘。
而這就是實(shí)現(xiàn) 單獨(dú)聊天 和 群組聊天 的基礎(chǔ)，來看一下對應(yīng)的api影晓。
- socket.join(rooms[, callback])：加入房間
- socket.leave(room[, callback]) ：離開房間
- socket.to(room)： 給房間發(fā)送消息
// 自定義room
io.on('connection', 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', (id, msg) => {
socket.broadcast.to(id).emit('my message', msg);
});
總結(jié)
相信有了以上介紹的基礎(chǔ)知識镰吵，再加上官網(wǎng)對應(yīng)的文檔，要開發(fā)聊天室或者其他 實(shí)時(shí)通信 的項(xiàng)目挂签，是一件易如反掌的事情
socket.io官網(wǎng) 里面有對 api 非常詳細(xì)的講解和用例疤祭。
