<\/div>\n

Merhaba,<\/p>\n

Bundan y\u0131llar y\u0131llar \u00f6ncesine kadar(yani ge\u00e7en y\u0131la kadar)<\/span> web yap\u0131lanmalar\u0131nda ger\u00e7ek zamanl\u0131 i\u015fler yap\u0131laca\u011f\u0131 zaman Ajax teknolojisi kullan\u0131larak, belli aral\u0131klarla 1 saniye – milisaniye<\/span> yap\u0131lan sorgular neticesinde sanki ger\u00e7ek zamanl\u0131 bir sistem izlenimi veren yap\u0131lar \u00fczerinde \u00e7al\u0131\u015f\u0131yorduk. Dolay\u0131s\u0131yla sistemin canl\u0131l\u0131k durumunu kusursuz sa\u011flayabilmek i\u00e7in Backend’e yap\u0131lacak sorgu aral\u0131\u011f\u0131n\u0131 m\u00fcmk\u00fcn mertebe azaltarak, sistemin kullan\u0131c\u0131ya d\u00f6n\u00fck i\u015fleyi\u015finde ger\u00e7ek zamanl\u0131l\u0131k \u00f6zelli\u011fini artt\u0131rmay\u0131 tercih ederdik. Hal b\u00f6yleyken, mikro aral\u0131klarla yap\u0131lan her bir talep neticesinde bilan\u00e7o bizlere y\u00fcksek maliyet ve performans kayb\u0131 olarak yans\u0131maktayd\u0131. Vee tabi t\u00fcm bu s\u00fcre\u00e7 Http protokol\u00fc \u00fczerinden ger\u00e7ekle\u015fmekte ve yap\u0131lan her bir talebe kar\u015f\u0131l\u0131k ihtiya\u00e7 olmaks\u0131z\u0131n bir cevap al\u0131nmaktayd\u0131.<\/p>\n

Websoket teknolojisi ile TCP ba\u011flant\u0131s\u0131 \u00fczerinden \u00e7ift y\u00f6nl\u00fc mesaj g\u00f6nderebilme \u00f6zelli\u011fi sayesinde, backende micro aral\u0131klarla yap\u0131lan talep yo\u011funlu\u011fu neticesinde \u00f6denen y\u00fcksek maliyetten kurtulunmakta ve ger\u00e7ek zamanl\u0131 uygulamalar\u0131 d\u00f6rt d\u00f6rtl\u00fck bir \u015fekilde uygulayabilme \u015fans\u0131 elde etmekteyiz.<\/p>\n

Evet… Websoket teknolojisi; s\u00fcrekli a\u00e7\u0131k olan bir TCP ba\u011flant\u0131s\u0131 \u00fczerinden \u00e7ift y\u00f6nl\u00fc mesaj g\u00f6nderebilme i\u015flemini yapabilen bir protokold\u00fcr. Bu a\u00e7\u0131k TCP protokol\u00fc \u00fczerinden taraflardan isteyen istedi\u011fine mesaj g\u00f6nderebilmektedir ve HTTP protokol\u00fcnde oldu\u011fu gibi g\u00f6nderilen mesajlara cevap verme zorunlulu\u011fu bulunmamaktad\u0131r. O y\u00fczden burada “talep(request)” \/ “cevap(response)” terminolojisinden ziyade sadece “mesaj\/message\/data” terminolojisi tercih edilmektedir.<\/p>\n

$\"HTTP\/REST$ <\/a>

HTTP\/REST Request<\/p><\/div>\n

Yukar\u0131daki \u015femadan HTTP\/REST Request i\u015flevselli\u011fini incelerseniz e\u011fer her bir requeste kar\u015f\u0131l\u0131k bir response oldu\u011funu g\u00f6receksiniz. HTTP protokol\u00fcnde requeste kar\u015f\u0131l\u0131k d\u00f6n\u00fclecek bir data olsun olmas\u0131n bir response d\u00f6n\u00fclmesi mecburidir.<\/p>\n

$\"Websocket\"$ <\/a>

Websocket<\/p><\/div>\n

