Node.js Dersleri : Bölüm 4 - Node.JS ve Socket.io ile chat sayfası yapımı
Herkese tekrardan merhaba. Aslında bu yazımın kodlarını github'a koyalı 2-3 hafta olmuştur ama pek github hesabıma bakılmadığından haliyle gören duyan olmamıştır :D Geçen yazımda express library'sinin nasıl kullanıldığını anlatmıştım. Sırada node.js'de socket.io yardımıyla nasıl chat sayfası yapılacağını anlatacağım. Github sayfamdan örnek web applicationu yükleyebilirsiniz. Başlangıçta kısaca socket.io'yu anlatsam iyi olacak. Socket.io, bütün browser'larda (mobil browser'lar dahil) gerçek zamanlı programlar yapmanıza olanak sağlayan, browser'a göre websocket, flash socket vb. birçok socket sistemini otomatik olarak kullanan bir library. Chat sistemi olsun, Forex bilgileri olsun, maç sonuçları olsun, en hızlı ve en düzgün şekilde anlık web application'ları yapmanızı sağlar. Socket nedir, websocket nedir diyenler için linklendirdim detayları oradan okuyabilirsiniz çünkü bu detaylara da girersem kitaplık yazı çıkar. :D Socket.io'nun çalışma mantığı ise şöyle. Öncelikle bir server'da, bir de client tarafta olmak üzere iki bağlantı yaratılıyor. Server tarafında client'ların bağlandığında, event yolladığında, vb. durumlardaki işlemler yapılıyor. Client tarafında ise server'a bağlantı isteği yollama, mesaj yollama, server'dan gelen event'ları çalıştırma gibi işlemler yapılıyor. Yani socket.io ile hem server tarafında hemde client tarafında kod yazmamız gerekiyor. Öncelikle client server'a bağlantı isteği yolluyor. Sonrasında server bağlantıyı kabul ediyor, gerekli işlemleri yaptıktan sonra ise sistem çalışmaya başlıyor. Artık derse başlayabiliriz. Öncelikle command prompt'u yönetici olarak açıp chat sayfasını kuracağınız klasöre gidin ve "express" yazıp enter'a basın ve express library'sini klasöre kurun. Sonrasında "npm install express -d", "npm install jade -d", "npm install socket.io -d" komutlarını çalıştırıyoruz ve jade, express ve socket.io librarylerini klasöre yüklemiş oluyoruz. Şimdi kodlamaya başlayalım. Öncelikle "app.js" dosyasını açalım. Burada routes kısmına "app.get('/chatPage', routes.chatPage);" kodunu ekleyerek "/chatPage" sayfasına gidildiğinde çalışacak route'u yaratıyoruz ve sonrasında routes klasöründeki "index.js" dosyasını açıyoruz. Buraya; exports.chatPage = function(req, res){ res.render("chatPage", { layout: false }); }; kodunu ekliyoruz. Böylelikle chatPage sayfamıza gidildiğinde template olarak "chatPage.jade" dosyasını kullanmasını söylüyoruz. Ek olarak layout kullanmamasını söylüyoruz. Haliyle şimdi de gidip views klasörüne gidip "chatPage.jade" dosyasını yaratıyoruz. "chatPage.jade" dosyasını açıyoruz ve bu linkteki kodu ekliyoruz. Burada chat sayfamızın template'ini hazırlamış oluyoruz. Şimdi gelelim socket.io'nun server tarafını yazmaya. Tekrardan "app.js" dosyasını açıyoruz. Buraya ise bu linkte bulunan kodun 50.satırından sonrasını kopyalayıp dosyanıza ekleyin. Linke baktığınızda zaten her kodun ne anlama geldiğini yazdım. Kısaca anlatmam gerekirse; önce socket.io'yu çağırıyoruz ve express'te hazırladığımız http server'ı gösteriyoruz. Sonrasında ise durumlara göre (kullanıcı bağlandığında, mesaj attığında...gibi) fonksiyonlarımızı yazıyoruz. Tabii socket.io kodlarını da anlatmayı unutmadım :D "socket.on" : Bu fonksiyon sayesinde client tarafından server tarafındaki çağrılabilecek fonksiyonları yaratabiliyoruz. Örneğin "kullaniciEkle" fonksiyonu sayesinde client tarafından kullaniciEkle fonksiyonu çağırabiliyor ve böylelikle kullanıcı listesine yeni kullanıcı ekleniyor, bütün kullanıcılara mesaj atılıyor ve bağlanan kullanıcıya da hoşgeldin mesajı yolluyoruz. "socket.emit" : Bu fonksiyon sayesinde ise server tarafında client tarafındaki fonksiyon çağırabiliyor. Örneğin kullanıcı bağlandığında server tarafında "mesajGonder" fonksiyonu çağrılarak bağlantı kuran kişiye sistem tarafından hoşgeldiniz mesajı yolluyoruz. "socket.broadcast.emit" : Bu fonksiyon ile bağlantıyı gönderen kişi dışındakilerdeki belirtilen fonksiyon çalıştırılıyor. Örneğin yeni kullanıcı bağlandığında diğer kullanıcılara "mesajGonder" fonksiyonu ile bu kişi sisteme bağlandı diye mesaj atıyoruz. "io.sockets.emit" : Bu fonksiyon ile bütün kullanıcılarda belirtilen client fonksiyonu çalıştırılabiliyor. Örneğin yeni bir kullanıcı bağlandığında bütün kullanıcılarda "kullanicilariYenile" fonksiyonu çağrılıyor. Böylelikle bağlı kullanıcı listesi yenileniyor. Şimdi server tarafını da hallettiysek, client tarafına geçiyoruz. "Public/Javascripts" klasörüne geçiyoruz ve "Main.js" dosyası yaratıyoruz. Bu dosyaya ise bu linkteki kodları ekliyoruz. Client tarafında ise socket.io kodları yukarda yazdıklarımın aynısı. Sadece tersi diyebilirim :D Şöyle ki; socket.on kodu ile nasıl ki server tarafında yazıldığında client tarafından çağırabilen fonksiyon yaratılıyorsa, client tarafında yazıldığında ise server tarafından çağırabilen client fonksiyonlar yazabiliyorsunuz gibi. Son olarak ise "Public/stylesheets" klasörüne gidiyoruz ve "style.css" dosyası yaratıyoruz. Buraya ise bu linkteki kodu ekliyoruz. Bu kısım tamamen sayfanın tasarımını hazırlıyor. İstediğiniz şekilde değiştirebilirsiniz artık size kalmış. Eğer herşey düzgün şekilde yazmışsanız aşağıdaki görüntü gibi bir görüntü oluşturabilirsiniz. Test etmek için hazırladığınız sayfayı ayrı ayrı hem firefox, hem chrome hem de internet explorer'da açın ve bu sayede 3 kişilik bağlantı kurmuş olursunuz. Kolay gelsin.
//////////////////////////////////////////// blog.ilkerguller.com by Ilker Guller