關於socket.io的使用

時間 2019-11-08

原文原文鏈接

這段時間學習了socket.io，用它寫了小項目，在此總結下它的基本使用方式和一些要點。 socket.io是基於Node.js和WebSocket協議的實時通訊開源框架，它包括客戶端的JavaScript和服務器端的Node.js。java

服務端

這裏後端使用的框架是koa2，socket.io將自身綁定到koa的進程中去，其中最重要的事件就是 connection 和 disconnect。它們是框架自己定義的系統事件，也就意味着它是天然就存在的不須要咱們自定義，固然還有其它系統事件，但不多會用獲得。git

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事件。github

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，分別對應發送和監聽事件。web

socket.emit(eventName[, ...args])：發射（觸發）一個事件
socket.on(eventName, callback)：監聽一個 emit 發射的事件

咱們能夠很是自由的在服務端定義併發送一個事件emit，而後在客戶端監聽 on，反過來也同樣。後端

發送的內容格式也很是自由，既能夠是基本數據類型 Number，String，Boolean 等，也能夠是 Object，Array 類型，甚至還能夠是函數。而用回調函數的方式則能夠進行更便攜的交互。api

/*** 服務端 **/
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 服務上面隔離不一樣的鏈接，事件和中間件。websocket

默認的鏈接也是有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); 
}); 
複製代碼