<\/div>\n

Merhaba,<\/p>\n

Bu i\u00e7eri\u011fimizde Node.js mimarisinde websocket teknolojisi terminolojisinden olan Namespace<\/strong> ve Room<\/strong> kavramlar\u0131na de\u011finece\u011fiz. Asl\u0131nda bu kavramlar, i\u015flevsel olarak kelime bazl\u0131 her ne kadar anla\u015f\u0131labilir olsalarda, genel programlama bilgisi olan herkes taraf\u0131ndan da terminolojik manalar\u0131na \u00e7okta yabanc\u0131 olmad\u0131\u011f\u0131m\u0131z terimlerdir. \u015e\u00f6yle ki, bir namespace kavram\u0131 yaz\u0131l\u0131m d\u00fcnyas\u0131nda yap\u0131lar\u0131 k\u00fcmelememizi sa\u011flayan yap\u0131lard\u0131r. Hatta daha da terminolojik olursak yaz\u0131l\u0131m\u0131 genel hatlar\u0131yla belirleyen k\u00fct\u00fcphaneler olu\u015fturmam\u0131z\u0131 ve bu k\u00fct\u00fcphanelerin namespace de\u011ferleri \u00fczerinden birbirleriyle haberle\u015fmesini sa\u011flayan yap\u0131lard\u0131r diyebiliriz…<\/p>\n

G\u00f6rd\u00fc\u011f\u00fcn\u00fcz \u00fczere bu i\u00e7eri\u011fimizde teorik olarak \u00e7okta yabanc\u0131l\u0131k \u00e7ekmeyece\u011fimiz kavramlar\u0131 inceleyece\u011fiz. \u015eimdi gelin Node.js – Websocket teknolojisiyle bu kavramlar\u0131 \u00f6nbilgilerimiz e\u015fli\u011finde bir kez daha de\u011ferlendirelim ve bir an \u00f6nce i\u00e7eri\u011fimizin esas amac\u0131 olarak konuyu pratik boyutta de\u011ferlendirmeye ba\u015flayal\u0131m.<\/p>\n

