智慧機器人 -- Socket.IO應用小結

黑馬大前端發表於2018-08-05
機器人

近期在繁忙的業務開發中擠了擠時間，思考是否可以通過“前端”的能力來提升B端產品的效率.

我打算以對話（訊息）系統作為切入點，提升B端體系使用者的內部溝通效率，提高重要公告或軟體升級通知的觸達率，讓軟體使用問題及使用者體驗反饋形成閉環，讓產品和開發者聽到B端使用者的聲音。

如今的現狀是各種溝通群分散，一會兒拉個微信群一會兒拉個釘釘群，而B端的APP則是觸及B端所有使用者的APP，我們為什麼不直接通過它來提升效率呢？另一方面，公司的資料資訊也更為可控。

嗯，說做就做，我自己對聊天系統也是比較感興趣的，大半年前在原來的部門時因業務需要自己搞了個小Demo，現在被繁重的業務開發埋沒了?，爭取早日能轉成一名Node開發者，Leader看到我這篇文章是否考慮讓我轉個行?。

目前專案在開發中，在後續的文章分享中會給大家一篇詳盡的設計思路，先給大家留個懸念：

  • 服務端技術棧：Nest.js + TypeScript + TypeOrm；
  • B端：React Native；
  • 通知公告管理當然少不了Web端，暫定了不起的React。

本篇文章還是來簡單介紹下Socket.IO的基本API吧。

原來的文章筆記?記錄於：es8.es/post/Socket…

實戰作品 智慧機器人 小Demo：es7.es

chatbot.jpg

網友們搞笑的提問記錄可以從這裡檢視：es7.es/websocket/l…。

Demo很粗糙，大家輕噴。

服務端

  • 監聽客戶端連線，回撥函式會傳遞本次連線的socket物件
io.on('connection', function(socket){});
複製程式碼
  • 給所有客戶端廣播訊息
io.sockets.emit('key', data);
複製程式碼
  • 給指定的客戶端傳送訊息
io.sockets.socket(socketid).emit('key', data);
複製程式碼
  • 監聽客戶端傳送的訊息
socket.on('key', function(data) {});
複製程式碼

給該socket的客戶端傳送訊息

socket.emit('key', data);
複製程式碼

廣播訊息

給除了自己以外的客戶端廣播訊息

socket.broadcast.emit('key', {data: 'everyone'});
複製程式碼

給所有客戶端廣播訊息 io.sockets.emit('key', {data: 'all'});

分組

socket.on('group1', function (data) {
    socket.join('group1');
});
socket.on('group2', function (data) {
    socket.join('group2');
});
複製程式碼
客戶端傳送

加入group1分組

socket.emit('group1');
複製程式碼

加入group2分組

socket.emit('group2');
複製程式碼

一個客戶端可以存在多個分組（訂閱模式）

踢出分組

socket.leave(data.room);

對分組中的使用者傳送訊息

不包括自己

socket.broadcast.to('group1').emit('key', data);
複製程式碼

包括自己

io.sockets.in('group1').emit('key', data);
複製程式碼

獲取連線的客戶端socket

io.sockets.clients().forEach(function (socket) {
    console.log(socket);
});
複製程式碼

獲取分組資訊

獲取所有房間（分組）資訊

io.sockets.manager.rooms
複製程式碼

獲取此socketid進入的房間資訊

io.sockets.manager.roomClients[socket.id]
複製程式碼

獲取particular room中的客戶端，返回所有在此房間的socket例項

io.sockets.clients('particular room');
複製程式碼

另一種分組方式

服務端

io.of('/some').on('connection', function (socket) {
    socket.on('test', function (data) {
        socket.broadcasst.emit('event_name', {});
    });
});
複製程式碼

客戶端

var socket = io.connect('ws://localhost:1234/some');
socket.on('event_name', function (data) {
    console.log(data);
});
複製程式碼

客戶端都連結到ws:///localhost:1234 但是服務端可以通過io.of('/some')將其過濾出來。

另外，Socket.IO提供了4個配置的API：io.configure, io.set, io.enable, io.disable。其中io.set對單項進行設定，io.enable和io.disable用於單項設定布林型的配置。io.configure可以讓你對不同的生產環境（如devlopment，test等等）配置不同的引數。

客戶端

建立一個socket連線

var socket = io("ws://localhost:1234");
複製程式碼

監聽服務訊息

socket.on('msg', function (data) {
    // 向伺服器傳送訊息
    socket.emit('msg', {});
});
複製程式碼

監聽socket斷開與重連

socket.on('disconnect', function() {
    console.log("與服務其斷開");
});

socket.on('reconnect', function() {
    console.log("重新連線到伺服器");
});
複製程式碼

客戶端socket.on()監聽的事件：

connect：連線成功
connecting：正在連線
disconnect：斷開連線
connect_failed：連線失敗
error：錯誤發生，並且無法被其他事件型別所處理
message：同伺服器端message事件
anything：同伺服器端anything事件
reconnect_failed：重連失敗
reconnect：成功重連
reconnecting：正在重連
複製程式碼
  • 當第一次連線時，事件觸發順序為：connecting->connect；
  • 當失去連線時，事件觸發順序為：disconnect->reconnecting（可能進行多次）->connecting->reconnect->connect。
相關問題：

與ThinkJS結合遇到的問題： github.com/thinkjs/thi…

本文作者：黑馬大前端 cuitianze

相關文章