<\/div>\n

Merhaba,<\/p>\n

Herhangi bir client, web socket protokol\u00fc \u00fczerinden sunucuya ba\u011flant\u0131 sa\u011flarsa aradaki ba\u011flant\u0131 i\u00e7in Socket ID dedi\u011fimiz benzersiz bir de\u011fer olu\u015fturulur. Haliyle bizler bu olu\u015fturulan id de\u011ferini kullanarak sadece o ba\u011flant\u0131 \u00fczerinden bilgi al\u0131\u015fveri\u015fi yapabiliriz.<\/p>\n

Yukar\u0131daki ekran g\u00f6r\u00fcnt\u00fcs\u00fcnden de g\u00f6r\u00fcld\u00fc\u011f\u00fc \u00fczere, client sayfay\u0131 her yeniledi\u011finde \u00f6nceki id imha edilir ve clienta \u00f6zel yeni bir id \u00fcretilir.<\/p>\n

\u015eimdi gelin bir sockete ba\u011flanan t\u00fcm clientlar\u0131n kendi aralar\u0131nda hedef client bazl\u0131 nas\u0131l haberle\u015fti\u011fini inceleyelim.<\/p>\n

Hedef Client’a Veri G\u00f6nderme<\/h3>\n

\u0130lk olarak web socket i\u015flemlerimizi ger\u00e7ekle\u015ftirece\u011fimiz backend taraf\u0131n\u0131 haz\u0131rlayal\u0131m;<\/p>\n