Websocket’te Namespace Nedir?<\/h3>\n
Node.js Websocket teknolojisinde socket \u00e7al\u0131\u015fmalar\u0131m\u0131z\u0131 b\u00f6lmek i\u00e7in Namespace<\/strong> diye nitelendirilen par\u00e7alar kullan\u0131lmaktad\u0131r. Namespaceler sayesinde socket i\u015flemlerimizi par\u00e7alar e\u015fli\u011finde y\u00f6netebilir ve bir i\u015flemi bir di\u011ferinden kolayl\u0131kla ay\u0131rabiliriz.<\/p>\n
E\u011fer ki, taraf\u0131m\u0131zdan bir namespace tan\u0131mlanmazsa yahut kullanmazsak, varsay\u0131lan olarak Default\/Root\/Global\/K\u00f6k diye nitelendirilen namespace devreye girecek ve ge\u00e7erli olacakt\u0131r.<\/p>\n
Websocket’te Room Nedir?<\/h3>\n
Roomlar<\/strong>, namespaceler i\u00e7erisinde bulunan yap\u0131lard\u0131r. Yani bir namespace, bir veya birden fazla room bar\u0131nd\u0131rabilir. Teknik olarak g\u00f6revleri namespace i\u00e7erisinde farkl\u0131 par\u00e7alar olu\u015fturmakt\u0131r. Bu par\u00e7alar birbirlerinden ba\u011f\u0131ms\u0131z bir \u015fekilde kullan\u0131labildi\u011fi gibi ihtiyaca d\u00f6n\u00fck namespace genelinde ortak yorumlanabilirler.<\/p>\n
Dikkat ederseniz her iki yap\u0131da sunucu\/server taraf\u0131nda olu\u015fturulmaktad\u0131r.<\/p>\n
Websocket’te Namespace Olu\u015fturmak<\/h3>\n
E\u011fer ki bir namespace tan\u0131mlamak isteniyorsa mevcut soket ba\u011flant\u0131s\u0131 \u00fczerinden “of” fonksiyonu ile ilgili namespace tan\u0131mlanabilir.<\/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\nserver.listen(1234);\r\nconst io = socket.listen(server);\r\n\r\nconst xnamespace = io.of("\/xnamespace");\r\nconst ynamespace = io.of("\/ynamespace");\r\n<\/pre>\n
Yukar\u0131daki kod blo\u011funda g\u00f6r\u00fcld\u00fc\u011f\u00fc \u00fczere “xnamespace” ve “ynamespace” olmak \u00fczere iki adet namespace tan\u0131mlanm\u0131\u015ft\u0131r.<\/p>\n
\r\nxnamespace.on("connection", socket => {\r\n console.log("connect xnamespace");\r\n});\r\n\r\nynamespace.on("connection", socket => {\r\n console.log("connect ynamespace");\r\n});\r\n<\/pre>\n
G\u00f6r\u00fcld\u00fc\u011f\u00fc \u00fczere tan\u0131mlanan her iki namespace “connection” event\u0131n\u0131 dinlemekte ve bir client taraf\u0131ndan ba\u011flant\u0131 ger\u00e7ekle\u015ftirilece\u011fi zaman console’a veri girmektedir.<\/p>\n
Olu\u015fturulan namespacelere, client taraf\u0131ndan ba\u011flanmak isteniyorsa a\u015fa\u011f\u0131daki gibi belirtilmesi yeterlidir.<\/p>\n
\r\n--- index.html ---\r\n<!DOCTYPE html>\r\n<html lang="en">\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:1234\/xnamespace");\r\n <\/script>\r\n<\/head>\r\n<body>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
Yukar\u0131daki kod blo\u011funda bulunan ba\u011flant\u0131 c\u00fcmlesini detayl\u0131 incelemek i\u00e7in a\u015fa\u011f\u0131ya al\u0131rsak e\u011fer;<\/p>\n
\r\n.\r\n.\r\n.\r\nconst socket = io.connect("http:\/\/localhost:1234\/xnamespace");\r\n.\r\n.\r\n.\r\n<\/pre>\n
Evet… G\u00f6rd\u00fc\u011f\u00fcn\u00fcz gibi bir namespace’e ba\u011flanmak i\u00e7in tek yap\u0131lmas\u0131 gereken socket adresinin yan\u0131na “\/[Namespace Ad\u0131]” belirtilmesidir. E\u011fer ki bu belirtilmiyorsa sistem varsay\u0131lan\/default namespace \u00fczerinden \u00e7al\u0131\u015f\u0131yor demektir. Biz \u00f6rne\u011fimizde “xnamespace”i vermi\u015f bulunmaktay\u0131z. Dolay\u0131s\u0131yla bu sayfay\u0131 kullanacak olan clientlar “xnamespace” isimli namespace’e ba\u011flanacak demektir.<\/p>\n
Namespaceler, websocket \u00e7al\u0131\u015fmalar\u0131ndaki farkl\u0131 yap\u0131sal \u00e7al\u0131\u015fmalar\u0131 birbirlerinden izole etmekte olduklar\u0131ndan dolay\u0131 birine ba\u011flanan client bir di\u011ferinden ba\u011f\u0131ms\u0131z seyr etmi\u015f olacakt\u0131r. \u015e\u00f6yle ki;
\nBir \u00f6nceki “index.html” sayfas\u0131 “xnamespace” isimli namespace’e ba\u011flanmaktayd\u0131. Birde a\u015fa\u011f\u0131da “ynamespace”e ba\u011flanacak olan sayfay\u0131 olu\u015ftural\u0131m.<\/p>\n
\r\n<!DOCTYPE html>\r\n<html lang="en">\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:1234\/ynamespace");\r\n <\/script>\r\n<\/head>\r\n<body>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
\u015eimdi bu sayfalara ba\u011flanan clientlar\u0131n durumunu a\u015fa\u011f\u0131daki ekran g\u00f6r\u00fcnt\u00fcs\u00fcnden inceleyelim.
\n $\"Node.js$ <\/a>
\nG\u00f6r\u00fcld\u00fc\u011f\u00fc \u00fczere namespaceler birbirlerinden izole bir \u015fekilde \u00e7al\u0131\u015fmaktad\u0131r.<\/p>\n
Namespace \u00dczerinden Emit Olu\u015fturmak<\/h4>\n
Namespace \u00fczerinden emit olu\u015ftururken dikkat edilmesi gereken iki husus vard\u0131r. Bu iki hususu a\u015fa\u011f\u0131daki namespaceli bir sockete ba\u011flanm\u0131\u015f html dosyas\u0131 \u00fczerinden de\u011ferlendirelim;<\/p>\n
\r\n<!DOCTYPE html>\r\n<html lang="en">\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:1234\/xnamespace");\r\n $(() => {\r\n $("#btnLogin").click(() => {\r\n socket.emit("login", $("#txtName").val());\r\n });\r\n socket.on("message", data => $("#message").append(`<li>${data}<\/li>`));\r\n });\r\n <\/script>\r\n<\/head>\r\n<body>\r\n <input type="text" id="txtName"> <button id="btnLogin">Giri\u015f Yap<\/button>\r\n <ul id="message"><\/ul>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
\n
E\u011fer, “socket” isimli parametre \u00fczerinden emit i\u015flemi yaparsak sadece o anda mesaj g\u00f6nderen client taraf\u0131nda ilgili i\u015flem yap\u0131lacakt\u0131r.\n
\r\nxnamespace.on("connection", socket => {\r\n console.log("connect xnamespace");\r\n socket.on("disconnect", () => console.log("disconnect xnamespace"));\r\n socket.on("login", data => {\r\n socket.emit("message", data);\r\n });\r\n});\r\n<\/pre>\n
$\"Node.js$ <\/a>\n<\/li>\n
\nYok e\u011fer namespace’e ba\u011fl\u0131 t\u00fcm clientlara i\u015flem yap\u0131lacaksa broadcast<\/a> komutunu kullanarak bu i\u015flemi ger\u00e7ekle\u015ftirebilece\u011fimiz gibi direkt olarak namespace’i tarif eden “xnamespace” sabiti \u00fczerinden de emit i\u015flemini uygulayabiliriz.<\/p>\n
\r\nxnamespace.on("connection", socket => {\r\n console.log("connect xnamespace");\r\n socket.on("disconnect", () => console.log("disconnect xnamespace"));\r\n socket.on("login", data => {\r\n xnamespace.emit("message", data);\r\n });\r\n});\r\n<\/pre>\n
$\"Node.js$ <\/a>\n<\/li>\n<\/ul>\n
Websocket’te Room Olu\u015fturmak<\/h3>\n
Herhangi bir room’a ba\u011flanabilmek i\u00e7in “join” fonksiyonu kullan\u0131l\u0131r. “join” fonksiyonu parametre olarak ald\u0131\u011f\u0131 de\u011ferdeki odaya varsa ba\u011flanmam\u0131z\u0131, yoksa olu\u015fturup ba\u011flanmam\u0131z\u0131 sa\u011flayan bir fonksiyondur.<\/p>\n
\r\nxnamespace.on("connection", socket => {\r\n console.log("connect xnamespace");\r\n socket.on("disconnect", () => console.log("disconnect xnamespace"));\r\n socket.on("login", data => {\r\n socket.join(data, () => {\r\n console.log(`Connected. Root Name : ${data}`);\r\n });\r\n });\r\n});\r\n<\/pre>\n
G\u00f6r\u00fcld\u00fc\u011f\u00fc \u00fczere parametreden gelen de\u011fer ad\u0131nda room olu\u015fturulmaktad\u0131r.<\/p>\n
\r\n<!DOCTYPE html>\r\n<html lang="en">\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:1234\/xnamespace");\r\n $(() => {\r\n $("#btnLogin").click(() => {\r\n socket.emit("login", $("#txtRoomName").val());\r\n });\r\n socket.on("message", data => $("#message").append(`<li>${data} odas\u0131na ba\u011flan\u0131ld\u0131.<\/li>`));\r\n });\r\n <\/script>\r\n<\/head>\r\n<body>\r\n <input type="text" id="txtRoomName"> <button id="btnLogin">Odaya Giri\u015f Yap<\/button>\r\n <ul id="message"><\/ul>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
Room \u00dczerinden Emit Olu\u015fturmak<\/h4>\n
Olu\u015fturulan odaya emit ile olay ba\u011flayabilmek i\u00e7in “to” ya da “in” fonksiyonlar\u0131 kullan\u0131lmaktad\u0131r. Room \u00fczerinden “Expect Sender” ve “Including Sender” olmak \u00fczere iki farkl\u0131 \u015fekilde emit olu\u015fturulabilir.<\/p>\n
\n
Expect Sender<\/strong>
\nMesaj\u0131 g\u00f6nderen ki\u015fi hari\u00e7 o odada kim varsa herkese g\u00f6nderir. “socket” parametresi ile ger\u00e7ekle\u015ftirilir.<\/p>\n
\r\nxnamespace.on("connection", socket => {\r\n console.log("connect xnamespace");\r\n socket.on("disconnect", () => console.log("disconnect xnamespace"));\r\n socket.on("login", data => {\r\n socket.join(data, () => {\r\n console.log(`Connected. Root Name : ${data}`);\r\n });\r\n socket.in(data).emit("message", data);\r\n \/\/Ya da\r\n socket.to(data).emit("message", data);\r\n });\r\n});\r\n<\/pre>\n
$\"Node.js$ <\/a>
\nYukar\u0131daki ekran g\u00f6r\u00fcnt\u00fcs\u00fcne dikkat ederseniz e\u011fer bir odaya ilk defa girilmeye \u00e7al\u0131\u015f\u0131ld\u0131\u011f\u0131nda mesaj yazd\u0131r\u0131lmamaktad\u0131r. \u00c7\u00fcnk\u00fc oda o esnada olu\u015fturulmakta ve dolay\u0131s\u0131yla olu\u015fturulan o odaya ilk ilgili client giri\u015f yapm\u0131\u015f bulunmaktad\u0131r. Dolay\u0131s\u0131yla kendisinden ba\u015fka client olmad\u0131\u011f\u0131ndan dolay\u0131 di\u011fer clientta mesaj yazd\u0131r\u0131lmamaktad\u0131r. \u0130lk ad\u0131mdan sonra yine ayn\u0131 odaya di\u011fer client taraf\u0131ndan giri\u015f yap\u0131l\u0131rsa bundan sonra oday\u0131 olu\u015fturan client ilk giri\u015f yapan oldu\u011fundan dolay\u0131 mesaj bu client taraf\u0131nda tetiklenmektedir.\n<\/li>\n
Including Sender<\/strong>
\nMesaj\u0131 g\u00f6nderende dahil o odadaki herkese g\u00f6nderilir. “io” ya da “namespace” sabiti \u00fczerinden ger\u00e7ekle\u015ftirilir.<\/p>\n
\r\nxnamespace.on("connection", socket => {\r\n console.log("connect xnamespace");\r\n socket.on("disconnect", () => console.log("disconnect xnamespace"));\r\n socket.on("login", data => {\r\n socket.join(data, () => {\r\n console.log(`Connected. Root Name : ${data}`);\r\n });\r\n xnamespace.in(data).emit("message", data);\r\n \/\/Ya da\r\n xnamespace.to(data).emit("message", data);\r\n });\r\n});\r\n<\/pre>\n
$\"Node.js$ <\/a><\/p>\n
G\u00f6r\u00fcld\u00fc\u011f\u00fc \u00fczere odaya ba\u011fl\u0131 olan t\u00fcm clientlara(g\u00f6nderende dahil) ilgili mesaj g\u00f6sterilmektedir.\n<\/li>\n<\/ul>\n
Ve son olarak a\u015fa\u011f\u0131daki \u00f6zet bilgiyle i\u00e7eri\u011fimizi noktalayal\u0131m.<\/p>\n
Room \u00f6rneklendirmelerinden anla\u015f\u0131laca\u011f\u0131 \u00fczere, bir client ayn\u0131 anda birden fazla room’da bulunabilir…<\/p><\/blockquote>\n
\u0130lgilenenlerin faydalanmas\u0131 dile\u011fiyle…<\/p>\n
Sonraki yaz\u0131lar\u0131mda g\u00f6r\u00fc\u015fmek \u00fczere…
\n\u0130yi \u00e7al\u0131\u015fmalar…<\/p>\n","protected":false},"excerpt":{"rendered":"
Merhaba, Bu i\u00e7eri\u011fimizde Node.js mimarisinde websocket teknolojisi terminolojisinden olan Namespace ve Room kavramlar\u0131na de\u011finece\u011fiz. Asl\u0131nda bu kavramlar, i\u015flevsel olarak kelime bazl\u0131 her ne kadar anla\u015f\u0131labilir olsalarda, genel programlama bilgisi olan herkes taraf\u0131ndan da terminolojik...<\/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":[2729,2730,2147,2715,2725,2726,2727,2728],"class_list":["post-10124","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-node-js","tag-expect-sender","tag-including-sender","tag-node-js","tag-node-js-websocket","tag-node-js-websocket-namespace","tag-node-js-websocket-room","tag-websocket-namespace","tag-websocket-room"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/10124","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=10124"}],"version-history":[{"count":27,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/10124\/revisions"}],"predecessor-version":[{"id":10156,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/10124\/revisions\/10156"}],"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=10124"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/categories?post=10124"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/tags?post=10124"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}