Sekme A - Oturum Kapatma<\/title>\n<\/head>\n<body>\n <h2>Sekme A: Oturum Kapatma<\/h2>\n <p>Bu sekmede oturum kapatma i\u015flemini sim\u00fcle edin.<\/p>\n <button id=\"logoutButton\">Oturumu Kapat<\/button>\n\n <script>\n const authChannel = new BroadcastChannel('user_auth_channel');\n const logoutButton = document.getElementById('logoutButton');\n\n logoutButton.addEventListener('click', () => {\n \/\/ Sunucuya oturum kapatma iste\u011fi g\u00f6nderildi\u011fini varsayal\u0131m\n console.log('Oturum kapat\u0131l\u0131yor...');\n \/\/ Di\u011fer sekmelere oturum kapatma mesaj\u0131 g\u00f6nder\n authChannel.postMessage({ type: 'logout', message: 'Kullan\u0131c\u0131 oturumu kapat\u0131ld\u0131.' });\n alert('Oturumunuz kapat\u0131ld\u0131. Di\u011fer sekmeler de bilgilendirildi.');\n \/\/ Kullan\u0131c\u0131y\u0131 oturum a\u00e7ma sayfas\u0131na y\u00f6nlendir\n \/\/ window.location.href = '\/login';\n authChannel.close(); \/\/ Kanal\u0131 kapat\n });\n\n \/\/ Kendi g\u00f6nderdi\u011fimiz mesajlar\u0131 almay\u0131z, ancak dinleyiciyi burada da tutabiliriz\n authChannel.onmessage = (event) => {\n console.log('Sekme A mesaj ald\u0131:', event.data);\n };\n <\/script>\n<\/body>\n<\/html><\/code><\/pre>\n<p><strong>Sekme B (Oturumu Dinleyen Sekme):<\/strong><\/p>\n<pre><code class=\"language-html\"><!DOCTYPE html>\n<html lang=\"tr\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Sekme B - Oturum Dinleyici<\/title>\n<\/head>\n<body>\n <h2>Sekme B: Oturum Dinleyici<\/h2>\n <p>Bu sekme, di\u011fer sekmelerdeki oturum de\u011fi\u015fikliklerini dinler.<\/p>\n <p id=\"status\">Oturum durumu: Aktif<\/p>\n\n <script>\n const authChannel = new BroadcastChannel('user_auth_channel');\n const statusElement = document.getElementById('status');\n\n authChannel.onmessage = (event) => {\n console.log('Sekme B mesaj ald\u0131:', event.data);\n if (event.data && event.data.type === 'logout') {\n statusElement.textContent = 'Oturum durumu: Kapat\u0131ld\u0131! Yeniden giri\u015f yapmal\u0131s\u0131n\u0131z.';\n alert('Oturumunuz ba\u015fka bir sekmede kapat\u0131ld\u0131.');\n \/\/ \u0130ste\u011fe ba\u011fl\u0131 olarak kullan\u0131c\u0131y\u0131 oturum a\u00e7ma sayfas\u0131na y\u00f6nlendir\n \/\/ window.location.href = '\/login';\n authChannel.close(); \/\/ Kanal\u0131 kapat\n }\n };\n\n window.addEventListener('beforeunload', () => {\n authChannel.close(); \/\/ Sekme kapat\u0131l\u0131rken kanal\u0131 kapat\n });\n <\/script>\n<\/body>\n<\/html><\/code><\/pre>\n<p>Bu \u00f6rnekte, Sekme A’daki “Oturumu Kapat” d\u00fc\u011fmesine bas\u0131ld\u0131\u011f\u0131nda, <code>user_auth_channel<\/code> \u00fczerinden bir mesaj yay\u0131nlan\u0131r. Sekme B, bu kanal\u0131 dinledi\u011fi i\u00e7in mesaj\u0131 al\u0131r ve kullan\u0131c\u0131ya oturumunun kapat\u0131ld\u0131\u011f\u0131na dair bir bildirim g\u00f6sterir.<\/p>\n<h4>Veri Senkronizasyonu<\/h4>\n<p>Bir e-ticaret uygulamas\u0131nda, bir \u00fcr\u00fcn\u00fc favorilere ekledi\u011finizde, di\u011fer sekmelerdeki favori say\u0131s\u0131n\u0131 g\u00fcncelleyelim.<\/p>\n<p><strong>Sekme A (Favori Ekleme):<\/strong><\/p>\n<pre><code class=\"language-html\"><!DOCTYPE html>\n<html lang=\"tr\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Sekme A - Favori Ekle<\/title>\n<\/head>\n<body>\n <h2>Sekme A: Favori Ekle<\/h2>\n <p>Bir \u00fcr\u00fcn\u00fcn favori durumunu de\u011fi\u015ftirin.<\/p>\n <button id=\"toggleFavorite\">Favorilere Ekle\/Kald\u0131r<\/button>\n <p>Mevcut Favori Say\u0131s\u0131: <span id=\"favoriteCount\">0<\/span><\/p>\n\n <script>\n const favoriteChannel = new BroadcastChannel('favorite_updates');\n const toggleFavoriteButton = document.getElementById('toggleFavorite');\n const favoriteCountSpan = document.getElementById('favoriteCount');\n\n let currentFavorites = 0; \/\/ Ba\u015flang\u0131\u00e7ta 0 favori oldu\u011funu varsayal\u0131m\n\n function updateFavoriteCount(count) {\n currentFavorites = count;\n favoriteCountSpan.textContent = currentFavorites;\n }\n\n toggleFavoriteButton.addEventListener('click', () => {\n const newCount = currentFavorites + (toggleFavoriteButton.textContent.includes('Ekle') ? 1 : -1);\n updateFavoriteCount(newCount);\n toggleFavoriteButton.textContent = newCount > 0 ? 'Favorilerden Kald\u0131r' : 'Favorilere Ekle';\n\n \/\/ Di\u011fer sekmelere favori say\u0131s\u0131n\u0131 g\u00fcncelleme mesaj\u0131 g\u00f6nder\n favoriteChannel.postMessage({\n type: 'favorite_count_update',\n count: newCount\n });\n console.log('Favori say\u0131s\u0131 g\u00fcncellendi ve yay\u0131nland\u0131:', newCount);\n });\n\n favoriteChannel.onmessage = (event) => {\n if (event.data && event.data.type === 'favorite_count_update') {\n console.log('Sekme A, di\u011fer sekmeden favori g\u00fcncellemesi ald\u0131:', event.data.count);\n updateFavoriteCount(event.data.count);\n }\n };\n\n window.addEventListener('beforeunload', () => favoriteChannel.close());\n <\/script>\n<\/body>\n<\/html><\/code><\/pre>\n<p><strong>Sekme B (Favori Say\u0131s\u0131 G\u00f6sterimi):<\/strong><\/p>\n<pre><code class=\"language-html\"><!DOCTYPE html>\n<html lang=\"tr\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Sekme B - Favoriler<\/title>\n<\/head>\n<body>\n <h2>Sekme B: Favori Say\u0131s\u0131<\/h2>\n <p>Di\u011fer sekmelerdeki favori g\u00fcncellemelerini takip edin.<\/p>\n <p>Mevcut Favori Say\u0131s\u0131: <span id=\"favoriteCount\">0<\/span><\/p>\n\n <script>\n const favoriteChannel = new BroadcastChannel('favorite_updates');\n const favoriteCountSpan = document.getElementById('favoriteCount');\n\n function updateFavoriteCount(count) {\n favoriteCountSpan.textContent = count;\n }\n\n \/\/ Ba\u015flang\u0131\u00e7ta veya sayfa y\u00fcklendi\u011finde favori say\u0131s\u0131n\u0131 sunucudan\/localStorage'dan \u00e7ekebiliriz.\n \/\/ \u015eimdilik 0 varsayal\u0131m.\n updateFavoriteCount(0);\n\n favoriteChannel.onmessage = (event) => {\n if (event.data && event.data.type === 'favorite_count_update') {\n console.log('Sekme B, di\u011fer sekmeden favori g\u00fcncellemesi ald\u0131:', event.data.count);\n updateFavoriteCount(event.data.count);\n }\n };\n\n window.addEventListener('beforeunload', () => favoriteChannel.close());\n <\/script>\n<\/body>\n<\/html><\/code><\/pre>\n<p>Bu \u00f6rnekte, Sekme A’daki d\u00fc\u011fmeye her bas\u0131ld\u0131\u011f\u0131nda, <code>favorite_updates<\/code> kanal\u0131 \u00fczerinden g\u00fcncel favori say\u0131s\u0131 yay\u0131nlan\u0131r. Sekme B, bu kanal\u0131 dinledi\u011fi i\u00e7in <code>favoriteCount<\/code> de\u011ferini an\u0131nda g\u00fcnceller.<\/p>\n<h4>Web Worker ile \u0130leti\u015fim<\/h4>\n<p>Ana i\u015f par\u00e7ac\u0131\u011f\u0131 ile bir Web Worker aras\u0131nda BroadcastChannel kullanarak mesajla\u015fma.<\/p>\n<p><strong>worker.js (Web Worker dosyas\u0131):<\/strong><\/p>\n<pre><code class=\"language-javascript\">\/\/ worker.js\nconst workerChannel = new BroadcastChannel('worker_communication_channel');\n\nworkerChannel.onmessage = (event) => {\n console.log('Worker, ana i\u015f par\u00e7ac\u0131\u011f\u0131ndan mesaj ald\u0131:', event.data);\n if (event.data && event.data.type === 'start_task') {\n const taskId = event.data.taskId;\n console.log(<code>Worker, g\u00f6revi ba\u015flat\u0131yor: ${taskId}<\/code>);\n \/\/ Yo\u011fun bir i\u015flem sim\u00fclasyonu\n let result = 0;\n for (let i = 0; i < 1000000000; i++) {\n result += i;\n }\n console.log(<code>Worker, g\u00f6revi tamamlad\u0131: ${taskId}, sonu\u00e7: ${result}<\/code>);\n workerChannel.postMessage({\n type: 'task_completed',\n taskId: taskId,\n result: result\n });\n }\n};\n\nworkerChannel.postMessage({ type: 'worker_ready', message: 'Worker haz\u0131r!' });\n\n\/\/ Worker kapat\u0131ld\u0131\u011f\u0131nda kanal\u0131 kapat\nself.addEventListener('close', () => {\n workerChannel.close();\n});\n\nconsole.log('Web Worker ba\u015flat\u0131ld\u0131.');<\/code><\/pre>\n<p><strong>index.html (Ana i\u015f par\u00e7ac\u0131\u011f\u0131):<\/strong><\/p>\n<pre><code class=\"language-html\"><!DOCTYPE html>\n<html lang=\"tr\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Web Worker ile BroadcastChannel<\/title>\n<\/head>\n<body>\n <h2>Web Worker ile BroadcastChannel \u0130leti\u015fimi<\/h2>\n <button id=\"startWorkerTask\">Worker G\u00f6revini Ba\u015flat<\/button>\n <p>Worker Durumu: <span id=\"workerStatus\">Bekleniyor...<\/span><\/p>\n <p>Sonu\u00e7: <span id=\"workerResult\"><\/span><\/p>\n\n <script>\n let myWorker;\n const workerChannel = new BroadcastChannel('worker_communication_channel');\n const workerStatusSpan = document.getElementById('workerStatus');\n const workerResultSpan = document.getElementById('workerResult');\n const startWorkerTaskButton = document.getElementById('startWorkerTask');\n\n if (window.Worker) {\n myWorker = new Worker('worker.js'); \/\/ Worker'\u0131 ba\u015flat\n workerStatusSpan.textContent = 'Worker ba\u015flat\u0131ld\u0131.';\n\n workerChannel.onmessage = (event) => {\n console.log('Ana i\u015f par\u00e7ac\u0131\u011f\u0131, worker\\'dan mesaj ald\u0131:', event.data);\n if (event.data && event.data.type === 'worker_ready') {\n workerStatusSpan.textContent = event.data.message;\n } else if (event.data && event.data.type === 'task_completed') {\n workerStatusSpan.textContent = <code>G\u00f6rev ${event.data.taskId} tamamland\u0131.<\/code>;\n workerResultSpan.textContent = event.data.result;\n startWorkerTaskButton.disabled = false; \/\/ G\u00f6rev bitince tekrar etkinle\u015ftir\n }\n };\n\n startWorkerTaskButton.addEventListener('click', () => {\n startWorkerTaskButton.disabled = true;\n workerStatusSpan.textContent = 'Worker g\u00f6rev yap\u0131yor...';\n const taskId = Math.random().toString(36).substring(7);\n workerChannel.postMessage({ type: 'start_task', taskId: taskId });\n console.log('Ana i\u015f par\u00e7ac\u0131\u011f\u0131, worker\\'a g\u00f6rev ba\u015flama mesaj\u0131 g\u00f6nderdi.');\n });\n\n window.addEventListener('beforeunload', () => {\n workerChannel.close(); \/\/ Sekme kapat\u0131l\u0131rken kanal\u0131 kapat\n if (myWorker) {\n myWorker.terminate(); \/\/ Worker'\u0131 sonland\u0131r\n }\n });\n\n } else {\n workerStatusSpan.textContent = 'Web Worker\\'lar taray\u0131c\u0131n\u0131zda desteklenmiyor.';\n startWorkerTaskButton.disabled = true;\n }\n <\/script>\n<\/body>\n<\/html><\/code><\/pre>\n<p>Bu \u00f6rnekte, ana i\u015f par\u00e7ac\u0131\u011f\u0131 ve Web Worker, <code>worker_communication_channel<\/code> ad\u0131nda bir BroadcastChannel kullanarak ileti\u015fim kurar. Ana i\u015f par\u00e7ac\u0131\u011f\u0131 bir g\u00f6rev ba\u015flatma mesaj\u0131 g\u00f6nderir, worker bu mesaj\u0131 al\u0131r, g\u00f6revi tamamlar ve sonucu ayn\u0131 kanal \u00fczerinden geri yay\u0131nlar.<\/p>\n<h3>Taray\u0131c\u0131 Deste\u011fi<\/h3>\n<p>BroadcastChannel API’si, modern web taray\u0131c\u0131lar\u0131nda olduk\u00e7a geni\u015f bir deste\u011fe sahiptir:<br \/>\n* <strong>Google Chrome:<\/strong> Destekler (v54 ve sonras\u0131)<br \/>\n* <strong>Mozilla Firefox:<\/strong> Destekler (v38 ve sonras\u0131)<br \/>\n* <strong>Apple Safari:<\/strong> Destekler (v10.1 ve sonras\u0131)<br \/>\n* <strong>Microsoft Edge:<\/strong> Destekler (v14 ve sonras\u0131)<br \/>\n* <strong>Opera:<\/strong> Destekler (v41 ve sonras\u0131)<\/p>\n<p>Internet Explorer’da desteklenmemektedir. Genel olarak, g\u00fcncel web uygulamalar\u0131 i\u00e7in BroadcastChannel g\u00fcvenle kullan\u0131labilir. Detayl\u0131 ve g\u00fcncel taray\u0131c\u0131 deste\u011fi bilgisi i\u00e7in [Can I use BroadcastChannel](https:\/\/caniuse.com\/broadcastchannel) adresini kontrol edebilirsiniz.<\/p>\n<h3>S\u0131n\u0131rlamalar ve Alternatifler<\/h3>\n<p>BroadcastChannel API’si bir\u00e7ok senaryo i\u00e7in harika bir \u00e7\u00f6z\u00fcm olsa da, baz\u0131 s\u0131n\u0131rlamalar\u0131 vard\u0131r ve her durum i\u00e7in en iyi se\u00e7enek olmayabilir.<\/p>\n<h4>S\u0131n\u0131rlamalar<\/h4>\n<p>* <strong>Ayn\u0131 Origin K\u0131s\u0131tlamas\u0131:<\/strong> En \u00f6nemli s\u0131n\u0131rlama, yaln\u0131zca ayn\u0131 origin (protokol, host, port) i\u00e7indeki ba\u011flamlar aras\u0131nda ileti\u015fim kurabilmesidir. Farkl\u0131 domain’ler veya subdomain’ler aras\u0131 ileti\u015fim i\u00e7in kullan\u0131lamaz.<br \/>\n* <strong>Mesaj S\u0131ras\u0131 Garantisi Yok (Teorik):<\/strong> Spesifikasyonda mesajlar\u0131n tam olarak hangi s\u0131rada teslim edilece\u011fi garanti edilmez. Pratikte \u00e7o\u011fu taray\u0131c\u0131da s\u0131ra korunsa da, kritik s\u0131ralama gerektiren senaryolarda ek mant\u0131k (\u00f6rne\u011fin, mesajlara zaman damgas\u0131 veya s\u0131ra numaras\u0131 ekleyerek) gerekebilir.<br \/>\n* <strong>Kal\u0131c\u0131 De\u011fil:<\/strong> Kanal ba\u011flant\u0131s\u0131, taray\u0131c\u0131 sekmeleri kapat\u0131ld\u0131\u011f\u0131nda veya yenilendi\u011finde kesilir. BroadcastChannel, kal\u0131c\u0131 veri depolama veya uzun s\u00fcreli arka plan i\u015flemleri i\u00e7in tasarlanmam\u0131\u015ft\u0131r. Bu t\u00fcr ihtiya\u00e7lar i\u00e7in IndexedDB veya Service Worker’lar daha uygun olabilir.<br \/>\n* <strong>G\u00fcvenlik (Ayn\u0131 Origin \u0130\u00e7inde):<\/strong> Ayn\u0131 origin i\u00e7indeki herhangi bir betik kanala mesaj g\u00f6nderebilir veya kanal\u0131 dinleyebilir. Bu, XSS (Cross-Site Scripting) sald\u0131r\u0131lar\u0131 durumunda hassas verilerin a\u00e7\u0131\u011fa \u00e7\u0131kmas\u0131na neden olabilir. Bu nedenle, BroadcastChannel \u00fczerinden g\u00f6nderilen verilere kar\u015f\u0131 her zaman dikkatli olunmal\u0131 ve gelen mesajlar do\u011frulanmal\u0131d\u0131r.<\/p>\n<h4>Alternatifler<\/h4>\n<p>Yukar\u0131da da bahsedildi\u011fi gibi, BroadcastChannel’\u0131n alternatifi olabilecek ba\u015fka ileti\u015fim y\u00f6ntemleri de vard\u0131r, ancak her birinin kendi kullan\u0131m durumlar\u0131 ve s\u0131n\u0131rlamalar\u0131 bulunur:<br \/>\n* <strong><code>localStorage<\/code> Event (<code>storage<\/code> olay\u0131):<\/strong> String tabanl\u0131, her de\u011fi\u015fiklikte tetiklenir, kontrol\u00fc daha azd\u0131r.<br \/>\n* <strong><code>SharedWorker<\/code>:<\/strong> Daha karma\u015f\u0131k senaryolar i\u00e7in merkezi bir worker sa\u011flar, ancak kurulumu BroadcastChannel’dan daha zahmetlidir.<br \/>\n* <strong><code>window.postMessage()<\/code> ve <code>worker.postMessage()<\/code>:<\/strong> Belirli bir pencere veya worker’a mesaj g\u00f6ndermek i\u00e7in kullan\u0131l\u0131r, yay\u0131n yapmak i\u00e7in de\u011fil.<br \/>\n* <strong>WebSockets veya Server-Sent Events (SSE):<\/strong> Sunucu ile \u00e7ift y\u00f6nl\u00fc veya tek y\u00f6nl\u00fc (sunucudan istemciye) ileti\u015fim i\u00e7in kullan\u0131l\u0131r. Taray\u0131c\u0131 i\u00e7i ileti\u015fimden ziyade istemci-sunucu ileti\u015fimi i\u00e7in uygundur ve sunucu altyap\u0131s\u0131 gerektirir.<br \/>\n* <strong>IndexedDB veya Web SQL:<\/strong> Veri depolama ve dolayl\u0131 ileti\u015fim i\u00e7in kullan\u0131labilir, ancak do\u011frudan mesajla\u015fma API’si de\u011fildir.<\/p>\n<p>Se\u00e7im, uygulaman\u0131z\u0131n \u00f6zel ihtiya\u00e7lar\u0131na, ileti\u015fim t\u00fcr\u00fcne (yay\u0131n m\u0131, hedefli mi), veri hassasiyetine ve karma\u015f\u0131kl\u0131\u011f\u0131na ba\u011fl\u0131 olacakt\u0131r. \u00c7o\u011fu taray\u0131c\u0131 i\u00e7i yay\u0131n ihtiyac\u0131 i\u00e7in BroadcastChannel en basit ve en etkili \u00e7\u00f6z\u00fcmd\u00fcr.<\/p>\n<h3>Sonu\u00e7<\/h3>\n<p>BroadcastChannel API’si, modern web uygulamalar\u0131nda ayn\u0131 origin i\u00e7indeki farkl\u0131 taray\u0131c\u0131 ba\u011flamlar\u0131 aras\u0131nda ileti\u015fim kurma sorununa zarif ve standart bir \u00e7\u00f6z\u00fcm sunar. Oturum y\u00f6netimi, veri senkronizasyonu, Web Worker’lar aras\u0131 ileti\u015fim gibi yayg\u0131n senaryolarda geli\u015ftiricilere b\u00fcy\u00fck kolayl\u0131k sa\u011flar. Basit s\u00f6zdizimi, otomatik veri serile\u015ftirme ve geni\u015f taray\u0131c\u0131 deste\u011fi ile BroadcastChannel, web geli\u015ftiricilerinin ara\u00e7 kutusunda \u00f6nemli bir yer edinmi\u015ftir.<\/p>\n<p>Bu makalede, BroadcastChannel’\u0131n temel prensiplerini, kullan\u0131m\u0131n\u0131 ad\u0131m ad\u0131m kod \u00f6rnekleriyle, geli\u015fmi\u015f senaryolar\u0131 ve dikkat edilmesi gereken g\u00fcvenlik ve performans hususlar\u0131n\u0131 ayr\u0131nt\u0131l\u0131 bir \u015fekilde ele ald\u0131k. Ayr\u0131ca, di\u011fer taray\u0131c\u0131 i\u00e7i ileti\u015fim y\u00f6ntemleriyle kar\u015f\u0131la\u015ft\u0131rmalar yaparak BroadcastChannel’\u0131n ne zaman en iyi se\u00e7im oldu\u011funu vurgulad\u0131k.<\/p>\n<p>Uygulamalar\u0131n\u0131zda birden fazla sekme, pencere veya worker aras\u0131nda etkili bir \u015fekilde ileti\u015fim kurman\u0131z gerekti\u011finde, BroadcastChannel API’s\u0131n\u0131 g\u00f6z \u00f6n\u00fcnde bulundurmak, daha tutarl\u0131, etkile\u015fimli ve kullan\u0131c\u0131 dostu deneyimler olu\u015fturman\u0131za yard\u0131mc\u0131 olacakt\u0131r. Bu API’nin sundu\u011fu basitlik ve g\u00fcvenilirlik sayesinde, geli\u015ftiriciler ileti\u015fim altyap\u0131s\u0131yla u\u011fra\u015fmak yerine uygulaman\u0131n temel i\u015flevselli\u011fine odaklanabilirler.<\/body><\/p>\n","protected":false},"excerpt":{"rendered":"JavaScript’te BroadcastChannel API’\u0131 Nas\u0131l Kullan\u0131l\u0131r?","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[129],"tags":[],"class_list":{"0":"post-40343","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-javascript","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"\n<title>JavaScript'te BroadcastChannel API'\u0131 Nas\u0131l Kullan\u0131l\u0131r? Kapsaml\u0131 Bir Rehber - Kodlar\u0131n Gizemli D\u00fcnyas\u0131<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fatihsoysal.com\/blog\/javascriptte-broadcastchannel-apii-nasil-kullanilir-kapsamli-bir-rehber\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"JavaScript'te BroadcastChannel API'\u0131 Nas\u0131l Kullan\u0131l\u0131r? Kapsaml\u0131 Bir Rehber\" \/>\n<meta property=\"og:description\" content=\"JavaScript'te BroadcastChannel API'\u0131 Nas\u0131l Kullan\u0131l\u0131r?\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/javascriptte-broadcastchannel-apii-nasil-kullanilir-kapsamli-bir-rehber\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2026-02-26T05:40:56+00:00\" \/>\n<meta name=\"author\" content=\"Fatih Soysal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fatih Soysal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"20 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/javascriptte-broadcastchannel-apii-nasil-kullanilir-kapsamli-bir-rehber\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/javascriptte-broadcastchannel-apii-nasil-kullanilir-kapsamli-bir-rehber\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"JavaScript’te BroadcastChannel API’\u0131 Nas\u0131l Kullan\u0131l\u0131r? Kapsaml\u0131 Bir Rehber\",\"datePublished\":\"2026-02-26T05:40:56+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/javascriptte-broadcastchannel-apii-nasil-kullanilir-kapsamli-bir-rehber\/\"},\"wordCount\":3267,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"articleSection\":[\"Javascript\"],\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/javascriptte-broadcastchannel-apii-nasil-kullanilir-kapsamli-bir-rehber\/#respond\"]}],\"copyrightYear\":\"2026\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/javascriptte-broadcastchannel-apii-nasil-kullanilir-kapsamli-bir-rehber\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/javascriptte-broadcastchannel-apii-nasil-kullanilir-kapsamli-bir-rehber\/\",\"name\":\"JavaScript'te BroadcastChannel API'\u0131 Nas\u0131l Kullan\u0131l\u0131r? Kapsaml\u0131 Bir Rehber - Kodlar\u0131n Gizemli D\u00fcnyas\u0131\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2026-02-26T05:40:56+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/javascriptte-broadcastchannel-apii-nasil-kullanilir-kapsamli-bir-rehber\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/javascriptte-broadcastchannel-apii-nasil-kullanilir-kapsamli-bir-rehber\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/javascriptte-broadcastchannel-apii-nasil-kullanilir-kapsamli-bir-rehber\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript’te BroadcastChannel API’\u0131 Nas\u0131l Kullan\u0131l\u0131r? Kapsaml\u0131 Bir Rehber\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/\",\"name\":\"Fatihsoysal.com\",\"description\":\"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim\",\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\",\"name\":\"Fatih Soysal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"contentUrl\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"width\":512,\"height\":512,\"caption\":\"Fatih Soysal\"},\"logo\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\"},\"description\":\"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/\"}]}<\/script>\n","yoast_head_json":{"title":"JavaScript'te BroadcastChannel API'\u0131 Nas\u0131l Kullan\u0131l\u0131r? Kapsaml\u0131 Bir Rehber - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fatihsoysal.com\/blog\/javascriptte-broadcastchannel-apii-nasil-kullanilir-kapsamli-bir-rehber\/","og_locale":"tr_TR","og_type":"article","og_title":"JavaScript'te BroadcastChannel API'\u0131 Nas\u0131l Kullan\u0131l\u0131r? Kapsaml\u0131 Bir Rehber","og_description":"JavaScript'te BroadcastChannel API'\u0131 Nas\u0131l Kullan\u0131l\u0131r?","og_url":"https:\/\/fatihsoysal.com\/blog\/javascriptte-broadcastchannel-apii-nasil-kullanilir-kapsamli-bir-rehber\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2026-02-26T05:40:56+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"20 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/javascriptte-broadcastchannel-apii-nasil-kullanilir-kapsamli-bir-rehber\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/javascriptte-broadcastchannel-apii-nasil-kullanilir-kapsamli-bir-rehber\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"JavaScript’te BroadcastChannel API’\u0131 Nas\u0131l Kullan\u0131l\u0131r? Kapsaml\u0131 Bir Rehber","datePublished":"2026-02-26T05:40:56+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/javascriptte-broadcastchannel-apii-nasil-kullanilir-kapsamli-bir-rehber\/"},"wordCount":3267,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"articleSection":["Javascript"],"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/javascriptte-broadcastchannel-apii-nasil-kullanilir-kapsamli-bir-rehber\/#respond"]}],"copyrightYear":"2026","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/javascriptte-broadcastchannel-apii-nasil-kullanilir-kapsamli-bir-rehber\/","url":"https:\/\/fatihsoysal.com\/blog\/javascriptte-broadcastchannel-apii-nasil-kullanilir-kapsamli-bir-rehber\/","name":"JavaScript'te BroadcastChannel API'\u0131 Nas\u0131l Kullan\u0131l\u0131r? Kapsaml\u0131 Bir Rehber - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2026-02-26T05:40:56+00:00","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/javascriptte-broadcastchannel-apii-nasil-kullanilir-kapsamli-bir-rehber\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/javascriptte-broadcastchannel-apii-nasil-kullanilir-kapsamli-bir-rehber\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/javascriptte-broadcastchannel-apii-nasil-kullanilir-kapsamli-bir-rehber\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"JavaScript’te BroadcastChannel API’\u0131 Nas\u0131l Kullan\u0131l\u0131r? Kapsaml\u0131 Bir Rehber"}]},{"@type":"WebSite","@id":"https:\/\/fatihsoysal.com\/blog\/#website","url":"https:\/\/fatihsoysal.com\/blog\/","name":"Fatihsoysal.com","description":"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim","publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"tr"},{"@type":["Person","Organization"],"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1","name":"Fatih Soysal","image":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","contentUrl":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","width":512,"height":512,"caption":"Fatih Soysal"},"logo":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/"},"description":"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.","url":"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/"}]}},"yoast_meta":{"yoast_wpseo_title":"","yoast_wpseo_metadesc":"","yoast_wpseo_canonical":""},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/40343","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/comments?post=40343"}],"version-history":[{"count":1,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/40343\/revisions"}],"predecessor-version":[{"id":40344,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/40343\/revisions\/40344"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=40343"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=40343"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=40343"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":40343,"date":"2026-02-26T08:40:56","date_gmt":"2026-02-26T05:40:56","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/?p=40343"},"modified":"2026-02-26T08:40:56","modified_gmt":"2026-02-26T05:40:56","slug":"javascriptte-broadcastchannel-apii-nasil-kullanilir-kapsamli-bir-rehber","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/javascriptte-broadcastchannel-apii-nasil-kullanilir-kapsamli-bir-rehber\/","title":{"rendered":"JavaScript’te BroadcastChannel API’\u0131 Nas\u0131l Kullan\u0131l\u0131r? Kapsaml\u0131 Bir Rehber"},"content":{"rendered":"

