Ger\u00e7ek zamanl\u0131 uygulamalar, modern web deneyiminin ayr\u0131lmaz bir par\u00e7as\u0131 haline gelmi\u015ftir. Anl\u0131k bildirimler, canl\u0131 sohbet odalar\u0131, \u00e7ok oyunculu oyunlar, finansal grafikler ve i\u015fbirli\u011fine dayal\u0131 ara\u00e7lar gibi bir\u00e7ok alanda kullan\u0131c\u0131 deneyimini zenginle\u015ftiren bu uygulamalar, sunucu ile istemci aras\u0131nda s\u00fcrekli ve h\u0131zl\u0131 bir ileti\u015fim kurma yetene\u011fine dayan\u0131r. Bu makalede, g\u00fc\u00e7l\u00fc bir backend i\u00e7in Node.js, ger\u00e7ek zamanl\u0131 ileti\u015fim i\u00e7in Socket.IO ve dinamik bir kullan\u0131c\u0131 aray\u00fcz\u00fc i\u00e7in Angular’\u0131 kullanarak s\u0131f\u0131rdan bir ger\u00e7ek zamanl\u0131 uygulama geli\u015ftirmeyi ad\u0131m ad\u0131m inceleyece\u011fiz.<\/p>\n
Ger\u00e7ek zamanl\u0131 uygulamalar, kullan\u0131c\u0131lar\u0131n an\u0131nda geri bildirim almas\u0131n\u0131 ve etkile\u015fimde bulunmas\u0131n\u0131 sa\u011flayarak geleneksel “istek-yan\u0131t” d\u00f6ng\u00fcs\u00fcn\u00fcn s\u0131n\u0131rlamalar\u0131n\u0131 a\u015far. Bu t\u00fcr uygulamalar, kullan\u0131c\u0131lar\u0131n bir eylemi ger\u00e7ekle\u015ftirdi\u011fi anda veya sunucuda bir veri de\u011fi\u015fikli\u011fi meydana geldi\u011finde, ilgili t\u00fcm istemcilere an\u0131nda bilgi ak\u0131\u015f\u0131n\u0131 m\u00fcmk\u00fcn k\u0131lar. Bu yetenek, kullan\u0131c\u0131 kat\u0131l\u0131m\u0131n\u0131 art\u0131r\u0131r ve daha ak\u0131c\u0131, etkile\u015fimli bir deneyim sunar.<\/p>\n
Node.js, asenkron yap\u0131s\u0131 ve olay tabanl\u0131 mimarisi sayesinde ger\u00e7ek zamanl\u0131 uygulamalar i\u00e7in ideal bir backend platformudur. Y\u00fcksek e\u015fzamanl\u0131 ba\u011flant\u0131lar\u0131 d\u00fc\u015f\u00fck gecikmeyle y\u00f6netebilir. Socket.IO, Node.js ekosisteminin en pop\u00fcler ger\u00e7ek zamanl\u0131 k\u00fct\u00fcphanelerinden biridir. WebSocket protokol\u00fcn\u00fc soyutlayarak, taray\u0131c\u0131 uyumlulu\u011fu, otomatik yeniden ba\u011flant\u0131, odalar ve yay\u0131nlama gibi geli\u015fmi\u015f \u00f6zellikler sunar. Angular ise, bile\u015fen tabanl\u0131 mimarisi ve g\u00fc\u00e7l\u00fc veri ba\u011flama yetenekleriyle karma\u015f\u0131k kullan\u0131c\u0131 aray\u00fczlerini olu\u015fturmak i\u00e7in m\u00fckemmel bir se\u00e7imdir. Bu \u00fc\u00e7 teknolojinin birle\u015fimi, hem \u00f6l\u00e7eklenebilir hem de bak\u0131m\u0131 kolay ger\u00e7ek zamanl\u0131 uygulamalar geli\u015ftirmek i\u00e7in sa\u011flam bir temel olu\u015fturur.<\/p>\n
Bu rehberde, bir sohbet uygulamas\u0131 \u00f6rne\u011fi \u00fczerinden, Node.js ile bir Socket.IO sunucusu kurmay\u0131, Angular ile bir Socket.IO istemcisi geli\u015ftirmeyi ve bu iki taraf\u0131 birle\u015ftirerek tam te\u015fekk\u00fcll\u00fc bir ger\u00e7ek zamanl\u0131 uygulama olu\u015fturmay\u0131 \u00f6\u011frenece\u011fiz. Ayr\u0131ca, uygulaman\u0131z\u0131 daha g\u00fc\u00e7l\u00fc ve esnek hale getirecek ileri seviye konulara da de\u011finece\u011fiz.<\/p>\n
Ger\u00e7ek zamanl\u0131 uygulamalar\u0131n arkas\u0131ndaki temel prensipleri anlamak, bu t\u00fcr sistemleri etkili bir \u015fekilde geli\u015ftirmek i\u00e7in kritik \u00f6neme sahiptir. Geleneksel web uygulamalar\u0131n\u0131n \u00e7al\u0131\u015fma \u015fekli ile ger\u00e7ek zamanl\u0131 uygulamalar\u0131n ihtiya\u00e7lar\u0131 aras\u0131ndaki fark\u0131 kavramak, do\u011fru teknolojileri se\u00e7memize yard\u0131mc\u0131 olacakt\u0131r.<\/p>\n
Geleneksel web uygulamalar\u0131, HTTP protokol\u00fc \u00fczerine kuruludur ve “istek-yan\u0131t” d\u00f6ng\u00fcs\u00fcyle \u00e7al\u0131\u015f\u0131r. Bir istemci (taray\u0131c\u0131), bir sunucuya bir istek g\u00f6nderir ve sunucu bu iste\u011fi i\u015fleyip bir yan\u0131t d\u00f6ner. Bu model, sayfa y\u00fcklemeleri veya form g\u00f6nderimleri gibi tek seferlik veri al\u0131\u015fveri\u015fleri i\u00e7in olduk\u00e7a etkilidir. Ancak, sunucunun istemciye an\u0131nda bilgi g\u00f6ndermesi gerekti\u011finde veya s\u00fcrekli, \u00e7ift y\u00f6nl\u00fc bir ileti\u015fim hatt\u0131na ihtiya\u00e7 duyuldu\u011funda yetersiz kal\u0131r.<\/p>\n
\u00d6rne\u011fin, bir sohbet uygulamas\u0131nda her yeni mesaj geldi\u011finde istemcinin sunucuya s\u00fcrekli istek g\u00f6ndermesi (polling) veya sunucunun uzun s\u00fcre bekletip bir yan\u0131t d\u00f6nd\u00fcrmesi (long-polling) gibi y\u00f6ntemler, hem sunucu kaynaklar\u0131n\u0131 verimsiz kullan\u0131r hem de gecikmeye neden olur. Bu y\u00f6ntemler, ger\u00e7ek zamanl\u0131 deneyim i\u00e7in gerekli olan anl\u0131k ileti\u015fimi sa\u011flamakta zorlan\u0131r ve performans sorunlar\u0131na yol a\u00e7abilir.<\/p>\n
WebSocket protokol\u00fc, HTTP’nin s\u0131n\u0131rlamalar\u0131n\u0131 a\u015fmak i\u00e7in tasarlanm\u0131\u015ft\u0131r. Tek bir TCP ba\u011flant\u0131s\u0131 \u00fczerinden tam \u00e7ift y\u00f6nl\u00fc (full-duplex) ileti\u015fim kanal\u0131 kurar. Yani, hem istemci sunucuya hem de sunucu istemciye ayn\u0131 anda ve ba\u011f\u0131ms\u0131z olarak veri g\u00f6nderebilir. Bir WebSocket ba\u011flant\u0131s\u0131, ilk el s\u0131k\u0131\u015fma (handshake) tamamland\u0131ktan sonra a\u00e7\u0131k kal\u0131r ve bu sayede s\u00fcrekli bir ileti\u015fim hatt\u0131 sa\u011flan\u0131r. Bu, anl\u0131k veri ak\u0131\u015f\u0131 gerektiren uygulamalar i\u00e7in idealdir.<\/p>\n
WebSocket’in temel avantajlar\u0131 \u015funlard\u0131r: WebSocket protokol\u00fc g\u00fc\u00e7l\u00fc olsa da, farkl\u0131 taray\u0131c\u0131lar ve a\u011f ko\u015fullar\u0131 aras\u0131nda tutarl\u0131 bir deneyim sa\u011flamak bazen zor olabilir. \u0130\u015fte burada Socket.IO devreye girer. Socket.IO, WebSocket’in \u00fczerine in\u015fa edilmi\u015f bir k\u00fct\u00fcphanedir ve ger\u00e7ek zamanl\u0131 uygulamalar geli\u015ftirmeyi \u00e7ok daha kolay hale getirir.<\/p>\n Socket.IO’nun ba\u015fl\u0131ca avantajlar\u0131: \u00d6zetle, Socket.IO, WebSocket’in g\u00fcc\u00fcn\u00fc ve esnekli\u011fini al\u0131rken, ger\u00e7ek d\u00fcnya da\u011f\u0131t\u0131m senaryolar\u0131nda ortaya \u00e7\u0131kabilecek zorluklar\u0131 soyutlayarak geli\u015ftiricilere daha sorunsuz bir deneyim sunar.<\/p>\n Ger\u00e7ek zamanl\u0131 uygulamam\u0131z\u0131 geli\u015ftirmeye ba\u015flamadan \u00f6nce, gerekli ara\u00e7lar\u0131 kurmal\u0131 ve projemizin temel klas\u00f6r yap\u0131s\u0131n\u0131 olu\u015fturmal\u0131y\u0131z. Bu ad\u0131mlar, geli\u015ftirme s\u00fcrecimizin sorunsuz ilerlemesini sa\u011flayacakt\u0131r.<\/p>\n Bu rehberi takip etmek i\u00e7in a\u015fa\u011f\u0131daki yaz\u0131l\u0131mlar\u0131n sisteminizde kurulu olmas\u0131 gerekmektedir:<\/p>\n 1. Node.js ve npm (Node Package Manager):<\/strong> Node.js, backend’imizi \u00e7al\u0131\u015ft\u0131rmak i\u00e7in gereklidir. npm ise Node.js paketlerini y\u00f6netmek i\u00e7in kullan\u0131l\u0131r. Node.js’in resmi web sitesinden (nodejs.org) en son LTS (Uzun S\u00fcreli Destek) s\u00fcr\u00fcm\u00fcn\u00fc indirebilirsiniz. Kurulumdan sonra terminalinizde Projemizi d\u00fczenli tutmak i\u00e7in backend ve frontend kodlar\u0131n\u0131 ayr\u0131 klas\u00f6rlerde bar\u0131nd\u0131raca\u011f\u0131z. Ana projemiz i\u00e7in \u015eimdi bu ana klas\u00f6r\u00fcn i\u00e7ine Bu yap\u0131, iki ayr\u0131 uygulaman\u0131n ba\u011f\u0131ms\u0131z olarak geli\u015ftirilmesini ve y\u00f6netilmesini sa\u011flar.<\/p>\n \u015eimdi projemizin Node.js taraf\u0131n\u0131, yani Socket.IO sunucusunu geli\u015ftirmeye ba\u015flayabiliriz. Bu k\u0131s\u0131m, istemcilerden gelen ba\u011flant\u0131lar\u0131 y\u00f6netecek, olaylar\u0131 dinleyecek ve istemcilere veri yay\u0131nlayacakt\u0131r.<\/p>\n \u0130lk olarak, Bu komut, varsay\u0131lan ayarlarla bir * express:<\/strong> HTTP sunucumuzu olu\u015fturmak i\u00e7in kullanaca\u011f\u0131m\u0131z pop\u00fcler bir Node.js web \u00e7er\u00e7evesidir. Bu kod par\u00e7as\u0131 \u015funlar\u0131 yapar: Yukar\u0131daki \u00f6rnekte temel olay y\u00f6netimini g\u00f6rd\u00fck ( * \u015eimdilik chat uygulamam\u0131z i\u00e7in \u015eimdi s\u0131ra Angular taraf\u0131nda, yani Socket.IO istemcisini geli\u015ftirmeye geldi. Bu k\u0131s\u0131m, kullan\u0131c\u0131 aray\u00fcz\u00fcn\u00fc olu\u015fturacak, Socket.IO sunucusuna ba\u011flanacak ve olaylar\u0131 dinleyip g\u00f6nderecektir.<\/p>\n * Angular projemizin i\u00e7ine Socket.IO istemci k\u00fct\u00fcphanesini kural\u0131m:<\/p>\n Ger\u00e7ek zamanl\u0131 ileti\u015fimi y\u00f6netmek i\u00e7in bir Angular servisi olu\u015ftural\u0131m. Bu servis, Socket.IO ba\u011flant\u0131s\u0131n\u0131 kuracak, olaylar\u0131 dinleyecek ve g\u00f6nderecek.<\/p>\n \u015eimdi Bu servis \u015funlar\u0131 yapar: \u015eimdi bir chat bile\u015feni olu\u015ftural\u0131m ve bu bile\u015fende \u015eimdi Ve
\n* D\u00fc\u015f\u00fck Gecikme:<\/strong> Ba\u011flant\u0131 bir kez kuruldu\u011funda, ek HTTP ba\u015fl\u0131klar\u0131 olmadan do\u011frudan veri al\u0131\u015fveri\u015fi yap\u0131labilir, bu da gecikmeyi \u00f6nemli \u00f6l\u00e7\u00fcde azalt\u0131r.
\n* Tam \u00c7ift Y\u00f6nl\u00fc \u0130leti\u015fim:<\/strong> \u0130stemci ve sunucu ayn\u0131 anda veri g\u00f6nderip alabilir.
\n* Verimlilik:<\/strong> Ba\u011flant\u0131 a\u00e7\u0131k kald\u0131\u011f\u0131 i\u00e7in her istek i\u00e7in yeni bir ba\u011flant\u0131 kurma maliyeti ortadan kalkar.
\n* Sunucu Taraf\u0131ndan \u0130stemciye \u0130leti\u015fim:<\/strong> Sunucu, istemcinin bir istek g\u00f6ndermesini beklemeden do\u011frudan veri g\u00f6nderebilir.<\/p>\nSocket.IO Neden Kullan\u0131lmal\u0131?<\/h3>\n
\n* Taray\u0131c\u0131 Uyumlulu\u011fu ve Fallback Mekanizmalar\u0131:<\/strong> Socket.IO, istemci ve sunucu aras\u0131nda en iyi ileti\u015fim y\u00f6ntemini otomatik olarak se\u00e7er. E\u011fer WebSocket ba\u011flant\u0131s\u0131 m\u00fcmk\u00fcn de\u011filse (eski taray\u0131c\u0131lar veya baz\u0131 a\u011f proxy’leri nedeniyle), otomatik olarak long-polling gibi di\u011fer y\u00f6ntemlere geri d\u00f6ner. Bu, uygulaman\u0131z\u0131n geni\u015f bir kullan\u0131c\u0131 kitlesi taraf\u0131ndan eri\u015filebilir olmas\u0131n\u0131 sa\u011flar.
\n* Otomatik Yeniden Ba\u011flant\u0131:<\/strong> A\u011f kesintileri veya sunucu yeniden ba\u015flatmalar\u0131 durumunda, Socket.IO istemcisi otomatik olarak sunucuya yeniden ba\u011flanmaya \u00e7al\u0131\u015f\u0131r ve bu s\u00fcre\u00e7te kaybolan verileri kurtarmaya yard\u0131mc\u0131 olabilir.
\n* Mesaj Yay\u0131nlama (Broadcasting) ve Odalar (Rooms):<\/strong> Belirli bir olay\u0131 t\u00fcm ba\u011fl\u0131 istemcilere, belirli bir gruba (oda) veya belirli bir istemciye yay\u0131nlamak i\u00e7in kolay API’ler sunar. Bu, sohbet uygulamalar\u0131, bildirim sistemleri gibi bir\u00e7ok senaryoda b\u00fcy\u00fck kolayl\u0131k sa\u011flar.
\n* Olay Tabanl\u0131 Mimari:<\/strong> Socket.IO, olay tabanl\u0131 bir yap\u0131ya sahiptir. \u0130stemciler belirli olaylar\u0131 dinleyebilir ve sunucular belirli olaylar\u0131 yayabilir. Bu, kodunuzu daha mod\u00fcler ve y\u00f6netilebilir hale getirir.
\n* Hata Y\u00f6netimi:<\/strong> Ba\u011flant\u0131 hatalar\u0131 ve di\u011fer sorunlar i\u00e7in yerle\u015fik hata y\u00f6netimi mekanizmalar\u0131 sunar.<\/p>\nProje Ortam\u0131n\u0131n Haz\u0131rlanmas\u0131<\/h2>\n
\u00d6n Ko\u015fullar<\/h3>\n
node -v<\/code> ve npm -v<\/code> komutlar\u0131n\u0131 \u00e7al\u0131\u015ft\u0131rarak do\u011fru \u015fekilde kurulup kurulmad\u0131\u011f\u0131n\u0131 kontrol edebilirsiniz.
\n2. Angular CLI (Command Line Interface):<\/strong> Angular projeleri olu\u015fturmak, geli\u015ftirmek ve derlemek i\u00e7in kullan\u0131lan bir komut sat\u0131r\u0131 arac\u0131d\u0131r. npm install -g @angular\/cli<\/code> komutu ile global olarak kurabilirsiniz. Kurulumdan sonra ng v<\/code> komutu ile s\u00fcr\u00fcm\u00fcn\u00fc kontrol edebilirsiniz.
\n3. Bir Kod D\u00fczenleyici\/IDE:<\/strong> Visual Studio Code (VS Code) gibi modern bir kod d\u00fczenleyici, intellisense, hata ay\u0131klama ve Git entegrasyonu gibi \u00f6zelliklerle geli\u015ftirme s\u00fcrecinizi b\u00fcy\u00fck \u00f6l\u00e7\u00fcde kolayla\u015ft\u0131racakt\u0131r.<\/p>\nKlas\u00f6r Yap\u0131s\u0131 ve Temel Kurulum<\/h3>\n
realtime-app<\/code> ad\u0131nda bir klas\u00f6r olu\u015ftural\u0131m.<\/p>\nmkdir realtime-app\ncd realtime-app<\/code><\/pre>\nbackend<\/code> ve frontend<\/code> ad\u0131nda iki alt klas\u00f6r olu\u015ftural\u0131m:<\/p>\nmkdir backend\nmkdir frontend<\/code><\/pre>\nNode.js Backend Geli\u015ftirme (Socket.IO Sunucusu)<\/h3>\n
Node.js Projesinin Olu\u015fturulmas\u0131<\/h3>\n
backend<\/code> klas\u00f6r\u00fcne ge\u00e7elim ve yeni bir Node.js projesi ba\u015flatal\u0131m:<\/p>\ncd backend\nnpm init -y<\/code><\/pre>\npackage.json<\/code> dosyas\u0131 olu\u015fturacakt\u0131r. \u015eimdi gerekli ba\u011f\u0131ml\u0131l\u0131klar\u0131 kural\u0131m:<\/p>\nnpm install express socket.io cors<\/code><\/pre>\n
\n* socket.io:<\/strong> Ger\u00e7ek zamanl\u0131 ileti\u015fim i\u00e7in Socket.IO sunucu k\u00fct\u00fcphanesidir.
\n* cors:<\/strong> Farkl\u0131 k\u00f6kenlerden (domain) gelen istekleri kabul etmek i\u00e7in Cross-Origin Resource Sharing (CORS) middleware’idir. Angular uygulamam\u0131z farkl\u0131 bir portta \u00e7al\u0131\u015faca\u011f\u0131 i\u00e7in bu gereklidir.<\/p>\nTemel Sunucu Kurulumu (
index.js<\/code> veya app.js<\/code>)<\/h3>\nbackend<\/code> klas\u00f6r\u00fcnde index.js<\/code> ad\u0131nda yeni bir dosya olu\u015ftural\u0131m ve temel sunucu kurulumunu yapal\u0131m:<\/p>\n\/\/ backend\/index.js\n\nconst express = require('express');\nconst http = require('http');\nconst socketIo = require('socket.io');\nconst cors = require('cors');\n\nconst app = express();\nconst server = http.createServer(app); \/\/ Express uygulamas\u0131n\u0131 bir HTTP sunucusuna ba\u011fla\n\n\/\/ CORS ayarlar\u0131: Angular frontend'imizin localhost:4200'den ba\u011flanmas\u0131na izin ver\nconst io = socketIo(server, {\n cors: {\n origin: \"http:\/\/localhost:4200\", \/\/ Angular uygulamas\u0131n\u0131n adresi\n methods: [\"GET\", \"POST\"]\n }\n});\n\nconst PORT = process.env.PORT || 3000;\n\napp.use(cors()); \/\/ Express i\u00e7in CORS middleware'ini etkinle\u015ftir\n\n\/\/ Basit bir HTTP GET iste\u011fi i\u00e7in rota (iste\u011fe ba\u011fl\u0131, Socket.IO i\u00e7in gerekli de\u011fil)\napp.get('\/', (req, res) => {\n res.send('Socket.IO sunucusu \u00e7al\u0131\u015f\u0131yor!');\n});\n\n\/\/ Socket.IO ba\u011flant\u0131 olaylar\u0131n\u0131 dinle\nio.on('connection', (socket) => {\n console.log('Yeni bir kullan\u0131c\u0131 ba\u011fland\u0131:', socket.id);\n\n \/\/ \u0130stemciden 'sendMessage' olay\u0131n\u0131 dinle\n socket.on('sendMessage', (message) => {\n console.log('Mesaj al\u0131nd\u0131:', message);\n \/\/ Gelen mesaj\u0131 t\u00fcm ba\u011fl\u0131 istemcilere geri g\u00f6nder\n io.emit('message', {\n text: message.text,\n user: message.user,\n id: socket.id,\n timestamp: new Date().toLocaleTimeString()\n });\n });\n\n \/\/ Kullan\u0131c\u0131 ayr\u0131ld\u0131\u011f\u0131nda\n socket.on('disconnect', () => {\n console.log('Bir kullan\u0131c\u0131 ayr\u0131ld\u0131:', socket.id);\n });\n});\n\nserver.listen(PORT, () => {\n console.log(Sunucu http:\/\/localhost:${PORT} adresinde \u00e7al\u0131\u015f\u0131yor<\/code>);\n});<\/code><\/pre>\n
\n1. Gerekli Mod\u00fclleri Y\u00fckler:<\/strong> express<\/code>, http<\/code>, socket.io<\/code> ve cors<\/code>.
\n2. Express Uygulamas\u0131 Olu\u015fturur:<\/strong> app = express()<\/code>.
\n3. HTTP Sunucusu Olu\u015fturur:<\/strong> http.createServer(app)<\/code> ile Express uygulamas\u0131n\u0131 sarmalar. Socket.IO’nun bir HTTP sunucusu \u00fczerinde \u00e7al\u0131\u015fmas\u0131 gerekir.
\n4. Socket.IO Sunucusunu Ba\u015flat\u0131r:<\/strong> socketIo(server, {...})<\/code> ile HTTP sunucusunu Socket.IO’ya ba\u011flar. CORS ayarlar\u0131<\/strong> burada \u00e7ok \u00f6nemlidir. Angular uygulamam\u0131z farkl\u0131 bir portta (genellikle 4200) \u00e7al\u0131\u015faca\u011f\u0131 i\u00e7in, Socket.IO sunucumuzun bu adresten gelen ba\u011flant\u0131lara izin vermesi gerekir.
\n5. CORS Middleware’i:<\/strong> app.use(cors())<\/code> ile Express HTTP rotalar\u0131 i\u00e7in de CORS’u etkinle\u015ftirir.
\n6. Socket.IO Ba\u011flant\u0131 Olay\u0131:<\/strong> io.on('connection', (socket) => { ... })<\/code> yeni bir istemci sunucuya ba\u011fland\u0131\u011f\u0131nda tetiklenir. Her ba\u011fl\u0131 istemci i\u00e7in benzersiz bir socket<\/code> nesnesi olu\u015fturulur.
\n7. sendMessage<\/code> Olay\u0131:<\/strong> Bir istemci sendMessage<\/code> ad\u0131nda bir olay g\u00f6nderdi\u011finde, sunucu bu olay\u0131 yakalar.
\n8. io.emit('message', ...)<\/code>:<\/strong> Sunucu, ald\u0131\u011f\u0131 mesaj\u0131 message<\/code> olay\u0131yla t\u00fcm ba\u011fl\u0131 istemcilere<\/strong> geri yay\u0131nlar. Bu, bir chat uygulamas\u0131n\u0131n temelini olu\u015fturur.
\n9. disconnect<\/code> Olay\u0131:<\/strong> Bir istemci ba\u011flant\u0131s\u0131 kesildi\u011finde tetiklenir.
\n10. Sunucuyu Dinlemeye Ba\u015flar:<\/strong> server.listen(PORT, ...)<\/code> ile sunucuyu belirli bir portta (varsay\u0131lan olarak 3000) dinlemeye ba\u015flar.<\/p>\nSocket.IO Olaylar\u0131n\u0131 Y\u00f6netme<\/h3>\n
connection<\/code>, disconnect<\/code>, sendMessage<\/code>). Socket.IO, farkl\u0131 yay\u0131nlama y\u00f6ntemleri sunarak ileti\u015fimi daha esnek hale getirir:<\/p>\nsocket.emit('event', data)<\/code>:<\/strong> Sadece olay\u0131 tetikleyen istemciye veri g\u00f6nderir.
\n* io.emit('event', data)<\/code>:<\/strong> T\u00fcm ba\u011fl\u0131 istemcilere veri g\u00f6nderir. (Yukar\u0131daki chat \u00f6rne\u011finde kullan\u0131ld\u0131)
\n* socket.broadcast.emit('event', data)<\/code>:<\/strong> Olay\u0131 tetikleyen istemci hari\u00e7, t\u00fcm di\u011fer ba\u011fl\u0131 istemcilere veri g\u00f6nderir.
\n* io.to('roomName').emit('event', data)<\/code>:<\/strong> Belirli bir odaya kat\u0131lm\u0131\u015f t\u00fcm istemcilere veri g\u00f6nderir. (\u0130leri seviye konularda detayland\u0131r\u0131lacak)
\n* socket.join('roomName')<\/code> \/ socket.leave('roomName')<\/code>:<\/strong> Bir istemciyi bir odaya dahil etmek veya odadan \u00e7\u0131karmak i\u00e7in kullan\u0131l\u0131r.<\/p>\nio.emit()<\/code> kullan\u0131m\u0131 yeterlidir. Backend’imiz haz\u0131r!<\/p>\nAngular Frontend Geli\u015ftirme (Socket.IO \u0130stemcisi)<\/h3>\n
Angular Projesinin Olu\u015fturulmas\u0131<\/h3>\n
frontend<\/code> klas\u00f6r\u00fcne ge\u00e7elim ve yeni bir Angular projesi olu\u015ftural\u0131m:<\/p>\ncd ..\/frontend # E\u011fer backend klas\u00f6r\u00fcndeyseniz, bir \u00fcst dizine \u00e7\u0131k\u0131p frontend'e girin\nng new frontend-app --skip-git --style=scss --routing=false\ncd frontend-app<\/code><\/pre>\n--skip-git<\/code>: Git deposu olu\u015fturmay\u0131 atlar (iste\u011fe ba\u011fl\u0131).
\n* --style=scss<\/code>: CSS \u00f6n i\u015flemcisi olarak SCSS kullan\u0131r (iste\u011fe ba\u011fl\u0131).
\n* --routing=false<\/code>: Ba\u015flang\u0131\u00e7ta routing mod\u00fcl\u00fc olu\u015fturmaz (basit bir uygulama i\u00e7in gerek yok).<\/p>\nSocket.IO \u0130stemci K\u00fct\u00fcphanesinin Kurulumu<\/h3>\n
npm install socket.io-client<\/code><\/pre>\nSocket.IO Servisi Olu\u015fturma<\/h3>\n
ng generate service services\/socket<\/code><\/pre>\nsrc\/app\/services\/socket.service.ts<\/code> dosyas\u0131n\u0131 a\u00e7al\u0131m ve i\u00e7eri\u011fini g\u00fcncelleyelim:<\/p>\n\/\/ frontend\/frontend-app\/src\/app\/services\/socket.service.ts\n\nimport { Injectable } from '@angular\/core';\nimport { io, Socket } from 'socket.io-client';\nimport { Observable } from 'rxjs';\n\n@Injectable({\n providedIn: 'root'\n})\nexport class SocketService {\n private socket: Socket;\n private readonly serverUrl = 'http:\/\/localhost:3000'; \/\/ Node.js sunucumuzun adresi\n\n constructor() {\n this.socket = io(this.serverUrl); \/\/ Socket.IO sunucusuna ba\u011flan\n }\n\n \/\/ Sunucuya mesaj g\u00f6nderme\n sendMessage(message: { text: string, user: string }): void {\n this.socket.emit('sendMessage', message);\n }\n\n \/\/ Sunucudan gelen 'message' olay\u0131n\u0131 dinleme\n onMessage(): Observable
\n1. socket.io-client<\/code> k\u00fct\u00fcphanesinden io<\/code> ve Socket<\/code> nesnelerini import eder.
\n2. serverUrl<\/code> de\u011fi\u015fkeninde Node.js sunucumuzun adresini tutar.
\n3. Constructor i\u00e7inde io(this.serverUrl)<\/code> ile Socket.IO sunucusuna ba\u011flant\u0131 kurar.
\n4. sendMessage<\/code> metodu ile sunucuya sendMessage<\/code> olay\u0131n\u0131 ve mesaj verisini g\u00f6nderir.
\n5. onMessage<\/code> metodu, sunucudan gelen message<\/code> olaylar\u0131n\u0131 bir Observable<\/code> olarak d\u00f6nd\u00fcr\u00fcr. Bu sayede bile\u015fenler bu Observable<\/code>‘a abone olarak ger\u00e7ek zamanl\u0131 mesajlar\u0131 alabilirler.
\n6. onConnect<\/code> ve onDisconnect<\/code> gibi metotlar, ba\u011flant\u0131 durumunu izlemek i\u00e7in eklenebilir.<\/p>\nBile\u015fenlerin Geli\u015ftirilmesi (\u00d6rnek: Chat Bile\u015feni)<\/h3>\n
SocketService<\/code>‘i kullanarak mesaj g\u00f6nderip alal\u0131m.<\/p>\nng generate component components\/chat<\/code><\/pre>\nsrc\/app\/components\/chat\/chat.component.ts<\/code> dosyas\u0131n\u0131 a\u00e7al\u0131m:<\/p>\n\/\/ frontend\/frontend-app\/src\/app\/components\/chat\/chat.component.ts\n\nimport { Component, OnInit, OnDestroy } from '@angular\/core';\nimport { SocketService } from '..\/..\/services\/socket.service';\nimport { Subscription } from 'rxjs';\n\ninterface Message {\n text: string;\n user: string;\n id: string; \/\/ Socket ID\n timestamp: string;\n}\n\n@Component({\n selector: 'app-chat',\n templateUrl: '.\/chat.component.html',\n styleUrls: ['.\/chat.component.scss']\n})\nexport class ChatComponent implements OnInit, OnDestroy {\n messageText: string = '';\n userName: string = 'Kullan\u0131c\u0131' + Math.floor(Math.random() * 100); \/\/ Rastgele kullan\u0131c\u0131 ad\u0131\n messages: Message[] = [];\n private messageSubscription: Subscription | undefined;\n\n constructor(private socketService: SocketService) { }\n\n ngOnInit(): void {\n \/\/ Mesajlar\u0131 dinlemeye ba\u015fla\n this.messageSubscription = this.socketService.onMessage().subscribe((message: Message) => {\n this.messages.push(message);\n });\n\n \/\/ Ba\u011flant\u0131 durumunu da dinleyebiliriz (iste\u011fe ba\u011fl\u0131)\n this.socketService.onConnect().subscribe(status => console.log('Socket durumu:', status));\n this.socketService.onDisconnect().subscribe(status => console.log('Socket durumu:', status));\n }\n\n sendMessage(): void {\n if (this.messageText.trim()) {\n const message = {\n text: this.messageText,\n user: this.userName\n };\n this.socketService.sendMessage(message);\n this.messageText = ''; \/\/ Mesaj g\u00f6nderildikten sonra inputu temizle\n }\n }\n\n ngOnDestroy(): void {\n \/\/ Bile\u015fen yok edildi\u011finde aboneli\u011fi iptal et\n if (this.messageSubscription) {\n this.messageSubscription.unsubscribe();\n }\n }\n}<\/code><\/pre>\nsrc\/app\/components\/chat\/chat.component.html<\/code> dosyas\u0131n\u0131 g\u00fcncelleyelim:<\/p>\n\n\nSocket.IO Chat Uygulamas\u0131<\/h2>\n