Nodejs ile sohbet (chat) sayfası yapımı.
Bu uygulamayı yapabilmek için yerel veya uzaktaki sunucunuzda nodejs, express ve socket.io kurulu olmalı.
Öncelikle kullanacağımız bazı komutlar hakkında bilgi vereyim.
io.on('connection', function(socket))
Sunucu tarafında sockete gelen tüm olayları bu fonksiyon içerisinde kontrol edeceğiz. Bu olaylar clientten gelen herhangi bir bilgi olacaktır. Örneğin gelen mesaj, kullanıcının bağlanması, kullanıcının ayrılması gibi olaylar.
socket.emit('olayadi', veri);
Client tarafında yazacağımız yukarıdaki fonksiyon sunucuya bir olay ismi ve veri göndermektedir. Örneğin sunucuya mesaj göndereceğiz ve daha sonrasında sunucu bu mesajı diğer clientlere gönderecek.
io.emit('olayadi', veri);
clientten servera veri geldiğinde bunu diğer clientlere göndermesi için yukarıdaki fonksiyonu kullanıyoruz.
Peki client veri geldiğinde bunu ne ile kontrol edecek? Bunun cevabı da aşağıdaki kodda saklı.
socket.on('olayadi', function(veri){
//işlemler
});
Şimdi öncelikle sunucu taraflı javascript kodlarını yazalım.
var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);
app.get('/', function(req, res){ //istek geldiğinde index.htmlyi açacak.
res.sendfile('index.html');
});
io.on('connection', function(socket){ //tüm socket olaylarında çalışır. bir kullanıcının bağlanması, clientten sunucuya istek yollanması gibi.
console.log('Kullanıcı bağlandı'); //
socket.on('disconnect', function(){ //disconnect olayında çalışan fonksiyon
console.log('kullanıcı ayrıldı');
});
socket.on('sohbetmesaj', function(msg){ //index.htmlden soket üzerinden sohbetmesaj olayı geldiğinde çalışacak.
console.log('Mesaj: ' + msg); //konsolda mesajı yazdır.
io.emit('sohbetmesaj', msg); //sunucudan diğer clientlere sohbetmesaj ve mesajı gönder
});
});
http.listen(2000, function(){ //2000 portundan http dinleme isteği oluşturuluyor.
console.log('2000 portu dinleniyor. ');
});
Yukarıdaki kodları index.js adlı bir dosyaya kaydedelim. Görüldüğü gibi burada index.html dosyasını çağırıyor. index.html dosyamızı oluşturalım.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sohbet uygulaması</title>
<script type="text/javascript" src="/socket.io/socket.io.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script type="text/javascript">
$(function(){
var socket = io(); //socketi tanımlıyoruz.
function mesajgonderolay(){ //mesaj gönderilmesi olayını tanımladığım fonksiyon
socket.emit('sohbetmesaj', $('#mesaj').val());//sunucuya sohbetmesaj olayını ve mesaj kutusundaki yazıyı gönder
$('#mesaj').val(''); //mesaj kutusundaki yazıyı sıfırla
}
socket.on('sohbetmesaj', function(msg){ //sunucudan sohbetmesaj verisi geldiğinde çalışacak fonksiyon
$('#mesajlar').append($('<li>').text(msg)); //mesajlar idli elemente mesajı ekle.
});
$('#btnmesajgonder').click(mesajgonderolay);//mesajgonder butonuna tıklayınca mesajgonderolayı çağırılıyor.
$('input#mesaj').bind('keypress', function(e) { //entera tıklanıldığında da mesajgonderolayını çağırsın.
if(e.keyCode==13){
mesajgonderolay();
};
});
})
</script>
</head>
<body>
<ul id="mesajlar" type="circle">
<li>Mesaj gönderin</li>
</ul>
<input type="text" id="mesaj" placeholder="Mesaj yazın"/>
<button id="btnmesajgonder">Mesaj gönder</button>
</body>
</html>
Sayfayı, butonları, inputu vs css bilginizle istediğiniz gibi şekillendirebilirsiniz.
Uygulamanın ikinci aşamasında kullanıcı adı alınabilir, görsellik katılabilir, belki odalar oluşturulabilir vs. Yukarıdaki uygulama nodejs ile basit bir chat uygulamasıdır.
iyi çalışmalar.