<\/div>\n
Merhaba,<\/p>\n
Web socket \u00e7al\u0131\u015fmalar\u0131nda yap\u0131sal olarak t\u00fcm s\u00fcre\u00e7teki sorumluluk Node.js taraf\u0131ndan olu\u015fturulan server’da \u00fcstlenilmi\u015ftir. \u0130\u015fte bu s\u00fcre\u00e7te server’da ba\u011flant\u0131yla ilgili t\u00fcm olas\u0131 durumlar(connect\/disconnect vs.) ceyran etti\u011finde al\u0131nacak refleksleri serverdan ba\u011f\u0131ms\u0131z bir \u015fekilde client tabanl\u0131 belirleyebilmekteyiz. Bu i\u00e7eri\u011fimizde web socket \u00e7al\u0131\u015fmalar\u0131nda client tabanl\u0131 \u00f6zelle\u015ftirmeleri inceliyor olaca\u011f\u0131z…<\/p>\n
Backend<\/h3>\n
\u0130lk olarak \u00e7al\u0131\u015fmam\u0131z\u0131 \u00f6rneklendirece\u011fimiz backendi a\u015fa\u011f\u0131daki gibi geli\u015ftirelim;<\/p>\n
\r\nconst socket = require("socket.io");\r\nconst http = require("http");\r\n\r\nconst server = http.createServer((request, response) => response.end("..."));\r\nconst io = socket.listen(server.listen(5000, () => console.log("Starting...")));\r\n\r\nio.on("connection", socket => {\r\n    console.log(`${socket.id} connected...`);\r\n    socket.on("disconnect", () => console.log(`${socket.id} disconnected...`));\r\n});\r\n<\/pre>\nClient<\/h3>\nArd\u0131ndan client olarak kullanaca\u011f\u0131m\u0131z sayfam\u0131z\u0131n temellerini a\u015fa\u011f\u0131daki gibi atal\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        $(() => {\r\n            const socket = io.connect("http:\/\/localhost:5000\/");\r\n        });\r\n    <\/script>\r\n<\/head>\r\n<body>\r\n    <ul id="message">\r\n    <\/ul>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n\u015eimdi ilk olarak ba\u011flant\u0131 prosed\u00fcrlerini ele alarak as\u0131l konumuza ba\u015flayal\u0131m;<\/p>\n
Client Tabanl\u0131 Ba\u011flant\u0131 Prosed\u00fcrleri<\/h4>\n\nreconnectionAttempts<\/strong>
\nWeb sokete yap\u0131lan ba\u011flant\u0131 talebinin ba\u015far\u0131s\u0131z oldu\u011fu durumlarda ka\u00e7 kez yeniden ba\u011flant\u0131 denemesi yap\u0131laca\u011f\u0131n\u0131 belirtmektedir.<\/p>\n\r\n        $(() => {\r\n            const socket = io.connect("http:\/\/localhost:5000\/", {\r\n                reconnectionAttempts: 2\r\n            });\r\n        });\r\n<\/pre>\n<\/a>
\nEkran g\u00f6r\u00fcnt\u00fcs\u00fcnden de anla\u015f\u0131laca\u011f\u0131 \u00fczere belirtilen de\u011fer kadar tekrar connection denenecek, aksi halde tekrar sona erecektir.
\nVarsay\u0131lan olarak bir s\u0131n\u0131r tan\u0131mlanmad\u0131\u011f\u0131ndan ekstra bildirim yap\u0131lmad\u0131\u011f\u0131 s\u00fcrece sonsuza kadar connection denemesi yap\u0131lacakt\u0131r.\n<\/li>\n
reconnectionDelay<\/strong>
\nBa\u011flant\u0131 talebinin ba\u015far\u0131s\u0131z oldu\u011fu durumlarda saniye cinsinden ne kadar s\u00fcrede bir connection tekrar\u0131 yap\u0131laca\u011f\u0131n\u0131 belirlemektedir.<\/p>\n\r\n        $(() => {\r\n            const socket = io.connect("http:\/\/localhost:5000\/", {\r\n                reconnectionDelay: 1,\r\n            });\r\n        });\r\n<\/pre>\n<\/a>\n<\/li>\n
reconnection<\/strong>
\nSocket’e yap\u0131lan ilk ba\u011flant\u0131 talebinde bir ba\u015far\u0131s\u0131zl\u0131k s\u00f6z konusuysa tekrar connectionlar\u0131n yap\u0131l\u0131p yap\u0131lmayaca\u011f\u0131n\u0131 belirleyen \u00f6zelliktir. “true” ya da “false” de\u011feri al\u0131r.<\/p>\n\r\n        $(() => {\r\n            const socket = io.connect("http:\/\/localhost:5000\/", {\r\n                reconnection: false\r\n            });\r\n        });\r\n<\/pre>\n<\/a>\n<\/li>\n<\/ul>\n
Durumsal Fonksiyonlar<\/h4>\nWeb socket yap\u0131lanmas\u0131nda; ba\u015far\u0131s\u0131z ba\u011flant\u0131 durumlar\u0131nda yahut tekrar ba\u011flant\u0131 kurma \u00e7al\u0131\u015fmalar\u0131nda s\u00fcre\u00e7te hangi aksiyonun ceyran etti\u011fini takip edebilmek i\u00e7in sistem taraf\u0131ndan “emit” olarak tan\u0131mlanm\u0131\u015f \u00f6zel fonksiyonlar tetiklenmektedir. \u015eimdi gelin bu fonksiyonlar\u0131 inceleyelim;<\/p>\n\nreconnect_error<\/strong>
\nBa\u011flant\u0131 ba\u015far\u0131s\u0131zsa tetiklenecek fonksiyondur.<\/p>\n\r\n        $(() => {\r\n            const socket = io.connect("http:\/\/localhost:5000\/", {\r\n                reconnectionAttempts: 10,\r\n                reconnectionDelay: 1,\r\n                reconnection: true\r\n            });\r\n            socket.on("reconnect_error", () => {\r\n                alert("Hata al\u0131nd\u0131...");\r\n            });\r\n        });\r\n<\/pre>\n<\/a>\n<\/li>\n
reconnect_attempt<\/strong>
\nBa\u015far\u0131s\u0131z ba\u011flant\u0131 sonras\u0131 tekrar talepte bulunulan ba\u011flant\u0131 esnas\u0131nda tetiklenen fonksiyondur.<\/p>\n\r\n        $(() => {\r\n            const socket = io.connect("http:\/\/localhost:5000\/", {\r\n                reconnectionAttempts: 10,\r\n                reconnectionDelay: 1,\r\n                reconnection: true\r\n            });\r\n            socket.on("reconnect_attempt", () => {\r\n                alert("Tekrar ba\u011flan\u0131l\u0131yor...");\r\n            });\r\n        });\r\n<\/pre>\n<\/a>\n<\/li>\n
reconnect<\/strong>
\nBa\u015far\u0131s\u0131z ba\u011flant\u0131 sonras\u0131 tekrar talepte bulunulan ba\u011flant\u0131n\u0131n ba\u015far\u0131l\u0131 oldu\u011fu durumda tetiklenir.<\/p>\n\r\n        $(() => {\r\n            const socket = io.connect("http:\/\/localhost:5000\/", {\r\n                reconnectionAttempts: 10,\r\n                reconnectionDelay: 1,\r\n                reconnection: true\r\n            });\r\n            socket.on("reconnect", () => {\r\n                alert("Ba\u011flant\u0131 ba\u015far\u0131l\u0131...");\r\n            });\r\n        });\r\n<\/pre>\n<\/a>\n<\/li>\n<\/ul>\n
Server\u0131n opsiyonel durumlar\u0131na nazaran client tabanl\u0131 al\u0131nabilecek reflekslerimizi incelemi\u015f olduk. \u015eimdi a\u015fa\u011f\u0131daki \u00f6rnek \u00e7al\u0131\u015fmay\u0131 inceleyerek, konumuzu noktalayal\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        $(() => {\r\n            const socket = io.connect("http:\/\/localhost:5000\/", {\r\n                reconnectionDelay: 1,\r\n                reconnection: true\r\n            });\r\n\r\n            socket.on("reconnect_error", () => {\r\n                $("#message").prepend(`<li style="color:red;"><strong>Hata al\u0131nd\u0131...<\/strong><\/li>`);\r\n            });\r\n            socket.on("reconnect_attempt", () => {\r\n                $("#message").prepend(`<li style="color:blue;"><strong>Yeniden ba\u011flan\u0131l\u0131yor...<\/strong><\/li>`);\r\n            });\r\n            socket.on("reconnect", () => {\r\n                $("#message").prepend(`<li style="color:green;"><strong>Ba\u011flant\u0131 ba\u015far\u0131l\u0131...<\/strong><\/li>`);\r\n            });\r\n        });\r\n    <\/script>\r\n<\/head>\r\n<body>\r\n    <ul id="message">\r\n    <\/ul>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n<\/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, Web socket \u00e7al\u0131\u015fmalar\u0131nda yap\u0131sal olarak t\u00fcm s\u00fcre\u00e7teki sorumluluk Node.js taraf\u0131ndan olu\u015fturulan server’da \u00fcstlenilmi\u015ftir. \u0130\u015fte bu s\u00fcre\u00e7te server’da ba\u011flant\u0131yla ilgili t\u00fcm olas\u0131 durumlar(connect\/disconnect vs.) ceyran etti\u011finde al\u0131nacak refleksleri serverdan ba\u011f\u0131ms\u0131z bir \u015fekilde client tabanl\u0131...<\/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,2797,2802,2801,2800,2799,2795,2798,2796],"class_list":["post-10632","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-node-js","tag-node-js","tag-node-js-socket-io","tag-reconnect","tag-reconnect_attempt","tag-reconnect_error","tag-reconnection","tag-reconnectionattempts","tag-reconnectiondelay","tag-socket-io"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/10632","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=10632"}],"version-history":[{"count":28,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/10632\/revisions"}],"predecessor-version":[{"id":10671,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/10632\/revisions\/10671"}],"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=10632"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/categories?post=10632"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/tags?post=10632"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}