<\/p>\n

JavaScript’te BroadcastChannel API’\u0131 Nas\u0131l Kullan\u0131l\u0131r? Kapsaml\u0131 Bir Rehber<\/h2>\n

Giri\u015f<\/h3>\n
Modern web uygulamalar\u0131, kullan\u0131c\u0131 deneyimini zenginle\u015ftirmek ve daha etkile\u015fimli hale gelmek i\u00e7in s\u00fcrekli olarak geli\u015fmektedir. Bu geli\u015fimin \u00f6nemli bir par\u00e7as\u0131 da, ayn\u0131 web uygulamas\u0131n\u0131n farkl\u0131 par\u00e7alar\u0131 veya \u00f6rnekleri aras\u0131nda sorunsuz bir \u015fekilde ileti\u015fim kurabilme yetene\u011fidir. Bir kullan\u0131c\u0131 ayn\u0131 web sitesini birden fazla taray\u0131c\u0131 sekmesinde, penceresinde veya hatta bir Web Worker i\u00e7inde a\u00e7t\u0131\u011f\u0131nda, bu ba\u011flamlar aras\u0131nda veri payla\u015f\u0131m\u0131 veya olay senkronizasyonu ihtiyac\u0131 do\u011far. \u00d6rne\u011fin, bir sekmede yap\u0131lan bir i\u015flem (oturum kapatma, favori \u00fcr\u00fcn ekleme gibi) di\u011fer sekmelerde an\u0131nda g\u00fcncellenmeli veya yans\u0131t\u0131lmal\u0131d\u0131r.<\/p>\n
Geleneksel olarak, bu t\u00fcr taray\u0131c\u0131 i\u00e7i ileti\u015fim i\u00e7in localStorage<\/code> olaylar\u0131 veya postMessage<\/code> gibi y\u00f6ntemler kullan\u0131lm\u0131\u015ft\u0131r. Ancak bu y\u00f6ntemlerin belirli s\u0131n\u0131rlamalar\u0131 ve karma\u015f\u0131kl\u0131klar\u0131 vard\u0131r. localStorage<\/code> olaylar\u0131 yaln\u0131zca string veriyle \u00e7al\u0131\u015f\u0131r, her de\u011fi\u015fikli\u011fi tetikler ve kontrol\u00fc zordur. postMessage<\/code> ise genellikle belirli bir pencere veya worker ile do\u011frudan ileti\u015fim kurmak i\u00e7in tasarlanm\u0131\u015ft\u0131r, birden fazla ba\u011flama yay\u0131n yapmak i\u00e7in de\u011fil. \u0130\u015fte tam da bu noktada BroadcastChannel API devreye girer.<\/p>\n
BroadcastChannel API, ayn\u0131 kaynaktan (origin) gelen farkl\u0131 taray\u0131c\u0131 ba\u011flamlar\u0131 aras\u0131nda basit, g\u00fcvenilir ve standart bir ileti\u015fim kanal\u0131 sa\u011flar. Bu makale, BroadcastChannel API’s\u0131n\u0131n ne oldu\u011funu, neden kullan\u0131lmas\u0131 gerekti\u011fini, temel ve geli\u015fmi\u015f kullan\u0131m senaryolar\u0131n\u0131, pratik \u00f6rneklerini ve s\u0131n\u0131rlamalar\u0131n\u0131 derinlemesine inceleyerek geli\u015ftiricilere kapsaml\u0131 bir rehber sunmay\u0131 ama\u00e7lamaktad\u0131r.<\/p>\n

