1. 程式人生 > >簡單的nodejs+socket.io給指定的人傳送訊息

簡單的nodejs+socket.io給指定的人傳送訊息

最近學習了一下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>

重要的部分都加了註釋,寫的不太好,還需要繼續學習!