\r\nconst http = require("http");\r\nconst socket = require("socket.io");\r\n\r\nconst server = http.createServer((request, response) => {\r\n    response.end("...");\r\n});\r\n\r\nconst io = socket.listen(server.listen(1453, () => console.log("Started")));\r\n\r\nconst allClients = [];\r\nconst roomNameSpace = io.of("\/rooms");\r\nroomNameSpace.on("connection", socket => {\r\n    console.log("Started");\r\n    allClients.push(socket.id);\r\n\r\n    socket.emit("sendSocketId", socket.id);\r\n\r\n    socket.on("disconnect", () => {\r\n        let socketId = allClients.find(x => x == socket.id);\r\n        let indexNo = allClients.indexOf(socketId);\r\n        allClients.splice(indexNo, 1);\r\n        console.log("Closed");\r\n    });\r\n\r\n    socket.on("sendMessage", data => {\r\n        roomNameSpace.sockets[data.socketId].emit("messages", {\r\n            socketId: socket.id,\r\n            message: data.message\r\n        });\r\n\r\n        socket.emit("messages", {\r\n            socketId: socket.id,\r\n            message: data.message,\r\n            self: true\r\n        });\r\n    });\r\n\r\n    roomNameSpace.emit("loginClient", allClients);\r\n});\r\n<\/pre>\nYukar\u0131da yap\u0131lan i\u015flemleri incelersek e\u011fer;<\/p>\n\n10. sat\u0131r<\/strong>
\nOlu\u015fturulmu\u015f web sokete ba\u011flanan t\u00fcm clientlar\u0131n socket id de\u011ferlerini tutacak olan koleksiyon tan\u0131mlanmaktad\u0131r.\n<\/li>\n
16. sat\u0131r<\/strong>
\nClienta \u00f6zel olu\u015fturulmu\u015f socket id de\u011ferini g\u00f6nderecek eventt\u0131r. Client\u0131n kendine has id de\u011ferini bilmesi i\u00e7in olu\u015fturulmu\u015ftur.\n<\/li>\n25 – 36. sat\u0131r<\/strong>
\nClientlardan gelecek olan mesaj\u0131 kar\u015f\u0131lamakla sorumlu olan eventt\u0131r.<\/p>\n\n26 – 29. sat\u0131r<\/em><\/strong>
\nSocket id de\u011feri belirtilen hedef clienta mesaj g\u00f6nderecek eventt\u0131r.\n<\/li>\n31 – 35. sat\u0131r<\/em><\/strong>
\nMesaj g\u00f6nderen clienta mesaj\u0131n\u0131 geri g\u00f6nderen eventt\u0131r.\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\nArd\u0131ndan ilgili fonksiyonellikleri kullanacak olan clientlar\u0131n frontend tasar\u0131m\u0131n\u0131 ele alal\u0131m;<\/p>\n\r\n<!DOCTYPE html>\r\n<html lang="en">\r\n\r\n<head>\r\n    <script src="https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery\/3.3.1\/jquery.min.js"><\/script>\r\n    <script src="https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/socket.io\/2.2.0\/socket.io.js"><\/script>\r\n    <script src="https:\/\/stackpath.bootstrapcdn.com\/bootstrap\/4.3.1\/js\/bootstrap.min.js"><\/script>\r\n    <link rel="stylesheet" href="https:\/\/stackpath.bootstrapcdn.com\/bootstrap\/4.3.1\/css\/bootstrap.min.css">\r\n\r\n    <script>\r\n        const socket = io.connect("http:\/\/localhost:1453\/rooms");\r\n        $(() => {\r\n            let socketId = "";\r\n            socket.on("loginClient", data => {\r\n                let html = "";\r\n                $.each(data, (i, n) => html += `<li style="cursor: pointer;" class="client">${n}<\/li>`);\r\n                $("#allClients").html(html);\r\n            });\r\n\r\n            socket.on("sendSocketId", data => $("#thisSocketId").html(data));\r\n\r\n            $("body").on("click", ".client", () => {\r\n                $("#txtSocketId").val(`Target Client : ${$(event.target).html()}`);\r\n                socketId = $(event.target).html();\r\n            });\r\n\r\n            $("#btnSendMessage").click(() => {\r\n                socket.emit("sendMessage", {\r\n                    socketId,\r\n                    message: $("#txtMessage").val()\r\n                });\r\n            });\r\n\r\n            socket.on("messages", data => {\r\n                if (!data.self)\r\n                    $("#messages").append(`<li><strong style="color: green;">${data.socketId}<\/strong> : ${data.message}<\/li>`);\r\n                else\r\n                    $("#messages").append(`<li><strong>${data.socketId}<\/strong> : ${data.message}<\/li>`);\r\n                $("#txtMessage").val("");\r\n            });\r\n        });\r\n    <\/script>\r\n<\/head>\r\n<body>\r\n    <h3 id="thisSocketId"><\/h3>\r\n    <div class="row"">\r\n        <div class=" col-md-6">\r\n        <ul id="allClients">\r\n\r\n        <\/ul>\r\n    <\/div>\r\n    <div class="col-md-6">\r\n        <input type="text" placeholder="Target Client" id="txtSocketId" disabled style="width: 350px;"> <br>\r\n        <textarea name="" id="txtMessage" style="width: 350px;" placeholder="Message"><\/textarea><br>\r\n        <button id="btnSendMessage">Send Message<\/button>\r\n    <\/div>\r\n    <div class="col-md-12">\r\n        <ul id="messages">\r\n\r\n        <\/ul>\r\n    <\/div>\r\n    <\/div>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\nBurada backend de “sendMessage” event\u0131n\u0131 dinleyen fonksiyona g\u00f6z atarsan\u0131z e\u011fer socket id \u00fczerinden hedef clienta mesaj g\u00f6nderilebilmektedir.
\nDolay\u0131s\u0131yla;
\n<\/a>
\ni\u015fleyi\u015f yukar\u0131daki ekran g\u00f6r\u00fcnt\u00fcs\u00fcnde oldu\u011fu gibi ceyran etmekte ve b\u00f6ylece hedef clienta TCP portu \u00fczerinden web socket kullan\u0131larak mesaj iletilmektedir.<\/p>\n
\u00d6rnek uygulamay\u0131 indirmek i\u00e7in buraya<\/a> t\u0131klay\u0131n\u0131z. Uygulamay\u0131 \u00e7al\u0131\u015ft\u0131rabilmek i\u00e7in npm install<\/u> komutunu \u00e7al\u0131\u015ft\u0131rmay\u0131 unutmay\u0131n\u0131z…<\/span><\/p>\n
\u0130lgilenenlerin faydalanmas\u0131 dile\u011fiyle…
\nSonraki yaz\u0131lar\u0131mda g\u00f6r\u00fc\u015fmek \u00fczere…
\n\u0130yi \u00e7al\u0131\u015fmalar…<\/p>\n","protected":false},"excerpt":{"rendered":"
Merhaba, Herhangi bir client, web socket protokol\u00fc \u00fczerinden sunucuya ba\u011flant\u0131 sa\u011flarsa aradaki ba\u011flant\u0131 i\u00e7in Socket ID dedi\u011fimiz benzersiz bir de\u011fer olu\u015fturulur. Haliyle bizler bu olu\u015fturulan id de\u011ferini kullanarak sadece o ba\u011flant\u0131 \u00fczerinden bilgi al\u0131\u015fveri\u015fi...<\/p>\n","protected":false},"author":1,"featured_media":8600,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2145],"tags":[2147,2715,2776,2713],"class_list":["post-10509","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-node-js","tag-node-js","tag-node-js-websocket","tag-web-socket","tag-websocket"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/10509","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/comments?post=10509"}],"version-history":[{"count":11,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/10509\/revisions"}],"predecessor-version":[{"id":10523,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/10509\/revisions\/10523"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media\/8600"}],"wp:attachment":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media?parent=10509"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/categories?post=10509"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/tags?post=10509"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}