這段時間學習了 socket.io ,用它寫了小項目,在此總結下它的基本使用方式和一些要點。 socket.io 是基於 Node.js 和 WebSocket 協議的實時通信開源框架,它包括客戶端的JavaScript和伺服器端的Node.js。 服務端 這裡後端使用的框架是 koa2 , soc ...
這段時間學習了socket.io,用它寫了小項目,在此總結下它的基本使用方式和一些要點。
socket.io是基於Node.js和WebSocket協議的實時通信開源框架,它包括客戶端的JavaScript和伺服器端的Node.js。
服務端
這裡後端使用的框架是koa2,socket.io將自身綁定到koa的進程中去,其中最重要的事件就是 connection 和 disconnect。它們是框架本身定義的系統事件,也就意味著它是自然就存在的不需要我們自定義,當然還有其它系統事件,但很少會用得到。
const koa = require('koa')
const app = new koa()
const server = require('http').createServer(app.callback())
const io = require('socket.io')(server)
//監聽connect事件
io.on('connection', socket => {
socket.emit('open');//通知客戶端已連接
console.log('connected');
//監聽disconnect事件
socket.on('disconnect', () => {
console.log('disconnect')
}
});
server.listen(3001);
客戶端
web端直接傳入url地址即可,其中這裡監聽的 open 事件是用戶自定義的,對應服務端的則是發送open事件。
import io from 'socket.io-client';
//建立websocket連接
const socket = io('http://127.0.0.1:3001');
//收到server的連接確認
socket.on('open', () => {
showTip('socket io is open !');
init();
});
emit 和 on
emit 和 on 是最重要的兩個api,分別對應 發送 和 監聽 事件。
- socket.emit(eventName[, ...args]):發射(觸發)一個事件
- socket.on(eventName, callback):監聽一個 emit 發射的事件
我們可以非常自由的在服務端定義併發送一個事件emit,然後在客戶端監聽 on,反過來也一樣。
發送的內容格式也非常自由,既可以是基本數據類型 Number,String,Boolean 等,也可以是 Object,Array 類型,甚至還可以是函數。而用回調函數的方式則可以進行更便攜的交互。
/*** 服務端 **/
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);
});
//回調函數
/*** 服務端 **/
socket.on('sayit', (word, callback)=> {
callback('say ' + word);
});
/*** 客戶端 **/
socket.emit('sayit', 'wow', data => {
console.log(data); // say wow
});
broadcast 廣播
broadcast 預設是向所有的socket連接進行廣播,但是不包括發送者自身,如果自己也打算接收消息的話,需要給自己單獨發送。
/*** 服務端 **/
io.on('connection', socket => {
const data= {
txt:'new user login',
time:new Date()
}
//廣播向所有socket連接
socket.broadcast.emit('userin',data);
//給自己也發一份
socket.emit('userin',data);
});
namespace 命名空間
如果你想隔離作用域,或者劃分業務模塊,namespace 是個有效的法子。namespace 相當於建立新的頻道,你可以在一個 socket.io 服務上面隔離不同的連接,事件和中間件。
預設的連接也是有namespace的,那就是 /;
使用命名空間的方式一:直接在鏈接後面加子功能變數名稱,這種其實用的還是同一個 sokcet 服務進程,可以看成是軟隔離吧。
/*** 客戶端 **/
import io from 'socket.io-client';
//預設的namespace
const socket = io('http://127.0.0.1:3001');
// mypath
const socket = io('http://127.0.0.1:3001/mypath', { forceNew: true });
/*** 服務端 **/
//預設的namespace
io.on('connection', socket => {
});
// mypath
io.of('/mypath').on('connection', socket => {
});
使用命名空間的方式二: path 參數,這種就是實打實的重新起了一個 socket 服務了。
/*** 客戶端 **/
const socket = io('http://localhost', {
path: '/mypath'
});
/*** 服務端 **/
// 另外重新起socket服務
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 這個 namespace 註冊中間件
mypath.use(auth);
rooms
每一個socket連接都會有一個獨一無二的標誌,那就是 socket.id,我們就是通過id來區分不同連接的。除此之外,socket.id 本身也是房間 room 的標誌,通俗講,每個socket 連接自身都擁有一間房 room。那麼我們就可以給這個 room 發送消息,還有如果你加入了房間,就能接受到房間里的廣播信息。當然你可以自定義 room ,讓socket連接加入或離開。還有如果 socket 斷開連接,也就是 disconnect 後,它會被自動移出room。
而這就是實現 單獨聊天 和 群組聊天 的基礎,來看一下對應的api。
- socket.join(rooms[, callback]):加入房間
- socket.leave(room[, callback]) :離開房間
- socket.to(room): 給房間發送消息
// 自定義room
io.on('connection', socket =>{
socket.join('some room')); // 加入房間
socket.leave('some room'); // 離開房間
});
// 向房間里的所有客戶端發送消息
io.to('some room').emit('some event');
// 預設房間(每一個id一個room)
socket.on('say to someone', (id, msg) => {
socket.broadcast.to(id).emit('my message', msg);
});
總結
相信有了以上介紹的基礎知識,再加上官網對應的文檔,要開發聊天室或者其他 實時通信 的項目,是一件易如反掌的事情
socket.io官網 裡面有對 api 非常詳細的講解和用例。