Websocket \u015femas\u0131n\u0131 incelerseniz e\u011fer a\u00e7\u0131k bir TCP ba\u011flant\u0131s\u0131 \u00fczerinden t\u00fcm s\u00fcre\u00e7 i\u015flemektedir. Handshake(el s\u0131k\u0131\u015fma\/tokala\u015fma) i\u015fleminin ard\u0131ndan Acknowledgement(onay\/tasdik) yap\u0131ld\u0131ktan sonra Bi-directional message(\u00e7ift y\u00f6nl\u00fc mesajla\u015fma) s\u00fcreci ba\u015flamaktad\u0131r. Taa ki connection end olana kadar.<\/p>\n

K\u0131saca Websocket teknolojisinde;<\/p>\n

Bir istekte bulunuldu\u011fu zaman cevap beklenilmemektedir. Tabi iste\u011fe ya da ihtiyaca g\u00f6re cevapta d\u00f6n\u00fclebilir.<\/li>\n

Client server’a, server client’a veri g\u00f6nderebilir. \u00c7ift y\u00f6nl\u00fc mesajla\u015fma.<\/li>\n

Server, gelen verileri abonelere iletir.<\/li>\n

\u0130ki taraf g\u00f6nderdi\u011fi mesajlara cevap beklememektedir.<\/li>\n<\/ul>\n
Socket.IO Mod\u00fcl\u00fc<\/h3>\n
Node.js’de websocket i\u015flemleri i\u00e7in kullanaca\u011f\u0131m\u0131z mod\u00fcl socket.io mod\u00fcl\u00fcd\u00fcr. Socket.IO; websocket ile ilgili protokollerin tamam\u0131n\u0131 (XHR, Long Polling, Websocket) standartla\u015ft\u0131ran ve sabit bir kullan\u0131m sunan websocket em\u00fclat\u00f6r\u00fcd\u00fcr.<\/p>\n
Hoca em\u00fclat\u00f6r ne la?<\/strong> diye soranlar\u0131n\u0131za genel k\u00fclt\u00fcr mahiyetinde a\u015fa\u011f\u0131daki a\u00e7\u0131klamay\u0131 sunal\u0131m.<\/p>\n
Bir sistemin ba\u015fka bir sistem \u00fczerinde \u00e7al\u0131\u015ft\u0131r\u0131lmas\u0131na em\u00fclasyon, bu i\u015flevi yapan yaz\u0131l\u0131mlara em\u00fclat\u00f6r denir.<\/p><\/blockquote>\n
Socket.IO mod\u00fcl\u00fcn\u00fcn Node.js ile kusursuz bir kullan\u0131m\u0131 vard\u0131r.<\/p>\n
\u0130lgili mod\u00fcl\u00fc projenize entegre edebilmek i\u00e7in a\u015fa\u011f\u0131daki kodu \u00e7al\u0131\u015ft\u0131rman\u0131z yeterlidir.<\/p>\n
\r\nnpm i socket.io --save\r\n<\/pre>\nServer ile Client Aras\u0131nda TCP Ba\u011flant\u0131s\u0131 Olu\u015fturmak<\/h3>\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\n\/\/1234 portuna gelecek olan t\u00fcm istekleri socket taraf\u0131ndan dinlememiz gerekmektedir.\r\nconst io = socket.listen(server);\r\n\/\/socket taraf\u0131ndan ilgili server dinlenmeye al\u0131nm\u0131\u015ft\u0131r. Dolay\u0131s\u0131yla gelecek olan t\u00fcm talepler socket taraf\u0131ndan yakalanacakt\u0131r.\r\n\/\/Bu \u015fekilde her talep neticesinde server ile client aras\u0131nda aktif bir TCP ba\u011flant\u0131s\u0131 olu\u015fturulacakt\u0131r.\r\n<\/pre>\n
\u00d6nceki yaz\u0131lar\u0131m\u0131zda kaleme ald\u0131\u011f\u0131m\u0131z Node.js\u2019de Http Sunucusu Olu\u015ftural\u0131m<\/a> ba\u015fl\u0131kl\u0131 makalemizde belirtti\u011fimiz \u00fczere bir server olu\u015fturmaktay\u0131z. Olu\u015fturulan bu server’a kar\u015f\u0131 olan t\u00fcm talepleri, ba\u011flant\u0131lar\u0131 vs. dinleyebilmek i\u00e7in “socket.io” mod\u00fcl\u00fc taraf\u0131ndan ilgili server dinlenmeye al\u0131nmaktad\u0131r. Bu dinleme neticesinde ilgili server ile client aras\u0131nda aktif bir TCP ba\u011flant\u0131s\u0131 olu\u015fturulmaktad\u0131r.<\/p>\n
Server’a bir client taraf\u0131ndan ba\u011flant\u0131 sa\u011fland\u0131\u011f\u0131 zaman “connection” isimli bir event tetiklenecektir. Dolay\u0131s\u0131yla bu event client’\u0131n t\u00fcm bilgilerini beraberinde getirecektir.<\/p>\n
\r\nio.sockets.on("connection", socket => {\r\n \/\/Server'a bir client ba\u011fland\u0131\u011f\u0131 zaman "connection" isimli olay tetiklenecektir. socket parametresi ise ba\u011flant\u0131 yapan client'\u0131n bilgisini i\u00e7ermektedir.\r\n console.log("User connection", socket.client.id);\r\n});\r\n<\/pre>\n
Bu noktadan itibaren server k\u0131sm\u0131n\u0131n in\u015fas\u0131 tamamd\u0131r. \u015eimdi bir client tasarlayal\u0131m ve a\u00e7m\u0131\u015f oldu\u011fumuz bu TCP ba\u011flant\u0131s\u0131na connect edelim. Bizler bu i\u00e7eri\u011fimizde client’\u0131 lalettayin bir html sayfas\u0131 olarak tasarlayaca\u011f\u0131z.<\/p>\n
\r\n-- client.html --\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n <script src="http:\/\/localhost:1234\/socket.io\/socket.io.js"><\/script>\r\n <script>\r\n const socket = io.connect("http:\/\/localhost:1234");\r\n <\/script>\r\n<\/head>\r\n<body>\r\n <p>\r\n Merhaba, WebSocket\r\n <\/p>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
Client taraf\u0131nda dikkat edilmesi gereken husus “socket.io.js” isimli JavaScript k\u00fct\u00fcphanesinin kaynak olarak eklenmesidir. \u0130lgili dosyaya, \u00e7al\u0131\u015fma yapt\u0131\u011f\u0131n\u0131z domain uzant\u0131s\u0131 \u00fczerinden “http:\/\/***\/socket.io\/socket.io.js” kombinasyonu arac\u0131l\u0131\u011f\u0131yla eri\u015febilirsiniz.<\/p>\n
Yukar\u0131daki kod blo\u011funa dikkat ederseniz e\u011fer server’da belirtti\u011fimiz “1234” portuna yani “http:\/\/localhost:1234” adresine bir connect ger\u00e7ekle\u015ftirilmektedir. Burada “io.connect()” fonksiyonuna “socket.io.js” k\u00fct\u00fcphanesi \u00fczerinden eri\u015filmektedir.<\/p>\n
\u015eimdi bu html sayfas\u0131n\u0131 a\u00e7t\u0131\u011f\u0131m\u0131z zaman, server’\u0131 takip eden socket devreye girecek ve a\u00e7\u0131k olan TCP ba\u011flant\u0131s\u0131 \u00fczerinden server’a mesaj g\u00f6nderecektir.<\/p>\n
$\"Node.js$ <\/a>
\nG\u00f6r\u00fcld\u00fc\u011f\u00fc \u00fczere…<\/p>\n
E\u011fer ki client ba\u011flant\u0131y\u0131 kestiyse yani sayfay\u0131 kapatt\u0131ysa “disconnect” olay\u0131 tetiklenecektir. Bu \u015fekilde server taraf\u0131ndan ilgili client’a ait ba\u011flant\u0131n\u0131n son buldu\u011funa dair bilgi edinilecektir.<\/p>\n
\r\nio.sockets.on("connection", socket => {\r\n console.log("User connection", socket.client.id);\r\n\r\n socket.on("disconnect", () => {\r\n console.log("User disconnect");\r\n });\r\n});\r\n<\/pre>\n
$\"Node.js$ <\/a>
\nYukar\u0131daki ekran g\u00f6r\u00fcnt\u00fcs\u00fcne dikkat ederseniz sayfay\u0131 yeniden y\u00fckledi\u011fimizde dahi \u00f6nce ba\u011flant\u0131y\u0131 kesecek ard\u0131ndan yeniden ba\u011flanacakt\u0131r. Bu detay\u0131da g\u00f6zden ka\u00e7\u0131rmaman\u0131z\u0131 \u00f6neririm…<\/p>\n
Client ile Server’\u0131n Haberle\u015fmesi<\/h3>\n
Client ile server haberle\u015fmesinde temel esas, iki taraftan birinin “emit” fonksiyonu ile olay yaratmas\u0131 ve di\u011ferinin “on” fonksiyonu ile yarat\u0131lan olay\u0131 kar\u015f\u0131lamas\u0131 \u00fczerine kuruludur.<\/p>\n
\u00d6rne\u011fin;
\nClient’tan server’a haber g\u00f6nderilecekse;<\/p>\n
\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n <script src="http:\/\/localhost:1234\/socket.io\/socket.io.js"><\/script>\r\n <script>\r\n const socket = io.connect("http:\/\/localhost:1234");\r\n\r\n socket.emit("sendMessageToServer");\r\n \/\/Client'tan server'a mesaj g\u00f6nderirken burada "sendMessageToServer" ad\u0131nda bir olay yarat\u0131lmaktad\u0131r. Server'da bu olay\u0131 kar\u015f\u0131layacakt\u0131r.\r\n <\/script>\r\n<\/head>\r\n<body>\r\n <p>\r\n Merhaba, WebSocket\r\n <\/p>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
G\u00f6r\u00fcld\u00fc\u011f\u00fc gibi client’ta “emit” fonksiyonu ile “sendMessageToServer” ad\u0131nda bir olay yarat\u0131lmaktad\u0131r. \u015eimdi server’da bu olay\u0131 kar\u015f\u0131layal\u0131m.<\/p>\n
\r\nio.sockets.on("connection", socket => {\r\n console.log("User connection", socket.client.id);\r\n\r\n socket.on("disconnect", () => {\r\n console.log("User disconnect");\r\n });\r\n\r\n socket.on("sendMessageToServer", () => {\r\n console.log("sendMessageToServer tetiklendi.");\r\n });\r\n});\r\n<\/pre>\n
G\u00f6rd\u00fc\u011f\u00fcn\u00fcz \u00fczere server’da ise “on” fonksiyonu ile “sendMessageToServer” olay\u0131 kar\u015f\u0131lanm\u0131\u015ft\u0131r.
\n $\"Node.js$ <\/a><\/p>\n
Server’dan client’a haber g\u00f6nderilecekse;<\/p>\n
\r\nio.sockets.on("connection", socket => {\r\n console.log("User connection", socket.client.id);\r\n\r\n socket.on("disconnect", () => {\r\n console.log("User disconnect");\r\n });\r\n\r\n socket.emit("sendMessageToClient");\r\n});\r\n<\/pre>\n
“sendMessageToClient” isimli bir olay olu\u015fturulmu\u015ftur. \u015eimdi client bu olaya “on” fonksiyonu ile ba\u011flanacakt\u0131r.<\/p>\n
\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n <script src="http:\/\/localhost:1234\/socket.io\/socket.io.js"><\/script>\r\n <script>\r\n const socket = io.connect("http:\/\/localhost:1234");\r\n socket.on("sendMessageToClient", () => {\r\n \/\/Server'da olu\u015fturulan olay clientda on fonksiyonuyla kar\u015f\u0131lanm\u0131\u015ft\u0131r.\r\n alert("sendMessageToClient tetiklendi.");\r\n });\r\n <\/script>\r\n<\/head>\r\n<body>\r\n <p>\r\n Merhaba, WebSocket\r\n <\/p>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
$\"Node.js$ <\/a><\/p>\n
Burada son kez hat\u0131rlatma mahiyetinde HTTP protokol\u00fc de\u011fil websocket kulland\u0131\u011f\u0131m\u0131zdan dolay\u0131 istek de\u011fil mesaj g\u00f6ndermekteyiz ve her g\u00f6nderilen mesaj neticesinde cevap almak zorunda de\u011filiz.<\/p>\n
Haberle\u015fme Esnas\u0131nda Parametre G\u00f6nderme<\/h3>\n
Haberle\u015fme s\u00fcrecinde iki tarafta birbirlerine parametre g\u00f6nderebilirler. Tabi bunun i\u00e7in olay yaratan taraf\u0131n yani “emit” fonksiyonunu kullanan taraf\u0131n ilgili fonksiyona ikinci parametreyi vermesi yeterlidir.<\/p>\n
\u015e\u00f6yle ki;
\nClient’tan, server’a parametre g\u00f6nderilecekse e\u011fer;<\/p>\n
\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n <script src="http:\/\/localhost:1234\/socket.io\/socket.io.js"><\/script>\r\n <script>\r\n const socket = io.connect("http:\/\/localhost:1234");\r\n\r\n socket.emit("sendMessageToServer", 5);\r\n <\/script>\r\n<\/head>\r\n<body>\r\n <p>\r\n Merhaba, WebSocket\r\n <\/p>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
G\u00f6r\u00fcld\u00fc\u011f\u00fc \u00fczere “emit” fonksiyonunun ikinci parametresine server’a g\u00f6nderilecek parametrenin de\u011feri verilmektedir. Server’\u0131n bu parametre de\u011ferini yakalayabilmesi i\u00e7in “on” fonksiyonunun callback fonksiyonuna belirtece\u011fi parametre i\u015f g\u00f6recektir.<\/p>\n
\r\nio.sockets.on("connection", socket => {\r\n console.log("User connection", socket.client.id);\r\n\r\n socket.on("disconnect", () => {\r\n console.log("User disconnect");\r\n });\r\n\r\n socket.on("sendMessageToServer", data => console.log("G\u00f6nderilen parametre : " + data));\r\n});\r\n<\/pre>\n
$\"Node.js$ <\/a><\/p>\n
Benzer mant\u0131kla;
\nServer’dan, client’a parametre g\u00f6nderilecekse e\u011fer;<\/p>\n
\r\nio.sockets.on("connection", socket => {\r\n console.log("User connection", socket.client.id);\r\n\r\n socket.on("disconnect", () => {\r\n console.log("User disconnect");\r\n });\r\n\r\n socket.emit("sendMessageToClient", 5);\r\n});\r\n<\/pre>\n
\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n <script src="http:\/\/localhost:1234\/socket.io\/socket.io.js"><\/script>\r\n <script>\r\n const socket = io.connect("http:\/\/localhost:1234");\r\n\r\n socket.emit("sendMessageToServer", 5);\r\n socket.on("sendMessageToClient", data => alert("G\u00f6nderilen parametre : " + data));\r\n <\/script>\r\n<\/head>\r\n<body>\r\n <p>\r\n Merhaba, WebSocket\r\n <\/p>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
$\"Node.js$ <\/a><\/p>\n
Bu sat\u0131rdan itibaren, Node.js’de ger\u00e7ek zamanl\u0131 uygulamalar\u0131n websocket ile nas\u0131l temellendirildi\u011fine ve client ile server aras\u0131ndaki haberle\u015fmenin nas\u0131l yap\u0131ld\u0131\u011f\u0131na dair teferruatl\u0131 de\u011finmi\u015f bulunmaktay\u0131z. Sonraki yaz\u0131lar\u0131m\u0131zda Websocket kullan\u0131m\u0131na dair daha detayl\u0131 i\u00e7erikler ile kar\u015f\u0131n\u0131zda olaca\u011f\u0131m.<\/p>\n
O halde \u015fimdilik g\u00f6r\u00fc\u015fmek \u00fczere diyelim…<\/p>\n
\u0130lgilenenlerin faydalanmas\u0131 dile\u011fiyle…
\n\u0130yi \u00e7al\u0131\u015fmalar…<\/p>\n","protected":false},"excerpt":{"rendered":"
Merhaba, Bundan y\u0131llar y\u0131llar \u00f6ncesine kadar(yani ge\u00e7en y\u0131la kadar) web yap\u0131lanmalar\u0131nda ger\u00e7ek zamanl\u0131 i\u015fler yap\u0131laca\u011f\u0131 zaman Ajax teknolojisi kullan\u0131larak, belli aral\u0131klarla 1 saniye – milisaniye yap\u0131lan sorgular neticesinde sanki ger\u00e7ek zamanl\u0131 bir sistem izlenimi...<\/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":[2716,2717,645,2147,2720,2715,2721,2719,2713,2714,2718],"class_list":["post-10046","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-node-js","tag-acknowledgement","tag-bi-directional-message","tag-long-polling","tag-node-js","tag-node-js-using-websocket","tag-node-js-websocket","tag-node-js-websocket-kullanimi","tag-socket-io-js","tag-websocket","tag-websocket-tcp","tag-xhr"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/10046","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=10046"}],"version-history":[{"count":48,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/10046\/revisions"}],"predecessor-version":[{"id":10102,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/10046\/revisions\/10102"}],"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=10046"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/categories?post=10046"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/tags?post=10046"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}