<\/div>\n
Merhaba,<\/p>\n
\u00d6nceki yaz\u0131lar\u0131mdan Node.js \u2013 Websocket\u2019te Namespace ve Room Kavramlar\u0131 ve Kullan\u0131mlar\u0131<\/a> ba\u015fl\u0131kl\u0131 yaz\u0131mda Node.js’de namespace ve room kavramlar\u0131n\u0131 detayl\u0131ca ele alarak pratik bir \u015fekilde incelemi\u015ftik. Bu i\u00e7eri\u011fimizde ise ba\u011flan\u0131lm\u0131\u015f bir odadan “leave” fonksiyonu ile ayr\u0131lmay\u0131 inceleyece\u011fiz. Tabi olay\u0131 komplike bir senaryo \u00fczerinden de\u011ferlendirece\u011fimizden dolay\u0131 ilk olarak adresini refere etti\u011fim \u00f6nceki makalemi sat\u0131r sat\u0131r okuman\u0131z\u0131, ard\u0131ndan bu i\u00e7eri\u011fimize g\u00f6z atman\u0131z\u0131 tavsiye ediyorum. E\u011fer haz\u0131rsan\u0131z ba\u015flayal\u0131m…<\/p>\n
\u0130lk olarak Node.js’de socket \u00e7al\u0131\u015fmas\u0131 yaparak, bir namespace alt\u0131nda ad\u0131n\u0131 opsiyonel olarak input de\u011ferinden alan odalara clientlar\u0131n ba\u011fland\u0131\u011f\u0131 sistem in\u015fa edelim.<\/p>\n
\r\nconst http = require("http");\r\nconst socketio = require("socket.io");\r\n\r\nconst server = http.createServer((request, response) => {\r\n     response.end("...");\r\n});\r\n\r\nconst io = socketio.listen(server.listen(9876, () => console.log("Broadcast Started")));\r\nconst roomNameSpace = io.of("\/rooms");\r\n\r\nlet clientCount = 0;\r\n\r\nroomNameSpace.on("connection", socket => {\r\n     clientCount++;\r\n     clientCountFunction();\r\n     socket.on("disconnect", () => { clientCount--; clientCountFunction(); });\r\n     socket.on("signRoom", data => {\r\n          socket.join(data.roomName, () => {\r\n               console.log(`${data.roomName} isimli odaya giri\u015f yap\u0131lm\u0131\u015ft\u0131r.`);\r\n               const roomClientCount = roomClientCountFunc(roomNameSpace, data);\r\n               roomNameSpace.to(data.roomName).emit("message", {\r\n                    roomName: data.roomName,\r\n                    roomClientCount: roomClientCount\r\n               });\r\n          });\r\n     });\r\n});\r\n\r\nconst clientCountFunction = () => roomNameSpace.emit("clientCount", clientCount);\r\nconst roomClientCountFunc = (roomsNameSpace, data) => {\r\n     const hasRoom = roomsNameSpace.adapter.rooms[data.roomName]; \/\/ \u0130smi belirtilen odaya ba\u011fl\u0131 client say\u0131s\u0131...\r\n     \/\/Odadan en son client ayr\u0131ld\u0131ktan sonra oda imha edilir. Dolay\u0131s\u0131yla olas\u0131 hatayla kar\u015f\u0131la\u015fmamak i\u00e7in kontroll\u00fc hesaplama yap\u0131lmaktad\u0131r.\r\n     return hasRoom ? hasRoom.length : 0;\r\n}\r\n<\/pre>\nYukar\u0131daki kod blo\u011funu incelerseniz e\u011fer “\/rooms” namespace’i alt\u0131nda bir socket \u00e7al\u0131\u015fmas\u0131 yap\u0131lm\u0131\u015f bulunmaktad\u0131r. Burada 11.<\/strong> sat\u0131rda tan\u0131mlanm\u0131\u015f olan “clientCount” de\u011fi\u015fkeni sisteme dahil olan yani bir ba\u015fka deyi\u015fle namespace’e ba\u011flanan t\u00fcm aktif\/online \/\u00e7evrimi\u00e7i clientlar\u0131n ka\u00e7 adet oldu\u011funu bilebilmemiz i\u00e7in bir saya\u00e7 g\u00f6revi g\u00f6rmektedir. 29.<\/strong> sat\u0131rdaki tan\u0131mlanm\u0131\u015f “clientCountFunction” fonksiyonu ise “clientCount” de\u011fi\u015fkeninin bilgisini t\u00fcm clientlara iletmek i\u00e7in olu\u015fturulmu\u015f bir fonksiyondur. Birden fazla noktada kullanaca\u011f\u0131m\u0131z i\u00e7in fonksiyon olarak tasarlanm\u0131\u015ft\u0131r. 30.<\/strong> sat\u0131ra gelirsek ise keza “clientCountFunction” ile ayn\u0131 mant\u0131kta tan\u0131mlanm\u0131\u015f olan “roomClientCountFunc” fonksiyonu birden fazla noktada \u00e7a\u011fr\u0131lacakt\u0131r ve i\u015flevsel olarak ba\u011flan\u0131lan odadaki total client adedini bizlere d\u00f6nmekle g\u00f6revlidir. <\/p>\n
\u015eimdi backend’de tasarlanan yap\u0131ya uygun clientlar\u0131n kullanaca\u011f\u0131 html yap\u0131s\u0131n\u0131 dizayn edelim;<\/p>\n\r\n<!DOCTYPE html>\r\n<html>\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>\r\n          const socket = io.connect("http:\/\/localhost:9876\/rooms");\r\n          socket.on("clientCount", data => $("#allClientCount").html(data));\r\n          $(() => {\r\n               $("#btnSign").click(() => {\r\n                    socket.emit("signRoom", {\r\n                         roomName: $("#txtRoomName").val()\r\n                    });\r\n                    $("#txtRoomName, #btnSign").attr("disabled", "disabled");\r\n                    $("#btnLeave").css("display", "");\r\n               });\r\n               socket.on("message", data => {\r\n                    $("#roomClientCount").html(data.roomClientCount);\r\n                    $("#message").append(`<li>Odaya giri\u015f yap\u0131ld\u0131.<\/li>`);\r\n               });\r\n          });\r\n     <\/script>\r\n<\/head>\r\n<body>\r\n     <input type="text" id="txtRoomName"> <button id="btnSign">Sign In Room<\/button> | <button id="btnLeave" style="display:none;">Leave\r\n          Room<\/button><br>\r\n     <strong>Room Client Count : <span id="roomClientCount"><\/span> | All Client Count : <span id="allClientCount"><\/span>\r\n     <\/strong>\r\n     <ul id="message">\r\n     <\/ul>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\nG\u00f6r\u00fcld\u00fc\u011f\u00fc \u00fczere client taraf\u0131nda “Sign In Room” butonuna t\u0131kland\u0131\u011f\u0131 zaman “signRoom” ad\u0131nda olay tetiklenmekte ve backend’de ilgili olay i\u00e7erisinde input’a girilen de\u011fer ad\u0131nda bir room olu\u015fturmaktad\u0131r. Ayriyetten a\u015fa\u011f\u0131daki ekran g\u00f6r\u00fcnt\u00fcs\u00fcnde oldu\u011fu gibi olaylara ba\u011fl\u0131 bir \u015fekilde “Leave Room” butonu g\u00f6r\u00fcnt\u00fclenmekte ve input ile “Sign In Room” butonu disable edilmektedir.<\/p>\n<\/a><\/p>\n
\u015eimdi leave fonksiyonu ile ba\u011flant\u0131 kurulan odadan ayr\u0131lma i\u015flemini ger\u00e7ekle\u015ftirelim.<\/p>\n
\r\nconst http = require("http");\r\nconst socketio = require("socket.io");\r\n\r\nconst server = http.createServer((request, response) => {\r\n     response.end("...");\r\n});\r\n\r\nconst io = socketio.listen(server.listen(9876, () => console.log("Broadcast Started")));\r\nconst roomNameSpace = io.of("\/rooms");\r\n\r\nlet clientCount = 0;\r\n\r\nroomNameSpace.on("connection", socket => {\r\n     clientCount++;\r\n     clientCountFunction();\r\n     socket.on("disconnect", () => { clientCount--; clientCountFunction(); });\r\n     socket.on("signRoom", data => {\r\n          socket.join(data.roomName, () => {\r\n               console.log(`${data.roomName} isimli odaya giri\u015f yap\u0131lm\u0131\u015ft\u0131r.`);\r\n               const roomClientCount = roomClientCountFunc(roomNameSpace, data);\r\n               roomNameSpace.to(data.roomName).emit("message", {\r\n                    roomName: data.roomName,\r\n                    roomClientCount: roomClientCount\r\n               });\r\n          });\r\n     });\r\n     socket.on("leaveRoom", data => {\r\n          socket.leave(data.roomName, () => {\r\n               const roomClientCount = roomClientCountFunc(roomNameSpace, data);\r\n               roomNameSpace.to(data.roomName).emit("message", {\r\n                    roomName: data.roomName,\r\n                    roomClientCount: roomClientCount,\r\n                    leaved: true\r\n               }); \/\/ Odadaki di\u011fer clientlara son durum bilgisi vermek i\u00e7in tetikleniyor.\r\n               socket.emit("message", {\r\n                    roomName: data.roomName,\r\n                    roomClientCount: "",\r\n                    leaved: true\r\n               });\/* \u00dcstteki tan\u0131mlanan emit odadaki t\u00fcm clientlar i\u00e7in ge\u00e7erlidir.\r\n                     Dolay\u0131s\u0131yla mevcut kullan\u0131c\u0131da odadan \u00e7\u0131kt\u0131\u011f\u0131 i\u00e7in bir olay ger\u00e7ekle\u015fmeyecektir.\r\n                     Son durumdan haberdar etmek i\u00e7in ilgili client'a \u00f6zel event f\u0131rlat\u0131lmaktad\u0131r.*\/\r\n          });\r\n     });\r\n});\r\n\r\nconst clientCountFunction = () => roomNameSpace.emit("clientCount", clientCount);\r\nconst roomClientCountFunc = (roomsNameSpace, data) => {\r\n     const hasRoom = roomsNameSpace.adapter.rooms[data.roomName]; \/\/ \u0130smi belirtilen odaya ba\u011fl\u0131 client say\u0131s\u0131...\r\n     \/\/Odadan en son client ayr\u0131ld\u0131ktan sonra oda imha edilir. Dolay\u0131s\u0131yla olas\u0131 hatayla kar\u015f\u0131la\u015fmamak i\u00e7in kontroll\u00fc hesaplama yap\u0131lmaktad\u0131r.\r\n     return hasRoom ? hasRoom.length : 0;\r\n}\r\n<\/pre>\nYukar\u0131daki kod blo\u011funu incelerseniz e\u011fer “leaveRoom” event\u0131n\u0131n eklendi\u011fini g\u00f6receksiniz. Burada “leave” fonksiyonu kullan\u0131larak ad\u0131 belirtilen odadan \u00e7\u0131k\u0131\u015f sa\u011flan\u0131lm\u0131\u015f, bir ba\u015fka deyi\u015fle ayr\u0131l\u0131nm\u0131\u015ft\u0131r. Ayriyetten odadan ayr\u0131l\u0131nd\u0131\u011f\u0131na dair odaya ba\u011fl\u0131 di\u011fer clientlarla birlikte ayr\u0131lan client “message” event\u0131 ile bilgilendirilmektedir.<\/p>\n
Son geli\u015ftirmenin ilgili html d\u00fczenlemesine gelirsek e\u011fer;<\/p>\n\r\n<!DOCTYPE html>\r\n<html>\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>\r\n          const socket = io.connect("http:\/\/localhost:9876\/rooms");\r\n          socket.on("clientCount", data => $("#allClientCount").html(data));\r\n          $(() => {\r\n               $("#btnSign").click(() => {\r\n                    socket.emit("signRoom", {\r\n                         roomName: $("#txtRoomName").val()\r\n                    });\r\n                    $("#txtRoomName, #btnSign").attr("disabled", "disabled");\r\n                    $("#btnLeave").css("display", "");\r\n               });\r\n               socket.on("message", data => {\r\n                    $("#roomClientCount").html(data.roomClientCount);\r\n                    if (!data.leaved)\r\n                         $("#message").append(`<li>Odaya giri\u015f yap\u0131ld\u0131.<\/li>`);\r\n                    else\r\n                         $("#message").append(`<li>Odadan \u00e7\u0131k\u0131\u015f yap\u0131ld\u0131.<\/li>`);\r\n               });\r\n               $("#btnLeave").click(() => {\r\n                    socket.emit("leaveRoom", {\r\n                         roomName: $("#txtRoomName").val()\r\n                    });\r\n                    $("#txtRoomName, #btnSign").removeAttr("disabled");\r\n                    $("#btnLeave").css("display", "none");\r\n               });\r\n          });\r\n     <\/script>\r\n<\/head>\r\n<body>\r\n     <input type="text" id="txtRoomName"> <button id="btnSign">Sign In Room<\/button> | <button id="btnLeave" style="display:none;">Leave\r\n          Room<\/button><br>\r\n     <strong>Room Client Count : <span id="roomClientCount"><\/span> | All Client Count : <span id="allClientCount"><\/span>\r\n     <\/strong>\r\n     <ul id="message">\r\n     <\/ul>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n\u015feklinde olacakt\u0131r.
\n<\/a><\/p>\n
G\u00f6r\u00fcld\u00fc\u011f\u00fc \u00fczere Node.js – Websocket’te ba\u011flant\u0131 kurulan odadan “leave” fonksiyonu ile nas\u0131l ayr\u0131laca\u011f\u0131n\u0131 detayl\u0131ca incelemi\u015f bulunmaktay\u0131z.<\/p>\n
Makale i\u00e7eri\u011finde kulland\u0131\u011f\u0131m kaynak kodlar\u0131n\u0131 ve \u00f6rnek projeyi a\u015fa\u011f\u0131daki link \u00fczerinden elde edebilirsiniz.
\nKaynak Kodlar ve \u00d6rnek Test Projesi<\/a><\/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, \u00d6nceki yaz\u0131lar\u0131mdan Node.js \u2013 Websocket\u2019te Namespace ve Room Kavramlar\u0131 ve Kullan\u0131mlar\u0131 ba\u015fl\u0131kl\u0131 yaz\u0131mda Node.js’de namespace ve room kavramlar\u0131n\u0131 detayl\u0131ca ele alarak pratik bir \u015fekilde incelemi\u015ftik. Bu i\u00e7eri\u011fimizde ise ba\u011flan\u0131lm\u0131\u015f bir odadan “leave” fonksiyonu...<\/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":[2748,2147,2749,2750,2713],"class_list":["post-10245","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-node-js","tag-leave-fonksiyonu","tag-node-js","tag-node-js-leave-fonksiyonu","tag-node-js-leave-function","tag-websocket"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/10245","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=10245"}],"version-history":[{"count":11,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/10245\/revisions"}],"predecessor-version":[{"id":10260,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/10245\/revisions\/10260"}],"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=10245"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/categories?post=10245"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/tags?post=10245"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}