Node.js – Websocket’te Socket ID İle Hedef Client’a Veri Gönderme

Merhaba,

Herhangi bir client, web socket protokolü üzerinden sunucuya bağlantı sağlarsa aradaki bağlantı için Socket ID dediğimiz benzersiz bir değer oluşturulur. Haliyle bizler bu oluşturulan id değerini kullanarak sadece o bağlantı üzerinden bilgi alışverişi yapabiliriz.

Yukarıdaki ekran görüntüsünden de görüldüğü üzere, client sayfayı her yenilediğinde önceki id imha edilir ve clienta özel yeni bir id üretilir.

Şimdi gelin bir sockete bağlanan tüm clientların kendi aralarında hedef client bazlı nasıl haberleştiğini inceleyelim.

Hedef Client’a Veri Gönderme

İlk olarak web socket işlemlerimizi gerçekleştireceğimiz backend tarafını hazırlayalım;

const http = require("http");
const socket = require("socket.io");

const server = http.createServer((request, response) => {
    response.end("...");
});

const io = socket.listen(server.listen(1453, () => console.log("Started")));

const allClients = [];
const roomNameSpace = io.of("/rooms");
roomNameSpace.on("connection", socket => {
    console.log("Started");
    allClients.push(socket.id);

    socket.emit("sendSocketId", socket.id);

    socket.on("disconnect", () => {
        let socketId = allClients.find(x => x == socket.id);
        let indexNo = allClients.indexOf(socketId);
        allClients.splice(indexNo, 1);
        console.log("Closed");
    });

    socket.on("sendMessage", data => {
        roomNameSpace.sockets[data.socketId].emit("messages", {
            socketId: socket.id,
            message: data.message
        });

        socket.emit("messages", {
            socketId: socket.id,
            message: data.message,
            self: true
        });
    });

    roomNameSpace.emit("loginClient", allClients);
});

Yukarıda yapılan işlemleri incelersek eğer;

• 10. satır
  Oluşturulmuş web sokete bağlanan tüm clientların socket id değerlerini tutacak olan koleksiyon tanımlanmaktadır.
• 16. satır
  Clienta özel oluşturulmuş socket id değerini gönderecek eventtır. Clientın kendine has id değerini bilmesi için oluşturulmuştur.
• 25 – 36. satır
  Clientlardan gelecek olan mesajı karşılamakla sorumlu olan eventtır.
  • 26 – 29. satır
    Socket id değeri belirtilen hedef clienta mesaj gönderecek eventtır.
  • 31 – 35. satır
    Mesaj gönderen clienta mesajını geri gönderen eventtır.

Ardından ilgili fonksiyonellikleri kullanacak olan clientların frontend tasarımını ele alalım;

<!DOCTYPE html>
<html lang="en">

<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.2.0/socket.io.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

    <script>
        const socket = io.connect("http://localhost:1453/rooms");
        $(() => {
            let socketId = "";
            socket.on("loginClient", data => {
                let html = "";
                $.each(data, (i, n) => html += `<li style="cursor: pointer;" class="client">${n}</li>`);
                $("#allClients").html(html);
            });

            socket.on("sendSocketId", data => $("#thisSocketId").html(data));

            $("body").on("click", ".client", () => {
                $("#txtSocketId").val(`Target Client : ${$(event.target).html()}`);
                socketId = $(event.target).html();
            });

            $("#btnSendMessage").click(() => {
                socket.emit("sendMessage", {
                    socketId,
                    message: $("#txtMessage").val()
                });
            });

            socket.on("messages", data => {
                if (!data.self)
                    $("#messages").append(`<li><strong style="color: green;">${data.socketId}</strong> : ${data.message}</li>`);
                else
                    $("#messages").append(`<li><strong>${data.socketId}</strong> : ${data.message}</li>`);
                $("#txtMessage").val("");
            });
        });
    </script>
</head>
<body>
    <h3 id="thisSocketId"></h3>
    <div class="row"">
        <div class=" col-md-6">
        <ul id="allClients">

        </ul>
    </div>
    <div class="col-md-6">
        <input type="text" placeholder="Target Client" id="txtSocketId" disabled style="width: 350px;"> <br>
        <textarea name="" id="txtMessage" style="width: 350px;" placeholder="Message"></textarea><br>
        <button id="btnSendMessage">Send Message</button>
    </div>
    <div class="col-md-12">
        <ul id="messages">

        </ul>
    </div>
    </div>
</body>
</html>

Burada backend de “sendMessage” eventını dinleyen fonksiyona göz atarsanız eğer socket id üzerinden hedef clienta mesaj gönderilebilmektedir.
Dolayısıyla;

işleyiş yukarıdaki ekran görüntüsünde olduğu gibi ceyran etmekte ve böylece hedef clienta TCP portu üzerinden web socket kullanılarak mesaj iletilmektedir.

Örnek uygulamayı indirmek için buraya tıklayınız. Uygulamayı çalıştırabilmek için npm install komutunu çalıştırmayı unutmayınız…

İlgilenenlerin faydalanması dileğiyle…
Sonraki yazılarımda görüşmek üzere…
İyi çalışmalar…