文章非本人所寫,原文地址:https://blog.csdn.net/qq_40081577/article/details/82932480 博主地址:https://blog.csdn.net/qq_40081577 , 讀過博主的文章獲益匪淺,感謝博主!
主要目的是實現向某個指定的用戶發送消息,也就是服務端單獨推送信息給某個人。具體的思路就是每個在線的用戶都對應一個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.οnclick=function(){
socket.emit('setRoom',{"roomId":$("roomId").value}) ;
};
sayTo.οnclick=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>