關於socket.io的使用

来源:https://www.cnblogs.com/edwardloveyou/archive/2019/03/30/10625152.html
-Advertisement-
Play Games

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


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

服務端

這裡後端使用的框架是koa2socket.io將自身綁定到koa的進程中去,其中最重要的事件就是 connectiondisconnect。它們是框架本身定義的系統事件,也就意味著它是自然就存在的不需要我們自定義,當然還有其它系統事件,但很少會用得到。

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

emiton 是最重要的兩個api,分別對應 發送監聽 事件。

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

我們可以非常自由的在服務端定義併發送一個事件emit,然後在客戶端監聽 on,反過來也一樣。

發送的內容格式也非常自由,既可以是基本數據類型 NumberStringBoolean 等,也可以是 ObjectArray 類型,甚至還可以是函數。而用回調函數的方式則可以進行更便攜的交互。

/*** 服務端 **/
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 非常詳細的講解和用例。


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 前言:我跟網上大家的原因基本一樣,就是好久沒用sqlserver了,中間也對VS進行過卸載升級等,突然有一天發現,打開Sqlserver時打不開了,出了一個彈框:Cannot find one or more components... 百度吧,找到一個嘗試後可行的文章,該解決方案只需要卸載一個程式 ...
  • char char是定長的,也就是當你輸入的字元小於你指定的數目時,char(8),你輸入的字元小於8時,它會再後面補空值。當你輸入的字元大於指定的數時,它會截取超出的字元。 nvarchar(n) 包含 n 個字元的可變長度 Unicode 字元數據。n 的值必須介於 1 與 4,000 之間。字 ...
  • [20190328]簡單探究sql語句相關mutexes.txt--//摘要:http://www.askmaclean.com/archives/understanding-oracle-mutex.html雖然Mutex中文翻譯為互斥鎖,但為了和OS mutex充分的區別,所以我們在本文里稱Or ...
  • 1.當客戶端輸入一條指令:hdfs dfs -put text.txt /text時,這條命令會給到DistributeFileSystem。 2.通過DistributeFileSystem簡稱DFS會創建DFSClient。 3.DFSClient會與hdfs伺服器建立RPC通訊,此時客戶端就可 ...
  • 前言- Andorid SDK下載 baidu雲 提取碼:19jm 這次我們就來研究一下官方的例子之一的liveWallPaper,也就是開發Android的動態壁紙 先來看看這個例子運行的結果: 還是蠻可愛的嘛,那麼開始吧! 項目的目錄- framework中是live2d要用的必須的類 libs ...
  • 網上找了一個腳本,在其中進行了修改,只需要一條命令就可以了 支持自動導入配置文件 支持自動安裝p12證書 支持自動修改版本號和build版本號 支持自動修改app顯示名稱 支持自動修改bundle identifier 支持自動生成ipa文件到指定目錄 圖標和閃圖更換隻是一個簡單的拷貝工作,目前的腳 ...
  • Android 開發高手課 課後練習(1) 一、Chapter01 崩潰 https://time.geekbang.org/column/article/70602 https://github.com/AndroidAdvanceWithGeektime/Chapter01 1、遇到native ...
  • 程式36:有n個人圍成一圈,順序排號。從第一個人開始報數(從1到3報數),凡報到3的人推出圈子,問最後留下的是原來第幾號的那位 var n=20; var arr=[]; for(var i=0;i<n;i++){ arr.push(1); } for(var j=1,least=n;;j++){ ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...