簡單的nodejs+socket.io給指定的人傳送訊息
阿新 • • 發佈:2019-01-26
最近學習了一下socket.io,不太會用,所以做了一個小demo理一下思路。
主要目的是實現向某個指定的使用者傳送訊息,也就是服務端單獨推送資訊給某個人。具體的思路就是每個線上的使用者都對應一個socket物件,可以通過socket.id獲取其唯一的id。通過該物件(toSocket)與連結到這個物件的客戶端進行單獨通訊。
socket.io服務端程式碼
var app = require('http').createServer(handler); var io = require('socket.io')(app); var fs = require('fs'); var _ = require('underscore'); // 監聽埠 app.listen(3000); var hashName = new Array(); function handler(req, res) { fs.readFile(__dirname + '/index.html', function (err, data) { res.writeHead(200); res.end(data); }); } // 通過 emit 和 on 可以實現伺服器與客戶端之間的雙向通訊 // io.sockets.on('connection', function (socket) { ... }) 的作用是伺服器監聽所有客戶端 並返回該新連線物件 // 這個事件在在客戶端與伺服器建立連結時自動觸發 io.on('connection', function (socket) { console.log('新加入一個連線。'); // 不管是伺服器還是客戶端都有 emit 和 on 這兩個函式,socket.io 的核心就是這兩個函式 socket.on('setRoom', function (data) { console.log(data); var name = data.roomId; // // 儲存上線的使用者 hashName[name] = socket.id; }); /** * on :用來監聽一個 emit 傳送的事件 * 'sayTo' 為要監聽的事件名 * 匿名函式用來接收對方發來的資料 * 這個匿名函式的第一個引數為接收的資料,如果有第二個引數,則是要返回的函式。 */ socket.on('sayTo', function (data) { var toName = data.to; var toId = data.id; if (toId = hashName[toName]) { // nodejs的underscore擴充套件中的findWhere方法,可以在物件集合中,通過物件的屬性值找到該物件並返回。 var toSocket = _.findWhere(io.sockets.sockets, {id: toId}); // socket.emit() :向建立該連線的客戶端廣播 // socket.broadcast.emit() :向除去建立該連線的客戶端的所有客戶端廣播 // io.sockets.emit() :向所有客戶端廣播,等同於上面兩個的和 // 通過該連線物件(toSocket)與連結到這個物件的客戶端進行單獨通訊 toSocket.emit('message', data.msg); } }); // 當關閉連線後觸發 disconnect 事件 socket.on('disconnect', function () { console.log('斷開一個連線。'); }); });
index.html程式碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>socket.io演示客戶端</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.1.1/socket.io.js"></script> </head> <body> <h1>socket.io演示客戶端</h1> <input type="text" placeholder="設定房間號" id="roomId"><button>確定</button> <input type="text" placeholder="傳送訊息" id="msg"> <input type="text" placeholder="傳送給" id="toRoomId"><button id="sayTo">確定</button> <div id="word"> </div> </body> <script> $=function (id) { return document.getElementById(id); }; var socket = io.connect('127.0.0.1:3000'); var setRoom = document.getElementsByTagName("button")[0], sayTo = document.getElementsByTagName("button")[1], msg = $("msg"), word = $("word"), toRoom=$("toRoomId"); setRoom.onclick=function(){ socket.emit('setRoom',{"roomId":$("roomId").value}) ; }; sayTo.onclick=function () { var toMsg=msg.value; socket.emit("sayTo",{"to":toRoom.value,"msg":toMsg}); }; // 當收到對方發來的資料後觸發 message 事件 socket.on('message',function (data) { word.innerHTML+="<p>"+data+"</p>"; }); </script> </html>
重要的部分都加了註釋,寫的不太好,還需要繼續學習!