BroadcastChannel API Nedir?<\/h3>\nBroadcastChannel API, web geli\u015ftiricilerinin ayn\u0131 “origin” (protokol, host ve port kombinasyonu) i\u00e7indeki farkl\u0131 taray\u0131c\u0131 ba\u011flamlar\u0131 aras\u0131nda mesaj g\u00f6ndermesine ve almas\u0131na olanak tan\u0131yan bir taray\u0131c\u0131 \u00f6zelli\u011fidir. Bu ba\u011flamlar, farkl\u0131 taray\u0131c\u0131 sekmeleri, pencereleri, iframe’ler veya Web Worker’lar olabilir. API, bir yay\u0131n-abonelik (publish-subscribe) modeline dayan\u0131r; bir kanal \u00fczerinden g\u00f6nderilen mesajlar, o kanala abone olan t\u00fcm ba\u011flamlar taraf\u0131ndan al\u0131n\u0131r.<\/p>\n
Temel olarak, bir BroadcastChannel<\/code> nesnesi olu\u015fturdu\u011funuzda, bu nesneye bir isim verirsiniz. Ayn\u0131 isimle olu\u015fturulan t\u00fcm BroadcastChannel<\/code> \u00f6rnekleri, birbirleriyle ileti\u015fim kurabilen bir “kanal” olu\u015fturur. Bir ba\u011flam bu kanala bir mesaj g\u00f6nderdi\u011finde, ayn\u0131 kanal\u0131 dinleyen di\u011fer t\u00fcm ba\u011flamlar bu mesaj\u0131 alabilir. Bu, geli\u015ftiricilere, kullan\u0131c\u0131 deneyimini \u00f6nemli \u00f6l\u00e7\u00fcde iyile\u015ftirebilecek, sekmeler aras\u0131 senkronizasyon ve durum y\u00f6netimi gibi karma\u015f\u0131k g\u00f6revleri basitle\u015ftiren g\u00fc\u00e7l\u00fc bir ara\u00e7 sunar.<\/p>\n
BroadcastChannel’\u0131n en b\u00fcy\u00fck avantajlar\u0131ndan biri, kullan\u0131m kolayl\u0131\u011f\u0131 ve taray\u0131c\u0131 taraf\u0131ndan sa\u011flanan g\u00fcvenilirli\u011fidir. Mesajlar, taray\u0131c\u0131 motoru taraf\u0131ndan dahili olarak y\u00f6netildi\u011fi i\u00e7in, geli\u015ftiricilerin d\u00fc\u015f\u00fck seviyeli ileti\u015fim mekanizmalar\u0131yla u\u011fra\u015fmas\u0131na gerek kalmaz. Ayr\u0131ca, g\u00f6nderilen mesajlar otomatik olarak “yap\u0131land\u0131r\u0131lm\u0131\u015f klonlama algoritmas\u0131” kullan\u0131larak serile\u015ftirilir ve seri durumdan \u00e7\u0131kar\u0131l\u0131r, bu da karma\u015f\u0131k JavaScript nesnelerinin bile kolayca g\u00f6nderilebilece\u011fi anlam\u0131na gelir.<\/p>\n
Neden BroadcastChannel Kullanmal\u0131s\u0131n\u0131z?<\/h3>\nBroadcastChannel API, modern web uygulamalar\u0131n\u0131n kar\u015f\u0131la\u015ft\u0131\u011f\u0131 bir\u00e7ok ileti\u015fim sorununa zarif ve etkili \u00e7\u00f6z\u00fcmler sunar. \u0130\u015fte BroadcastChannel kullanman\u0131z i\u00e7in baz\u0131 temel nedenler ve senaryolar:<\/p>\n
*   Kullan\u0131c\u0131 Oturumu Y\u00f6netimi:<\/strong> Bir kullan\u0131c\u0131 ayn\u0131 web sitesini birden fazla sekmede a\u00e7m\u0131\u015f olabilir. Bir sekmede oturumunu kapatt\u0131\u011f\u0131nda, di\u011fer t\u00fcm a\u00e7\u0131k sekmelerin de oturumun sona erdi\u011fini bilmesi ve buna g\u00f6re tepki vermesi (\u00f6rne\u011fin, kullan\u0131c\u0131y\u0131 ana sayfaya y\u00f6nlendirmesi veya oturum a\u00e7ma ekran\u0131n\u0131 g\u00f6stermesi) \u00f6nemlidir. BroadcastChannel, bu t\u00fcr oturum kapatma veya oturum zaman a\u015f\u0131m\u0131 olaylar\u0131n\u0131 t\u00fcm sekmelere yay\u0131nlamak i\u00e7in idealdir.
\n*   Ger\u00e7ek Zamanl\u0131 Veri Senkronizasyonu:<\/strong> Bir e-ticaret sitesinde, kullan\u0131c\u0131 bir \u00fcr\u00fcn\u00fc favorilerine ekledi\u011finde veya sepetine ekledi\u011finde, di\u011fer a\u00e7\u0131k sekmelerdeki favori say\u0131s\u0131 veya sepet ikonunun an\u0131nda g\u00fcncellenmesi kullan\u0131c\u0131 deneyimini art\u0131r\u0131r. BroadcastChannel, bu t\u00fcr k\u00fc\u00e7\u00fck veri g\u00fcncellemelerini an\u0131nda t\u00fcm ilgili ba\u011flamlara iletmek i\u00e7in kullan\u0131labilir.
\n*   Tek Sayfa Uygulamalar\u0131nda (SPA) Mod\u00fcller Aras\u0131 \u0130leti\u015fim:<\/strong> B\u00fcy\u00fck ve karma\u015f\u0131k SPA’larda, farkl\u0131 mod\u00fcller veya bile\u015fenler aras\u0131nda durum g\u00fcncellemelerini senkronize etmek gerekebilir. E\u011fer bu mod\u00fcller farkl\u0131 iframe’lerde veya Web Worker’larda \u00e7al\u0131\u015f\u0131yorsa, BroadcastChannel standart bir ileti\u015fim yolu sunar.
\n*   Offline Modda Veri Senkronizasyonu:<\/strong> Service Worker’lar ile birlikte kullan\u0131ld\u0131\u011f\u0131nda, BroadcastChannel, \u00f6nbelle\u011fe al\u0131nm\u0131\u015f verilerin g\u00fcncellendi\u011fini veya \u00e7evrimd\u0131\u015f\u0131 bir i\u015flemin tamamland\u0131\u011f\u0131n\u0131 ana uygulama sekmelerine bildirmek i\u00e7in kullan\u0131labilir.
\n*   Web Worker’lar ve Ana \u0130\u015f Par\u00e7ac\u0131\u011f\u0131 Aras\u0131ndaki \u0130leti\u015fim:<\/strong> Bir Web Worker, ana i\u015f par\u00e7ac\u0131\u011f\u0131ndan ba\u011f\u0131ms\u0131z olarak yo\u011fun hesaplamalar yapabilir. Bu hesaplamalar\u0131n sonu\u00e7lar\u0131n\u0131 veya ilerleme durumunu ana i\u015f par\u00e7ac\u0131\u011f\u0131na bildirmek i\u00e7in BroadcastChannel kullan\u0131labilir. \u00d6zellikle birden fazla worker’\u0131n ayn\u0131 anda ana i\u015f par\u00e7ac\u0131\u011f\u0131yla ileti\u015fim kurmas\u0131 gerekti\u011finde, merkezi bir kanal faydal\u0131 olabilir.
\n*   Kullan\u0131c\u0131 Bildirimleri:<\/strong> Bir olay ger\u00e7ekle\u015fti\u011finde (\u00f6rne\u011fin, yeni bir mesaj geldi\u011finde), t\u00fcm a\u00e7\u0131k sekmelerde kullan\u0131c\u0131ya bildirim g\u00f6stermek i\u00e7in BroadcastChannel kullan\u0131labilir.<\/p>\n
Di\u011fer \u0130leti\u015fim Y\u00f6ntemleriyle Kar\u015f\u0131la\u015ft\u0131rma<\/h4>\nBroadcastChannel’\u0131n avantajlar\u0131n\u0131 daha iyi anlamak i\u00e7in, di\u011fer yayg\u0131n taray\u0131c\u0131 i\u00e7i ileti\u015fim y\u00f6ntemleriyle kar\u015f\u0131la\u015ft\u0131rmak faydal\u0131 olacakt\u0131r:<\/p>\n
*   LocalStorage Event (storage<\/code> olay\u0131):<\/strong>
\n    *   Nas\u0131l \u00c7al\u0131\u015f\u0131r:<\/strong> localStorage<\/code>‘da bir anahtar\u0131n de\u011feri de\u011fi\u015fti\u011finde, ayn\u0131 origin’deki di\u011fer t\u00fcm pencerelerde storage<\/code> olay\u0131 tetiklenir.
\n    *   S\u0131n\u0131rlamalar:<\/strong> Sadece string verileri depolayabilir ve iletebilir. Her localStorage<\/code> de\u011fi\u015fikli\u011finde tetiklenir, bu da istenmeyen olay patlamalar\u0131na neden olabilir. Mesaj\u0131n kimden geldi\u011fini veya ne t\u00fcr bir mesaj oldu\u011funu ay\u0131rt etmek zordur. G\u00fcvenlik a\u00e7\u0131s\u0131ndan, farkl\u0131 origin’lerden de dinlenebilir (ancak sadece de\u011fi\u015fen anahtar ve yeni de\u011feri g\u00f6rebilirler).
\n    *   BroadcastChannel ile Fark\u0131:<\/strong> BroadcastChannel, herhangi bir JSON serile\u015ftirilebilir veriyi do\u011frudan g\u00f6nderebilir, daha kontroll\u00fc bir mesajla\u015fma mekanizmas\u0131 sunar ve sadece belirli bir kanala abone olanlar mesajlar\u0131 al\u0131r.
\n*   IndexedDB:<\/strong>
\n    *   Nas\u0131l \u00c7al\u0131\u015f\u0131r:<\/strong> Taray\u0131c\u0131da yap\u0131land\u0131r\u0131lm\u0131\u015f veri depolamak i\u00e7in bir NoSQL veritaban\u0131d\u0131r. Do\u011frudan ileti\u015fim i\u00e7in tasarlanmam\u0131\u015ft\u0131r.
\n    *   S\u0131n\u0131rlamalar:<\/strong> \u0130leti\u015fim i\u00e7in dolayl\u0131 yollar\u0131 kullan\u0131r (\u00f6rne\u011fin, bir sekme IndexedDB’ye yazar, di\u011fer sekme bu de\u011fi\u015fikli\u011fi periyodik olarak kontrol eder veya IndexedDB’nin kendi olaylar\u0131n\u0131 dinler).
\n    *   BroadcastChannel ile Fark\u0131:<\/strong> BroadcastChannel, anl\u0131k, olay tabanl\u0131 ileti\u015fim i\u00e7in do\u011frudan bir \u00e7\u00f6z\u00fcmd\u00fcr, veri depolama i\u00e7in de\u011fil.
\n*   SharedWorker:<\/strong>
\n    *   Nas\u0131l \u00c7al\u0131\u015f\u0131r:<\/strong> Birden fazla taray\u0131c\u0131 ba\u011flam\u0131 taraf\u0131ndan payla\u015f\u0131labilen tek bir worker \u00f6rne\u011fi olu\u015fturur. Worker, bir ileti\u015fim merkezi olarak i\u015flev g\u00f6rebilir.
\n    *   S\u0131n\u0131rlamalar:<\/strong> Kurulumu ve y\u00f6netimi BroadcastChannel’dan daha karma\u015f\u0131kt\u0131r. Worker’\u0131n kendisi ayr\u0131 bir JavaScript dosyas\u0131d\u0131r ve ya\u015fam d\u00f6ng\u00fcs\u00fc y\u00f6netimi gerektirir.
\n    *   BroadcastChannel ile Fark\u0131:<\/strong> BroadcastChannel daha y\u00fcksek seviyeli ve daha basit bir API sunar, \u00f6zellikle sadece mesaj yay\u0131nlama ve dinleme ihtiyac\u0131 oldu\u011funda daha az karma\u015f\u0131kt\u0131r. Ancak SharedWorker, daha karma\u015f\u0131k merkezi mant\u0131k gerektiren senaryolar i\u00e7in daha g\u00fc\u00e7l\u00fc olabilir.
\n*   PostMessage (Window\/Worker):<\/strong>
\n    *   Nas\u0131l \u00c7al\u0131\u015f\u0131r:<\/strong> Belirli bir pencere (window.postMessage<\/code>) veya worker (worker.postMessage<\/code>) ile mesaj g\u00f6ndermek i\u00e7in kullan\u0131l\u0131r.
\n    *   S\u0131n\u0131rlamalar:<\/strong> Genellikle bir-bir veya bir-\u00e7ok (ama belirli hedeflere) ileti\u015fim i\u00e7in tasarlanm\u0131\u015ft\u0131r. T\u00fcm ayn\u0131 origin’deki ba\u011flamlara yay\u0131n yapmak i\u00e7in do\u011frudan uygun de\u011fildir. Hedef pencerenin referans\u0131na sahip olman\u0131z gerekir.
\n    *   BroadcastChannel ile Fark\u0131:<\/strong> BroadcastChannel, t\u00fcm ayn\u0131 origin’deki ba\u011flamlara “yay\u0131n” yapmak i\u00e7in tasarlanm\u0131\u015ft\u0131r, belirli hedeflere odaklanmaz.
\n*   WebSockets:<\/strong>
\n    *   Nas\u0131l \u00c7al\u0131\u015f\u0131r:<\/strong> \u0130stemci ve sunucu aras\u0131nda \u00e7ift y\u00f6nl\u00fc, tam \u00e7ift y\u00f6nl\u00fc bir ileti\u015fim kanal\u0131 sa\u011flar.
\n    *   S\u0131n\u0131rlamalar:<\/strong> Sunucu taraf\u0131nda bir WebSocket sunucusu gerektirir. Taray\u0131c\u0131 i\u00e7i ileti\u015fimden ziyade istemci-sunucu ileti\u015fimi i\u00e7in kullan\u0131l\u0131r.
\n    *   BroadcastChannel ile Fark\u0131:<\/strong> BroadcastChannel tamamen istemci taraf\u0131 bir API’d\u0131r ve sunucu ba\u011f\u0131ml\u0131l\u0131\u011f\u0131 yoktur.<\/p>\n
\u00d6zetle, BroadcastChannel API, ayn\u0131 origin i\u00e7indeki farkl\u0131 taray\u0131c\u0131 ba\u011flamlar\u0131 aras\u0131nda basit, yay\u0131n tabanl\u0131 ileti\u015fim i\u00e7in en uygun ve en kolay kullan\u0131ml\u0131 \u00e7\u00f6z\u00fcmd\u00fcr.<\/p>\n
BroadcastChannel API’\u0131n\u0131n Temel Kullan\u0131m\u0131<\/h3>\nBroadcastChannel API’\u0131n\u0131 kullanmak olduk\u00e7a basittir ve birka\u00e7 temel ad\u0131mdan olu\u015fur: bir kanal olu\u015fturma, mesaj g\u00f6nderme, mesaj dinleme ve kanal\u0131 kapatma.<\/p>\n
Kanal Olu\u015fturma<\/h4>\nBir ileti\u015fim kanal\u0131 olu\u015fturmak i\u00e7in BroadcastChannel<\/code> yap\u0131c\u0131s\u0131n\u0131 kullan\u0131r\u0131z. Yap\u0131c\u0131, bir string arg\u00fcman\u0131 al\u0131r: kanal\u0131n ad\u0131. Ayn\u0131 isimle olu\u015fturulan t\u00fcm BroadcastChannel<\/code> \u00f6rnekleri birbirleriyle ileti\u015fim kuracakt\u0131r.<\/p>\n
\/\/ 'my_channel' ad\u0131nda bir BroadcastChannel olu\u015ftur.\nconst myChannel = new BroadcastChannel('my_channel');\n\nconsole.log('BroadcastChannel olu\u015fturuldu: my_channel');<\/code><\/pre>\nKanal ad\u0131, uygulaman\u0131zdaki farkl\u0131 ileti\u015fim t\u00fcrlerini ay\u0131rt etmek i\u00e7in \u00f6nemlidir. \u00d6rne\u011fin, kullan\u0131c\u0131 oturumuyla ilgili mesajlar i\u00e7in user-session-channel<\/code>, \u00fcr\u00fcn g\u00fcncellemeleri i\u00e7in product-updates-channel<\/code> gibi farkl\u0131 kanallar kullanabilirsiniz.<\/p>\n
Mesaj G\u00f6nderme<\/h4>\nBir kanala mesaj g\u00f6ndermek i\u00e7in postMessage()<\/code> metodunu kullan\u0131r\u0131z. Bu metod, herhangi bir JSON serile\u015ftirilebilir JavaScript nesnesini arg\u00fcman olarak alabilir (string, number, boolean, object, array, null). Yap\u0131land\u0131r\u0131lm\u0131\u015f klonlama algoritmas\u0131 sayesinde, karma\u015f\u0131k nesneler bile g\u00fcvenli bir \u015fekilde aktar\u0131labilir.<\/p>\n
\/\/ my_channel \u00fczerinden bir mesaj g\u00f6nder.\nmyChannel.postMessage('Merhaba, di\u011fer sekmeler!');\n\n\/\/ Bir nesne g\u00f6nderelim\nconst data = {\n    type: 'user_login',\n    userId: 123,\n    username: 'john_doe',\n    timestamp: new Date().toISOString()\n};\nmyChannel.postMessage(data);\n\nconsole.log('Mesajlar g\u00f6nderildi.');<\/code><\/pre>\nMesaj g\u00f6nderildi\u011finde, ayn\u0131 my_channel<\/code> ad\u0131n\u0131 dinleyen t\u00fcm di\u011fer BroadcastChannel<\/code> \u00f6rnekleri bu mesaj\u0131 alacakt\u0131r. Kendi g\u00f6nderdi\u011finiz mesajlar\u0131 kendi kanal\u0131n\u0131z \u00fczerinden almayaca\u011f\u0131n\u0131z\u0131 unutmay\u0131n; mesajlar yaln\u0131zca di\u011fer ba\u011flamlara yay\u0131nlan\u0131r.<\/p>\n
Mesaj Dinleme<\/h4>\nG\u00f6nderilen mesajlar\u0131 dinlemek i\u00e7in BroadcastChannel<\/code> nesnesinin onmessage<\/code> olay i\u015fleyicisini kullanabiliriz veya addEventListener()<\/code> metodunu tercih edebiliriz. onmessage<\/code> daha basit bir s\u00f6zdizimi sunarken, addEventListener()<\/code> birden fazla dinleyici eklemeye ve kald\u0131rmaya olanak tan\u0131r.<\/p>\n
onmessage<\/code> ile dinleme:<\/strong><\/p>\n
myChannel.onmessage = (event) => {\n    console.log('Mesaj al\u0131nd\u0131:', event.data);\n\n    if (typeof event.data === 'string') {\n        console.log('Al\u0131nan string mesaj:', event.data);\n    } else if (typeof event.data === 'object' && event.data !== null) {\n        console.log('Al\u0131nan nesne mesaj:', event.data.type, event.data.userId);\n        \/\/ Oturum kapatma senaryosu \u00f6rne\u011fi\n        if (event.data.type === 'logout') {\n            alert('Oturumunuz ba\u015fka bir sekmede kapat\u0131ld\u0131. Yeniden giri\u015f yap\u0131n.');\n            \/\/ window.location.href = '\/login';\n        }\n    }\n};\n\nconsole.log('Mesajlar dinleniyor...');<\/code><\/pre>\naddEventListener()<\/code> ile dinleme:<\/strong><\/p>\n
const messageHandler = (event) => {\n    console.log('Mesaj al\u0131nd\u0131 (addEventListener):', event.data);\n    \/\/ ... mesaj\u0131 i\u015fle ...\n};\n\nmyChannel.addEventListener('message', messageHandler);\n\nconsole.log('Mesajlar addEventListener ile dinleniyor...');\n\n\/\/ Dinleyiciyi kald\u0131rmak i\u00e7in:\n\/\/ myChannel.removeEventListener('message', messageHandler);<\/code><\/pre>\nevent<\/code> nesnesi, mesaj hakk\u0131nda \u00e7e\u015fitli bilgiler i\u00e7erir. En \u00f6nemlisi, g\u00f6nderilen veriye event.data<\/code> \u00f6zelli\u011fi arac\u0131l\u0131\u011f\u0131yla eri\u015filir. event.origin<\/code> ve event.source<\/code> gibi di\u011fer \u00f6zellikler genellikle null<\/code> veya undefined<\/code> olur \u00e7\u00fcnk\u00fc BroadcastChannel do\u011frudan bir kaynak veya hedefle ili\u015fkili de\u011fildir; yay\u0131n yapar.<\/p>\n
Kanal\u0131 Kapatma<\/h4>\nBir BroadcastChannel<\/code> \u00f6rne\u011fi art\u0131k gerekli olmad\u0131\u011f\u0131nda, kaynaklar\u0131 serbest b\u0131rakmak ve dinlemeyi durdurmak i\u00e7in close()<\/code> metodunu \u00e7a\u011f\u0131rmak iyi bir uygulamad\u0131r. Bu, \u00f6zellikle tek sayfa uygulamalar\u0131nda veya bir bile\u015fenin ya\u015fam d\u00f6ng\u00fcs\u00fc sona erdi\u011finde bellek s\u0131z\u0131nt\u0131lar\u0131n\u0131 \u00f6nlemek i\u00e7in \u00f6nemlidir.<\/p>\n
\/\/ Kanal\u0131 kapat.\nmyChannel.close();\n\nconsole.log('BroadcastChannel kapat\u0131ld\u0131.');\n\n\/\/ Kapat\u0131ld\u0131ktan sonra postMessage \u00e7a\u011f\u0131rmak bir hata f\u0131rlatmaz ancak mesaj g\u00f6nderilmez.\n\/\/ myChannel.postMessage('Bu mesaj g\u00f6nderilmeyecek.');<\/code><\/pre>\nclose()<\/code> \u00e7a\u011fr\u0131ld\u0131\u011f\u0131nda, o BroadcastChannel<\/code> \u00f6rne\u011fi art\u0131k mesaj g\u00f6nderemez veya alamaz. Ancak, ayn\u0131 isimle ba\u015fka BroadcastChannel<\/code> \u00f6rnekleri hala etkin olabilir ve \u00e7al\u0131\u015fmaya devam edebilir.<\/p>\n
Geli\u015fmi\u015f Kullan\u0131m Senaryolar\u0131 ve \u0130pu\u00e7lar\u0131<\/h3>\nBroadcastChannel API’s\u0131n\u0131n temel kullan\u0131m\u0131 basit olsa da, ger\u00e7ek d\u00fcnya uygulamalar\u0131nda kar\u015f\u0131la\u015f\u0131labilecek daha karma\u015f\u0131k senaryolar ve dikkat edilmesi gereken noktalar vard\u0131r.<\/p>\n
Hata Y\u00f6netimi<\/h4>\nBroadcastChannel API’si, postMessage<\/code> \u00e7a\u011fr\u0131l\u0131rken genellikle do\u011frudan bir hata f\u0131rlatmaz. Mesaj\u0131n g\u00f6nderilememesi gibi durumlar (\u00f6rne\u011fin, kanal\u0131n kapat\u0131lm\u0131\u015f olmas\u0131), sessizce ba\u015far\u0131s\u0131z olabilir. Bu nedenle, hata y\u00f6netimi genellikle mesaj\u0131n i\u00e7eri\u011finde hata durumlar\u0131n\u0131 veya ba\u015far\u0131s\u0131zl\u0131klar\u0131 belirtmekle yap\u0131l\u0131r.<\/p>\n
const errorChannel = new BroadcastChannel('error_reporting_channel');\n\ntry {\n    \/\/ Baz\u0131 hatal\u0131 i\u015flemler...\n    throw new Error('Bir hata olu\u015ftu!');\n} catch (error) {\n    errorChannel.postMessage({\n        type: 'error',\n        message: error.message,\n        stack: error.stack,\n        timestamp: new Date().toISOString()\n    });\n}\n\nerrorChannel.onmessage = (event) => {\n    if (event.data.type === 'error') {\n        console.error('Di\u011fer sekmeden hata raporu al\u0131nd\u0131:', event.data.message);\n        \/\/ Hata loglama servisine g\u00f6nderme, kullan\u0131c\u0131ya bildirme vb.\n    }\n};<\/code><\/pre>\nBu yakla\u015f\u0131m, uygulaman\u0131z\u0131n farkl\u0131 b\u00f6l\u00fcmlerindeki hatalar\u0131 merkezi bir \u015fekilde izlemenize ve y\u00f6netmenize olanak tan\u0131r.<\/p>\n
Birden Fazla Kanal Kullan\u0131m\u0131<\/h4>\nUygulaman\u0131z\u0131n farkl\u0131 ileti\u015fim ihtiya\u00e7lar\u0131 varsa, birden fazla BroadcastChannel<\/code> \u00f6rne\u011fi olu\u015fturmak ve her birine farkl\u0131 bir isim vermek iyi bir tasar\u0131m modelidir. Bu, mesajlar\u0131n\u0131z\u0131 kategorize etmenize ve her ba\u011flam\u0131n yaln\u0131zca ilgilendi\u011fi mesajlar\u0131 dinlemesine olanak tan\u0131r.<\/p>\n
const authChannel = new BroadcastChannel('user_auth_channel');\nconst notificationChannel = new BroadcastChannel('app_notifications_channel');\n\nauthChannel.onmessage = (event) => {\n    if (event.data.type === 'logout') {\n        console.log('Auth kanal\u0131ndan logout mesaj\u0131 al\u0131nd\u0131.');\n    }\n};\n\nnotificationChannel.onmessage = (event) => {\n    if (event.data.type === 'new_message') {\n        console.log('Bildirim kanal\u0131ndan yeni mesaj al\u0131nd\u0131:', event.data.content);\n    }\n};\n\n\/\/ Bir sekmede:\nauthChannel.postMessage({ type: 'logout' });\n\n\/\/ Ba\u015fka bir sekmede:\nnotificationChannel.postMessage({ type: 'new_message', content: 'Merhaba, yeni bir bildiriminiz var!' });<\/code><\/pre>\nBu, kodunuzu daha mod\u00fcler ve y\u00f6netilebilir hale getirir.<\/p>\n
Veri Yap\u0131lar\u0131 ve Serile\u015ftirme<\/h4>\nBroadcastChannel, yap\u0131land\u0131r\u0131lm\u0131\u015f klonlama algoritmas\u0131n\u0131 kullanarak nesneleri otomatik olarak serile\u015ftirir ve seri durumdan \u00e7\u0131kar\u0131r. Bu, Date<\/code>, RegExp<\/code>, Map<\/code>, Set<\/code>, ArrayBuffer<\/code>, TypedArray<\/code> gibi karma\u015f\u0131k t\u00fcrlerin bile do\u011frudan g\u00f6nderilebilece\u011fi anlam\u0131na gelir. Ancak, fonksiyonlar, DOM d\u00fc\u011f\u00fcmleri veya \u00f6zel s\u0131n\u0131f \u00f6rnekleri gibi baz\u0131 nesneler klonlanamaz ve g\u00f6nderilmeye \u00e7al\u0131\u015f\u0131ld\u0131\u011f\u0131nda hata f\u0131rlatabilir veya sessizce g\u00f6z ard\u0131 edilebilir.<\/p>\n
\u00c7o\u011fu durumda, JSON serile\u015ftirilebilir veriler (plain objects, arrays, primitives) yeterli olacakt\u0131r. E\u011fer \u00f6zel bir nesne g\u00f6ndermeniz gerekiyorsa, bunu g\u00f6ndermeden \u00f6nce manuel olarak serile\u015ftirmeyi (\u00f6rne\u011fin, JSON.stringify()<\/code> kullanarak bir JSON string’ine d\u00f6n\u00fc\u015ft\u00fcrmek) ve al\u0131c\u0131 tarafta seri durumdan \u00e7\u0131karmay\u0131 (JSON.parse()<\/code> kullanarak) d\u00fc\u015f\u00fcnebilirsiniz.<\/p>\n
\/\/ Karma\u015f\u0131k bir nesne g\u00f6nderme\nconst complexData = {\n    id: 1,\n    name: '\u00d6rnek \u00dcr\u00fcn',\n    details: {\n        price: 99.99,\n        currency: 'TL'\n    },\n    tags: ['elektronik', 'indirim'],\n    createdAt: new Date()\n};\n\nconst productChannel = new BroadcastChannel('product_channel');\nproductChannel.postMessage(complexData);\n\nproductChannel.onmessage = (event) => {\n    const receivedData = event.data;\n    console.log('Al\u0131nan karma\u015f\u0131k veri:', receivedData);\n    console.log('Olu\u015fturulma tarihi:', receivedData.createdAt); \/\/ Date nesnesi olarak gelir\n    console.log('Fiyat:', receivedData.details.price);\n};<\/code><\/pre>\nG\u00fcvenlik Hususlar\u0131<\/h4>\nBroadcastChannel API’si, ayn\u0131 origin k\u0131s\u0131tlamas\u0131 nedeniyle do\u011fas\u0131 gere\u011fi olduk\u00e7a g\u00fcvenlidir. Yaln\u0131zca ayn\u0131 protokol, host ve port kombinasyonuna sahip sayfalar ve worker’lar birbirleriyle ileti\u015fim kurabilir. Bu, k\u00f6t\u00fc niyetli bir web sitesinin sizin uygulaman\u0131z\u0131n kanallar\u0131n\u0131 dinlemesini veya onlara mesaj g\u00f6ndermesini engeller.<\/p>\n
Ancak, uygulama i\u00e7inde dikkat edilmesi gereken baz\u0131 noktalar vard\u0131r:
\n*   Hassas Veriler:<\/strong> \u00c7ok hassas bilgileri (\u015fifreler, API anahtarlar\u0131 vb.) BroadcastChannel \u00fczerinden do\u011frudan g\u00f6ndermekten ka\u00e7\u0131n\u0131n. E\u011fer zorunluysa, mesaj\u0131 g\u00f6ndermeden \u00f6nce istemci taraf\u0131nda \u015fifrelemeyi d\u00fc\u015f\u00fcnmelisiniz. Genellikle, BroadcastChannel’\u0131n kullan\u0131m amac\u0131, durum g\u00fcncellemeleri veya olay bildirimleri gibi daha az hassas veriler i\u00e7indir.
\n*   Mesaj Do\u011frulama:<\/strong> Gelen mesajlar\u0131n beklenen yap\u0131da olup olmad\u0131\u011f\u0131n\u0131 her zaman kontrol edin. K\u00f6t\u00fc niyetli bir betik (ayn\u0131 origin i\u00e7inde s\u0131zm\u0131\u015f olsa bile) beklenmedik veya zararl\u0131 mesajlar g\u00f6ndermeye \u00e7al\u0131\u015fabilir.<\/p>\n
myChannel.onmessage = (event) => {\n    const message = event.data;\n    if (message && typeof message === 'object' && message.type === 'user_action') {\n        \/\/ Mesaj yap\u0131s\u0131n\u0131 do\u011frula\n        if (typeof message.action === 'string' && ['logout', 'update_profile'].includes(message.action)) {\n            \/\/ G\u00fcvenli mesaj\u0131 i\u015fle\n            console.log('G\u00fcvenli kullan\u0131c\u0131 eylemi al\u0131nd\u0131:', message.action);\n        } else {\n            console.warn('Ge\u00e7ersiz kullan\u0131c\u0131 eylemi mesaj\u0131 al\u0131nd\u0131:', message);\n        }\n    } else {\n        console.warn('Beklenmedik mesaj format\u0131:', message);\n    }\n};<\/code><\/pre>\nPerformans<\/h4>\nBroadcastChannel API’si olduk\u00e7a hafiftir ve genellikle performans sorunlar\u0131na yol a\u00e7maz. Taray\u0131c\u0131lar, bu t\u00fcr dahili ileti\u015fim mekanizmalar\u0131n\u0131 optimize etmek i\u00e7in tasarlanm\u0131\u015ft\u0131r. Ancak, \u00e7ok b\u00fcy\u00fck veri bloklar\u0131n\u0131 \u00e7ok s\u0131k g\u00f6ndermekten veya gereksiz yere \u00e7ok say\u0131da kanal olu\u015fturmaktan ka\u00e7\u0131nmak her zaman iyi bir uygulamad\u0131r. Kanal\u0131 kullanmay\u0131 bitirdi\u011finizde close()<\/code> metodunu \u00e7a\u011f\u0131rmak, kaynaklar\u0131 serbest b\u0131rakarak performansa katk\u0131da bulunur.<\/p>\n
Pratik Uygulama \u00d6rnekleri<\/h3>\n\u015eimdi BroadcastChannel API’s\u0131n\u0131 kullanarak birka\u00e7 pratik senaryoyu inceleyelim.<\/p>\n
Oturum Y\u00f6netimi<\/h4>\nBir kullan\u0131c\u0131 bir sekmede oturumunu kapatt\u0131\u011f\u0131nda, di\u011fer t\u00fcm a\u00e7\u0131k sekmeleri bilgilendirelim.<\/p>\n
Sekme A (Oturum Kapatma \u0130\u015flemi):<\/strong><\/p>\n
\n\n\n    \n    \n    Sekme A - Oturum Kapatma<\/title>\n<\/head>\n<body>\n    <h2>Sekme A: Oturum Kapatma<\/h2>\n    <p>Bu sekmede oturum kapatma i\u015flemini sim\u00fcle edin.<\/p>\n    <button id=\"logoutButton\">Oturumu Kapat<\/button>\n\n    <script>\n        const authChannel = new BroadcastChannel('user_auth_channel');\n        const logoutButton = document.getElementById('logoutButton');\n\n        logoutButton.addEventListener('click', () => {\n            \/\/ Sunucuya oturum kapatma iste\u011fi g\u00f6nderildi\u011fini varsayal\u0131m\n            console.log('Oturum kapat\u0131l\u0131yor...');\n            \/\/ Di\u011fer sekmelere oturum kapatma mesaj\u0131 g\u00f6nder\n            authChannel.postMessage({ type: 'logout', message: 'Kullan\u0131c\u0131 oturumu kapat\u0131ld\u0131.' });\n            alert('Oturumunuz kapat\u0131ld\u0131. Di\u011fer sekmeler de bilgilendirildi.');\n            \/\/ Kullan\u0131c\u0131y\u0131 oturum a\u00e7ma sayfas\u0131na y\u00f6nlendir\n            \/\/ window.location.href = '\/login';\n            authChannel.close(); \/\/ Kanal\u0131 kapat\n        });\n\n        \/\/ Kendi g\u00f6nderdi\u011fimiz mesajlar\u0131 almay\u0131z, ancak dinleyiciyi burada da tutabiliriz\n        authChannel.onmessage = (event) => {\n            console.log('Sekme A mesaj ald\u0131:', event.data);\n        };\n    <\/script>\n<\/body>\n<\/html><\/code><\/pre>\n<p><strong>Sekme B (Oturumu Dinleyen Sekme):<\/strong><\/p>\n<pre><code class=\"language-html\"><!DOCTYPE html>\n<html lang=\"tr\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Sekme B - Oturum Dinleyici<\/title>\n<\/head>\n<body>\n    <h2>Sekme B: Oturum Dinleyici<\/h2>\n    <p>Bu sekme, di\u011fer sekmelerdeki oturum de\u011fi\u015fikliklerini dinler.<\/p>\n    <p id=\"status\">Oturum durumu: Aktif<\/p>\n\n    <script>\n        const authChannel = new BroadcastChannel('user_auth_channel');\n        const statusElement = document.getElementById('status');\n\n        authChannel.onmessage = (event) => {\n            console.log('Sekme B mesaj ald\u0131:', event.data);\n            if (event.data && event.data.type === 'logout') {\n                statusElement.textContent = 'Oturum durumu: Kapat\u0131ld\u0131! Yeniden giri\u015f yapmal\u0131s\u0131n\u0131z.';\n                alert('Oturumunuz ba\u015fka bir sekmede kapat\u0131ld\u0131.');\n                \/\/ \u0130ste\u011fe ba\u011fl\u0131 olarak kullan\u0131c\u0131y\u0131 oturum a\u00e7ma sayfas\u0131na y\u00f6nlendir\n                \/\/ window.location.href = '\/login';\n                authChannel.close(); \/\/ Kanal\u0131 kapat\n            }\n        };\n\n        window.addEventListener('beforeunload', () => {\n            authChannel.close(); \/\/ Sekme kapat\u0131l\u0131rken kanal\u0131 kapat\n        });\n    <\/script>\n<\/body>\n<\/html><\/code><\/pre>\n<p>Bu \u00f6rnekte, Sekme A’daki “Oturumu Kapat” d\u00fc\u011fmesine bas\u0131ld\u0131\u011f\u0131nda, <code>user_auth_channel<\/code> \u00fczerinden bir mesaj yay\u0131nlan\u0131r. Sekme B, bu kanal\u0131 dinledi\u011fi i\u00e7in mesaj\u0131 al\u0131r ve kullan\u0131c\u0131ya oturumunun kapat\u0131ld\u0131\u011f\u0131na dair bir bildirim g\u00f6sterir.<\/p>\n<h4>Veri Senkronizasyonu<\/h4>\n<p>Bir e-ticaret uygulamas\u0131nda, bir \u00fcr\u00fcn\u00fc favorilere ekledi\u011finizde, di\u011fer sekmelerdeki favori say\u0131s\u0131n\u0131 g\u00fcncelleyelim.<\/p>\n<p><strong>Sekme A (Favori Ekleme):<\/strong><\/p>\n<pre><code class=\"language-html\"><!DOCTYPE html>\n<html lang=\"tr\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Sekme A - Favori Ekle<\/title>\n<\/head>\n<body>\n    <h2>Sekme A: Favori Ekle<\/h2>\n    <p>Bir \u00fcr\u00fcn\u00fcn favori durumunu de\u011fi\u015ftirin.<\/p>\n    <button id=\"toggleFavorite\">Favorilere Ekle\/Kald\u0131r<\/button>\n    <p>Mevcut Favori Say\u0131s\u0131: <span id=\"favoriteCount\">0<\/span><\/p>\n\n    <script>\n        const favoriteChannel = new BroadcastChannel('favorite_updates');\n        const toggleFavoriteButton = document.getElementById('toggleFavorite');\n        const favoriteCountSpan = document.getElementById('favoriteCount');\n\n        let currentFavorites = 0; \/\/ Ba\u015flang\u0131\u00e7ta 0 favori oldu\u011funu varsayal\u0131m\n\n        function updateFavoriteCount(count) {\n            currentFavorites = count;\n            favoriteCountSpan.textContent = currentFavorites;\n        }\n\n        toggleFavoriteButton.addEventListener('click', () => {\n            const newCount = currentFavorites + (toggleFavoriteButton.textContent.includes('Ekle') ? 1 : -1);\n            updateFavoriteCount(newCount);\n            toggleFavoriteButton.textContent = newCount > 0 ? 'Favorilerden Kald\u0131r' : 'Favorilere Ekle';\n\n            \/\/ Di\u011fer sekmelere favori say\u0131s\u0131n\u0131 g\u00fcncelleme mesaj\u0131 g\u00f6nder\n            favoriteChannel.postMessage({\n                type: 'favorite_count_update',\n                count: newCount\n            });\n            console.log('Favori say\u0131s\u0131 g\u00fcncellendi ve yay\u0131nland\u0131:', newCount);\n        });\n\n        favoriteChannel.onmessage = (event) => {\n            if (event.data && event.data.type === 'favorite_count_update') {\n                console.log('Sekme A, di\u011fer sekmeden favori g\u00fcncellemesi ald\u0131:', event.data.count);\n                updateFavoriteCount(event.data.count);\n            }\n        };\n\n        window.addEventListener('beforeunload', () => favoriteChannel.close());\n    <\/script>\n<\/body>\n<\/html><\/code><\/pre>\n<p><strong>Sekme B (Favori Say\u0131s\u0131 G\u00f6sterimi):<\/strong><\/p>\n<pre><code class=\"language-html\"><!DOCTYPE html>\n<html lang=\"tr\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Sekme B - Favoriler<\/title>\n<\/head>\n<body>\n    <h2>Sekme B: Favori Say\u0131s\u0131<\/h2>\n    <p>Di\u011fer sekmelerdeki favori g\u00fcncellemelerini takip edin.<\/p>\n    <p>Mevcut Favori Say\u0131s\u0131: <span id=\"favoriteCount\">0<\/span><\/p>\n\n    <script>\n        const favoriteChannel = new BroadcastChannel('favorite_updates');\n        const favoriteCountSpan = document.getElementById('favoriteCount');\n\n        function updateFavoriteCount(count) {\n            favoriteCountSpan.textContent = count;\n        }\n\n        \/\/ Ba\u015flang\u0131\u00e7ta veya sayfa y\u00fcklendi\u011finde favori say\u0131s\u0131n\u0131 sunucudan\/localStorage'dan \u00e7ekebiliriz.\n        \/\/ \u015eimdilik 0 varsayal\u0131m.\n        updateFavoriteCount(0);\n\n        favoriteChannel.onmessage = (event) => {\n            if (event.data && event.data.type === 'favorite_count_update') {\n                console.log('Sekme B, di\u011fer sekmeden favori g\u00fcncellemesi ald\u0131:', event.data.count);\n                updateFavoriteCount(event.data.count);\n            }\n        };\n\n        window.addEventListener('beforeunload', () => favoriteChannel.close());\n    <\/script>\n<\/body>\n<\/html><\/code><\/pre>\n<p>Bu \u00f6rnekte, Sekme A’daki d\u00fc\u011fmeye her bas\u0131ld\u0131\u011f\u0131nda, <code>favorite_updates<\/code> kanal\u0131 \u00fczerinden g\u00fcncel favori say\u0131s\u0131 yay\u0131nlan\u0131r. Sekme B, bu kanal\u0131 dinledi\u011fi i\u00e7in <code>favoriteCount<\/code> de\u011ferini an\u0131nda g\u00fcnceller.<\/p>\n<h4>Web Worker ile \u0130leti\u015fim<\/h4>\n<p>Ana i\u015f par\u00e7ac\u0131\u011f\u0131 ile bir Web Worker aras\u0131nda BroadcastChannel kullanarak mesajla\u015fma.<\/p>\n<p><strong>worker.js (Web Worker dosyas\u0131):<\/strong><\/p>\n<pre><code class=\"language-javascript\">\/\/ worker.js\nconst workerChannel = new BroadcastChannel('worker_communication_channel');\n\nworkerChannel.onmessage = (event) => {\n    console.log('Worker, ana i\u015f par\u00e7ac\u0131\u011f\u0131ndan mesaj ald\u0131:', event.data);\n    if (event.data && event.data.type === 'start_task') {\n        const taskId = event.data.taskId;\n        console.log(<code>Worker, g\u00f6revi ba\u015flat\u0131yor: ${taskId}<\/code>);\n        \/\/ Yo\u011fun bir i\u015flem sim\u00fclasyonu\n        let result = 0;\n        for (let i = 0; i < 1000000000; i++) {\n            result += i;\n        }\n        console.log(<code>Worker, g\u00f6revi tamamlad\u0131: ${taskId}, sonu\u00e7: ${result}<\/code>);\n        workerChannel.postMessage({\n            type: 'task_completed',\n            taskId: taskId,\n            result: result\n        });\n    }\n};\n\nworkerChannel.postMessage({ type: 'worker_ready', message: 'Worker haz\u0131r!' });\n\n\/\/ Worker kapat\u0131ld\u0131\u011f\u0131nda kanal\u0131 kapat\nself.addEventListener('close', () => {\n    workerChannel.close();\n});\n\nconsole.log('Web Worker ba\u015flat\u0131ld\u0131.');<\/code><\/pre>\n<p><strong>index.html (Ana i\u015f par\u00e7ac\u0131\u011f\u0131):<\/strong><\/p>\n<pre><code class=\"language-html\"><!DOCTYPE html>\n<html lang=\"tr\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Web Worker ile BroadcastChannel<\/title>\n<\/head>\n<body>\n    <h2>Web Worker ile BroadcastChannel \u0130leti\u015fimi<\/h2>\n    <button id=\"startWorkerTask\">Worker G\u00f6revini Ba\u015flat<\/button>\n    <p>Worker Durumu: <span id=\"workerStatus\">Bekleniyor...<\/span><\/p>\n    <p>Sonu\u00e7: <span id=\"workerResult\"><\/span><\/p>\n\n    <script>\n        let myWorker;\n        const workerChannel = new BroadcastChannel('worker_communication_channel');\n        const workerStatusSpan = document.getElementById('workerStatus');\n        const workerResultSpan = document.getElementById('workerResult');\n        const startWorkerTaskButton = document.getElementById('startWorkerTask');\n\n        if (window.Worker) {\n            myWorker = new Worker('worker.js'); \/\/ Worker'\u0131 ba\u015flat\n            workerStatusSpan.textContent = 'Worker ba\u015flat\u0131ld\u0131.';\n\n            workerChannel.onmessage = (event) => {\n                console.log('Ana i\u015f par\u00e7ac\u0131\u011f\u0131, worker\\'dan mesaj ald\u0131:', event.data);\n                if (event.data && event.data.type === 'worker_ready') {\n                    workerStatusSpan.textContent = event.data.message;\n                } else if (event.data && event.data.type === 'task_completed') {\n                    workerStatusSpan.textContent = <code>G\u00f6rev ${event.data.taskId} tamamland\u0131.<\/code>;\n                    workerResultSpan.textContent = event.data.result;\n                    startWorkerTaskButton.disabled = false; \/\/ G\u00f6rev bitince tekrar etkinle\u015ftir\n                }\n            };\n\n            startWorkerTaskButton.addEventListener('click', () => {\n                startWorkerTaskButton.disabled = true;\n                workerStatusSpan.textContent = 'Worker g\u00f6rev yap\u0131yor...';\n                const taskId = Math.random().toString(36).substring(7);\n                workerChannel.postMessage({ type: 'start_task', taskId: taskId });\n                console.log('Ana i\u015f par\u00e7ac\u0131\u011f\u0131, worker\\'a g\u00f6rev ba\u015flama mesaj\u0131 g\u00f6nderdi.');\n            });\n\n            window.addEventListener('beforeunload', () => {\n                workerChannel.close(); \/\/ Sekme kapat\u0131l\u0131rken kanal\u0131 kapat\n                if (myWorker) {\n                    myWorker.terminate(); \/\/ Worker'\u0131 sonland\u0131r\n                }\n            });\n\n        } else {\n            workerStatusSpan.textContent = 'Web Worker\\'lar taray\u0131c\u0131n\u0131zda desteklenmiyor.';\n            startWorkerTaskButton.disabled = true;\n        }\n    <\/script>\n<\/body>\n<\/html><\/code><\/pre>\n<p>Bu \u00f6rnekte, ana i\u015f par\u00e7ac\u0131\u011f\u0131 ve Web Worker, <code>worker_communication_channel<\/code> ad\u0131nda bir BroadcastChannel kullanarak ileti\u015fim kurar. Ana i\u015f par\u00e7ac\u0131\u011f\u0131 bir g\u00f6rev ba\u015flatma mesaj\u0131 g\u00f6nderir, worker bu mesaj\u0131 al\u0131r, g\u00f6revi tamamlar ve sonucu ayn\u0131 kanal \u00fczerinden geri yay\u0131nlar.<\/p>\n<h3>Taray\u0131c\u0131 Deste\u011fi<\/h3>\n<p>BroadcastChannel API’si, modern web taray\u0131c\u0131lar\u0131nda olduk\u00e7a geni\u015f bir deste\u011fe sahiptir:<br \/>\n*   <strong>Google Chrome:<\/strong> Destekler (v54 ve sonras\u0131)<br \/>\n*   <strong>Mozilla Firefox:<\/strong> Destekler (v38 ve sonras\u0131)<br \/>\n*   <strong>Apple Safari:<\/strong> Destekler (v10.1 ve sonras\u0131)<br \/>\n*   <strong>Microsoft Edge:<\/strong> Destekler (v14 ve sonras\u0131)<br \/>\n*   <strong>Opera:<\/strong> Destekler (v41 ve sonras\u0131)<\/p>\n<p>Internet Explorer’da desteklenmemektedir. Genel olarak, g\u00fcncel web uygulamalar\u0131 i\u00e7in BroadcastChannel g\u00fcvenle kullan\u0131labilir. Detayl\u0131 ve g\u00fcncel taray\u0131c\u0131 deste\u011fi bilgisi i\u00e7in [Can I use BroadcastChannel](https:\/\/caniuse.com\/broadcastchannel) adresini kontrol edebilirsiniz.<\/p>\n<h3>S\u0131n\u0131rlamalar ve Alternatifler<\/h3>\n<p>BroadcastChannel API’si bir\u00e7ok senaryo i\u00e7in harika bir \u00e7\u00f6z\u00fcm olsa da, baz\u0131 s\u0131n\u0131rlamalar\u0131 vard\u0131r ve her durum i\u00e7in en iyi se\u00e7enek olmayabilir.<\/p>\n<h4>S\u0131n\u0131rlamalar<\/h4>\n<p>*   <strong>Ayn\u0131 Origin K\u0131s\u0131tlamas\u0131:<\/strong> En \u00f6nemli s\u0131n\u0131rlama, yaln\u0131zca ayn\u0131 origin (protokol, host, port) i\u00e7indeki ba\u011flamlar aras\u0131nda ileti\u015fim kurabilmesidir. Farkl\u0131 domain’ler veya subdomain’ler aras\u0131 ileti\u015fim i\u00e7in kullan\u0131lamaz.<br \/>\n*   <strong>Mesaj S\u0131ras\u0131 Garantisi Yok (Teorik):<\/strong> Spesifikasyonda mesajlar\u0131n tam olarak hangi s\u0131rada teslim edilece\u011fi garanti edilmez. Pratikte \u00e7o\u011fu taray\u0131c\u0131da s\u0131ra korunsa da, kritik s\u0131ralama gerektiren senaryolarda ek mant\u0131k (\u00f6rne\u011fin, mesajlara zaman damgas\u0131 veya s\u0131ra numaras\u0131 ekleyerek) gerekebilir.<br \/>\n*   <strong>Kal\u0131c\u0131 De\u011fil:<\/strong> Kanal ba\u011flant\u0131s\u0131, taray\u0131c\u0131 sekmeleri kapat\u0131ld\u0131\u011f\u0131nda veya yenilendi\u011finde kesilir. BroadcastChannel, kal\u0131c\u0131 veri depolama veya uzun s\u00fcreli arka plan i\u015flemleri i\u00e7in tasarlanmam\u0131\u015ft\u0131r. Bu t\u00fcr ihtiya\u00e7lar i\u00e7in IndexedDB veya Service Worker’lar daha uygun olabilir.<br \/>\n*   <strong>G\u00fcvenlik (Ayn\u0131 Origin \u0130\u00e7inde):<\/strong> Ayn\u0131 origin i\u00e7indeki herhangi bir betik kanala mesaj g\u00f6nderebilir veya kanal\u0131 dinleyebilir. Bu, XSS (Cross-Site Scripting) sald\u0131r\u0131lar\u0131 durumunda hassas verilerin a\u00e7\u0131\u011fa \u00e7\u0131kmas\u0131na neden olabilir. Bu nedenle, BroadcastChannel \u00fczerinden g\u00f6nderilen verilere kar\u015f\u0131 her zaman dikkatli olunmal\u0131 ve gelen mesajlar do\u011frulanmal\u0131d\u0131r.<\/p>\n<h4>Alternatifler<\/h4>\n<p>Yukar\u0131da da bahsedildi\u011fi gibi, BroadcastChannel’\u0131n alternatifi olabilecek ba\u015fka ileti\u015fim y\u00f6ntemleri de vard\u0131r, ancak her birinin kendi kullan\u0131m durumlar\u0131 ve s\u0131n\u0131rlamalar\u0131 bulunur:<br \/>\n*   <strong><code>localStorage<\/code> Event (<code>storage<\/code> olay\u0131):<\/strong> String tabanl\u0131, her de\u011fi\u015fiklikte tetiklenir, kontrol\u00fc daha azd\u0131r.<br \/>\n*   <strong><code>SharedWorker<\/code>:<\/strong> Daha karma\u015f\u0131k senaryolar i\u00e7in merkezi bir worker sa\u011flar, ancak kurulumu BroadcastChannel’dan daha zahmetlidir.<br \/>\n*   <strong><code>window.postMessage()<\/code> ve <code>worker.postMessage()<\/code>:<\/strong> Belirli bir pencere veya worker’a mesaj g\u00f6ndermek i\u00e7in kullan\u0131l\u0131r, yay\u0131n yapmak i\u00e7in de\u011fil.<br \/>\n*   <strong>WebSockets veya Server-Sent Events (SSE):<\/strong> Sunucu ile \u00e7ift y\u00f6nl\u00fc veya tek y\u00f6nl\u00fc (sunucudan istemciye) ileti\u015fim i\u00e7in kullan\u0131l\u0131r. Taray\u0131c\u0131 i\u00e7i ileti\u015fimden ziyade istemci-sunucu ileti\u015fimi i\u00e7in uygundur ve sunucu altyap\u0131s\u0131 gerektirir.<br \/>\n*   <strong>IndexedDB veya Web SQL:<\/strong> Veri depolama ve dolayl\u0131 ileti\u015fim i\u00e7in kullan\u0131labilir, ancak do\u011frudan mesajla\u015fma API’si de\u011fildir.<\/p>\n<p>Se\u00e7im, uygulaman\u0131z\u0131n \u00f6zel ihtiya\u00e7lar\u0131na, ileti\u015fim t\u00fcr\u00fcne (yay\u0131n m\u0131, hedefli mi), veri hassasiyetine ve karma\u015f\u0131kl\u0131\u011f\u0131na ba\u011fl\u0131 olacakt\u0131r. \u00c7o\u011fu taray\u0131c\u0131 i\u00e7i yay\u0131n ihtiyac\u0131 i\u00e7in BroadcastChannel en basit ve en etkili \u00e7\u00f6z\u00fcmd\u00fcr.<\/p>\n<h3>Sonu\u00e7<\/h3>\n<p>BroadcastChannel API’si, modern web uygulamalar\u0131nda ayn\u0131 origin i\u00e7indeki farkl\u0131 taray\u0131c\u0131 ba\u011flamlar\u0131 aras\u0131nda ileti\u015fim kurma sorununa zarif ve standart bir \u00e7\u00f6z\u00fcm sunar. Oturum y\u00f6netimi, veri senkronizasyonu, Web Worker’lar aras\u0131 ileti\u015fim gibi yayg\u0131n senaryolarda geli\u015ftiricilere b\u00fcy\u00fck kolayl\u0131k sa\u011flar. Basit s\u00f6zdizimi, otomatik veri serile\u015ftirme ve geni\u015f taray\u0131c\u0131 deste\u011fi ile BroadcastChannel, web geli\u015ftiricilerinin ara\u00e7 kutusunda \u00f6nemli bir yer edinmi\u015ftir.<\/p>\n<p>Bu makalede, BroadcastChannel’\u0131n temel prensiplerini, kullan\u0131m\u0131n\u0131 ad\u0131m ad\u0131m kod \u00f6rnekleriyle, geli\u015fmi\u015f senaryolar\u0131 ve dikkat edilmesi gereken g\u00fcvenlik ve performans hususlar\u0131n\u0131 ayr\u0131nt\u0131l\u0131 bir \u015fekilde ele ald\u0131k. Ayr\u0131ca, di\u011fer taray\u0131c\u0131 i\u00e7i ileti\u015fim y\u00f6ntemleriyle kar\u015f\u0131la\u015ft\u0131rmalar yaparak BroadcastChannel’\u0131n ne zaman en iyi se\u00e7im oldu\u011funu vurgulad\u0131k.<\/p>\n<p>Uygulamalar\u0131n\u0131zda birden fazla sekme, pencere veya worker aras\u0131nda etkili bir \u015fekilde ileti\u015fim kurman\u0131z gerekti\u011finde, BroadcastChannel API’s\u0131n\u0131 g\u00f6z \u00f6n\u00fcnde bulundurmak, daha tutarl\u0131, etkile\u015fimli ve kullan\u0131c\u0131 dostu deneyimler olu\u015fturman\u0131za yard\u0131mc\u0131 olacakt\u0131r. Bu API’nin sundu\u011fu basitlik ve g\u00fcvenilirlik sayesinde, geli\u015ftiriciler ileti\u015fim altyap\u0131s\u0131yla u\u011fra\u015fmak yerine uygulaman\u0131n temel i\u015flevselli\u011fine odaklanabilirler.<\/body><\/p>\n","protected":false},"excerpt":{"rendered":"JavaScript’te BroadcastChannel API’\u0131 Nas\u0131l Kullan\u0131l\u0131r?","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[129],"tags":[],"class_list":{"0":"post-40343","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-javascript","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v20.5 (Yoast SEO v25.3.1) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>JavaScript'te BroadcastChannel API'\u0131 Nas\u0131l Kullan\u0131l\u0131r? Kapsaml\u0131 Bir Rehber - Kodlar\u0131n Gizemli D\u00fcnyas\u0131<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fatihsoysal.com\/blog\/javascriptte-broadcastchannel-apii-nasil-kullanilir-kapsamli-bir-rehber\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"JavaScript'te BroadcastChannel API'\u0131 Nas\u0131l Kullan\u0131l\u0131r? Kapsaml\u0131 Bir Rehber\" \/>\n<meta property=\"og:description\" content=\"JavaScript'te BroadcastChannel API'\u0131 Nas\u0131l Kullan\u0131l\u0131r?\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/javascriptte-broadcastchannel-apii-nasil-kullanilir-kapsamli-bir-rehber\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2026-02-26T05:40:56+00:00\" \/>\n<meta name=\"author\" content=\"Fatih Soysal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fatih Soysal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"20 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/javascriptte-broadcastchannel-apii-nasil-kullanilir-kapsamli-bir-rehber\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/javascriptte-broadcastchannel-apii-nasil-kullanilir-kapsamli-bir-rehber\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"JavaScript’te BroadcastChannel API’\u0131 Nas\u0131l Kullan\u0131l\u0131r? Kapsaml\u0131 Bir Rehber\",\"datePublished\":\"2026-02-26T05:40:56+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/javascriptte-broadcastchannel-apii-nasil-kullanilir-kapsamli-bir-rehber\/\"},\"wordCount\":3267,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"articleSection\":[\"Javascript\"],\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/javascriptte-broadcastchannel-apii-nasil-kullanilir-kapsamli-bir-rehber\/#respond\"]}],\"copyrightYear\":\"2026\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/javascriptte-broadcastchannel-apii-nasil-kullanilir-kapsamli-bir-rehber\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/javascriptte-broadcastchannel-apii-nasil-kullanilir-kapsamli-bir-rehber\/\",\"name\":\"JavaScript'te BroadcastChannel API'\u0131 Nas\u0131l Kullan\u0131l\u0131r? Kapsaml\u0131 Bir Rehber - Kodlar\u0131n Gizemli D\u00fcnyas\u0131\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2026-02-26T05:40:56+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/javascriptte-broadcastchannel-apii-nasil-kullanilir-kapsamli-bir-rehber\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/javascriptte-broadcastchannel-apii-nasil-kullanilir-kapsamli-bir-rehber\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/javascriptte-broadcastchannel-apii-nasil-kullanilir-kapsamli-bir-rehber\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript’te BroadcastChannel API’\u0131 Nas\u0131l Kullan\u0131l\u0131r? Kapsaml\u0131 Bir Rehber\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/\",\"name\":\"Fatihsoysal.com\",\"description\":\"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim\",\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\",\"name\":\"Fatih Soysal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"contentUrl\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"width\":512,\"height\":512,\"caption\":\"Fatih Soysal\"},\"logo\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\"},\"description\":\"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"JavaScript'te BroadcastChannel API'\u0131 Nas\u0131l Kullan\u0131l\u0131r? Kapsaml\u0131 Bir Rehber - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fatihsoysal.com\/blog\/javascriptte-broadcastchannel-apii-nasil-kullanilir-kapsamli-bir-rehber\/","og_locale":"tr_TR","og_type":"article","og_title":"JavaScript'te BroadcastChannel API'\u0131 Nas\u0131l Kullan\u0131l\u0131r? Kapsaml\u0131 Bir Rehber","og_description":"JavaScript'te BroadcastChannel API'\u0131 Nas\u0131l Kullan\u0131l\u0131r?","og_url":"https:\/\/fatihsoysal.com\/blog\/javascriptte-broadcastchannel-apii-nasil-kullanilir-kapsamli-bir-rehber\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2026-02-26T05:40:56+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"20 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/javascriptte-broadcastchannel-apii-nasil-kullanilir-kapsamli-bir-rehber\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/javascriptte-broadcastchannel-apii-nasil-kullanilir-kapsamli-bir-rehber\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"JavaScript’te BroadcastChannel API’\u0131 Nas\u0131l Kullan\u0131l\u0131r? Kapsaml\u0131 Bir Rehber","datePublished":"2026-02-26T05:40:56+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/javascriptte-broadcastchannel-apii-nasil-kullanilir-kapsamli-bir-rehber\/"},"wordCount":3267,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"articleSection":["Javascript"],"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/javascriptte-broadcastchannel-apii-nasil-kullanilir-kapsamli-bir-rehber\/#respond"]}],"copyrightYear":"2026","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/javascriptte-broadcastchannel-apii-nasil-kullanilir-kapsamli-bir-rehber\/","url":"https:\/\/fatihsoysal.com\/blog\/javascriptte-broadcastchannel-apii-nasil-kullanilir-kapsamli-bir-rehber\/","name":"JavaScript'te BroadcastChannel API'\u0131 Nas\u0131l Kullan\u0131l\u0131r? Kapsaml\u0131 Bir Rehber - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2026-02-26T05:40:56+00:00","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/javascriptte-broadcastchannel-apii-nasil-kullanilir-kapsamli-bir-rehber\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/javascriptte-broadcastchannel-apii-nasil-kullanilir-kapsamli-bir-rehber\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/javascriptte-broadcastchannel-apii-nasil-kullanilir-kapsamli-bir-rehber\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"JavaScript’te BroadcastChannel API’\u0131 Nas\u0131l Kullan\u0131l\u0131r? Kapsaml\u0131 Bir Rehber"}]},{"@type":"WebSite","@id":"https:\/\/fatihsoysal.com\/blog\/#website","url":"https:\/\/fatihsoysal.com\/blog\/","name":"Fatihsoysal.com","description":"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim","publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"tr"},{"@type":["Person","Organization"],"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1","name":"Fatih Soysal","image":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","contentUrl":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","width":512,"height":512,"caption":"Fatih Soysal"},"logo":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/"},"description":"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.","url":"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/"}]}},"yoast_meta":{"yoast_wpseo_title":"","yoast_wpseo_metadesc":"","yoast_wpseo_canonical":""},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/40343","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/comments?post=40343"}],"version-history":[{"count":1,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/40343\/revisions"}],"predecessor-version":[{"id":40344,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/40343\/revisions\/40344"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=40343"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=40343"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=40343"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}