Nodejs her geçen gün daha fazla kullanılmaya başlıyor. Bununla beraber Nodejs’le geliştirilen uygulamaların sayısı da artmaya başladı. 2 arkadaş beraber geliştirdiğimiz Listenlike.me‘de bunlardan biri. Bu yazıda hem Nodejs+Socket.io ile örnek bir karşılıklı chat uygulaması yapacağız, hem de sık kullanılan frameworklerden biri olan Socket.io’nun genel komutlarını öğrenereceğiz.
Nodejs kurulumu çok basit. Nodejs.org’dan indirdiğiniz exeyi çalıştırıp Next-next demeniz yeterli. Çalışma prensibi ve nodejs, socket.io hakkında bilgi alabileceğiniz linkleri yazının en altına ekledim.
Standart 2 dosya üzerinden (index.html, server.js) işlemleri yapacağız. İndex.html’de kullanıcı arayüzü ve Client tarafta çalışacak komutlarımız, Server.js de ise server’da çalışacak komutlarımız yer alacak.(bu komutları aşağıda detaylı açıklayacağım.)
Uygulamanın anlatımına geçmeden önce kullandığımız ve Socket’in temel fonksiyonlarından bahsecedeğim.
io.sockets.on('connection', function(socket){- server.js dosyamızda yer alacak io.sockets.on fonksiyonunun connection komutu diğer tüm node fonksiyonlarını kapsar. Bağlantılar, client iletişimi vs vs herşey bu fonksiyon altında tanımlanır.
socket.on('mesajgonder', function(data){...}- socket.on ‘connection’ içinde kullanılan, aşağıda ki diğer socket fonksiyonları kapsar. Client-Server iletişimi bu fonksiyon içinde emit ve on ile yürür.
socket.emit('mesajgitti', data) //server
socket.emit('mesajgonder',{'mesaj' : mesaj,}); //client- socket.emit Server’dan client’e, client’den servera veri taşır. Yukarıda ki ilk satırda server.js’de kullanımı, 2.satır’da Json tipinde client tarafında kullanımını ekledim.Örnek chat uygulamasında da Json tipinde verileri aldım. İstenirse değişken olarakta tanımlanabilir. O da şöyle;
socket.emit("mesajgonder",mesaj);var socket = io.connect("http://localhost:3000");- Client’te oluşturduğumuz socket değişkenini io.connect(host) komutu ile hostla ilişkilendiriyoruz. Bu komutla socket’i dinlemeye başladık.
socket.broadcast.emit, socket.emit.to, gibi çeşitli fonksiyonlar var. Bunlar Client harici herkese göster, sadece client’e göster gibi iletişimi özelleştirilebilmek için kullanılır. Daha detaylı kullanım için tıklayın.
Uygulamaya başlayalım
Yazının en altında proje dosyaısnı zip olarak yükledim. Nodejs kurduysanız eğer, herhangi bir klasöre açıp command ile dizine gelip node server.js diyerek uygulamayı çalıştırabilirsiniz.
Bu chat uygulamasında Sadece socket.io kütüphanesini kullanacağız. Nodejs kurulumu bittikten sonra başlat > çalıştır’dan command ekranını açıp, dizininize gidin. ( Başlat>çalıştır>cmd>cd desktop>cd nodejs> benim nodejs klasörüm masaüstünde dizini kendinize göre ayarlayın.)
Dizine geldikten sonra aşağıda ki komutu çalıştırın. Socket.io belirlediğiniz dizine yüklenecektir.
npm install socket.ioKurulum tamamlandıktan sonra server.js ve index.html isminde 2 dosya oluşturun. Aşağıda 2 dosyanın kodlarınıda açıklayarak ekledim.
index.html dosyamız
<!DOCTYPE html>
<head>
<title>Kodrella.com Nodejs Chat Örneği</title>
<meta name="author" content="Mehmet Alp - mehmetalp.com.tr">
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script src="http://localhost:3000/socket.io/socket.io.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var socket = io.connect("http://localhost:3000"); // 3000 portuna connect olduk
$("#mesajGonder").click(function(){ // #mesajgonder'a tıklandığında
var mesaj = $("#mesajinput").val(); // #mesajinput'un value'sini al
var nick = $("#nickinput").val(); // #nickinput'un valuesini al
if (!mesaj){
return; // mesaj değişkeninin içi boşsa ya da yoksa işlem yapma
}
socket.emit('mesajgonder',{ //socket.emit ('mesajgonder') aracılığıyla server.js'de socket.on da bizi bekleyen komutu JSON olarak yolladık.
'mesaj' : mesaj,
'uid' : nick // Hem mesajı hem uid yani kullanıcı kimliğini socket.on'a aktardık.
});
$("#mesajinput").val("");
});
socket.on("mesajgitti", function(data){ //Server.js deki socket.emitten mesaj'ı client'imize socket.on(mesajgitti) ile aldık.
$("#yazismalar").append("<li>"+ data.uid + " diyor ki :" + data.mesaj + "</li>"); // aldığımız datayı(mesaj ve nicki) append ile #yazismalar divinin içerisine li olarak ekledik.
});
});
</script>
</head>
<body>
<div class="chatsite">
<div class="mesaj-kapsa">
<ul id="yazismalar">
<p>Mesajlar</p>
</ul>
</div>
<div class="form-kapsa">
<input type="text" id="nickinput" placeholder="Nick Giriniz"></input>
<textarea id="mesajinput"></textarea>
<button id="mesajGonder">Gönder</button>
</div>
</div>
</body>
</html>Açıklamalarla kısmen karıştı fakat proje dosyası yazının en altında mevcut direkt onu indirebilirsiniz.Server.js dosyamız
var io = require('socket.io').listen(3000); //3000 portunu dinlemeye başladık.
io.sockets.on('connection', function(socket){ // tüm node işlemlerini kapsayan ana fonksiyonumuz
socket.on('mesajgonder', function(data){ //clientte'ki mesajı aldık
socket.emit('mesajgitti', data) //server mesajı client'e geri gönderdi emit ile
socket.broadcast.emit('mesajgitti', data) //
});
});Tamamını uyguladıktan sonra Command’a aşağıda ki komutu uygulayıp dizinimize gelip serverı çalıştıralım.cd desktop/nodejs node server.jsIndex.html dosyasını çalıştırın. Eğer herşeyi doğru yaptıysanız aşağıda ki ekran görüntüsünde basit bir chat arayüzüyle karşılaşacaksınız. Yazıp deneyebilirsiniz. Farklı sekmelerde açıp yazarak hızınıda test edebilirsiniz.
Proje dosyalarını aşağıda ki adresten indirebilirsiniz. Eğer nodejs kurduysanız sorunsuz çalıştırabilirsiniz.
İndir
Önerilen kaynaklar
Kaynak : nodeJS+Socket.IO ile chat uygulaması