node.js: ChatYS 2.0 yayında.

Daha önce ChatYS adında node.js altyapısını kullanan basit bir sohbet uygulaması yazmıştım. Yeni sürümde sıfırdan jQuery ve Twitter bootstrap kullanan basit bir arayüz geliştirdim ve projeye yeni özellikler ekledim.

node.js nedir diyorsanız inceleme yazıma tıklayabilirsiniz.

nodejs-chatys-2-0

Özellikler :

Bu sistem arka tarafta node.js, express.js, socket.io ve jade ile yazılmıştır. Ön tarafta jQuery ve Twitter Bootstrap kullanılmıştır. Basit olarak misafirlere sohbet etme imkanı sağlıyor.

  • “http://www.bootstrapcdn.com/?v=082013” adresinden alınmış 8 farklı bootstrap tema seçeneği. Kullanıcı bunları sağ üst taraftan seçebiliyor.
  • Önceki sürüme kıyasla HTML etiketi kullanımı engellenmiştir.
  • Diğer misafirler mesaj gönderdiğinde sayfası aktif olmayan kişilerin sayfa başlığı (title) “Yeni mesaj var !” animasyonu ile değişiyor.
  • Bağlı kişi sayısını ve misafirin ip adresini gösteriyor.
  • Sistem her bir misafirin takma adına rastgele renk veriyor.
  • Kişiler “/temizle” komutu ile kendi ekranını temizleyebiliyor.
  • Kimin bağlanıp, kimin ayrıldığını görebiliyoruz.

 

“public>javascripts>site.js” içeriği

$(Document_Loaded);

var title = "ChatYS 2.0"; // Site Başlığı
var sunucu = "http://localhost:3000"; // Sunucu adresi ve portu
var socket = null;

function Document_Loaded()
{    
    BootstrapFuncs();
    ClientEvents();

}
function ClientEvents()
{
    $("title,#title").html(title);

    $("#themelist a").click(function(e){
        e.preventDefault();       
        $("#bootheme").attr("href",$(this).attr("href"));
    });

    $("#txtNick").keydown(function(e){         
        if(e.keyCode == 13) {  
            if($(this).val() !== "")
            {
                $(this).popover('hide');

                $(".progress").show();
                socket = io.connect(sunucu);

                $("#txtNick").hide();  
                socket.emit('Giris', $(this).val());       
                $("#txtMsj").show(); 

                SocketEvents();                

            }
            else
            {
                $(this).popover('show');
            }
        }
    });

    $("#txtMsj").keydown(function(e){         
        if(e.keyCode == 13) {               
            var msj = $(this).val();
            if(msj === '/temizle'){ // Buradan herkesin kullanabileceği komutlar ekleyebilirsiniz.
                $("#cikti").html("");                
            }else
            {
                $(".progress").show();                
                socket.emit('MsjGonder', msj);
            }

            $(this).val("");  

        }
    }); 

    $(window).focus(function () {
        document.title = title;
        hasFocus = true; 
    });
    window.onblur = function () {      
        hasFocus = false;        
    };
}  

function SocketEvents(){

    socket.on('Giris',function(data){ // Kişi sayfaya nickini yazıp girdiğinde..             
        $("#cikti").prepend("<b style='color:"+data.kisi.renk+"'>"+data.kisi.nick+" has connected.</b><hr>");           

        $("#kisisayisi").html(data.kisisayisi);
        $("#bilgiler").show();
        $(".progress").hide();
    });

    socket.on('MsjGoster', function (data) { // Herhangi bir kişi mesaj gönderirse..       
        if(!hasFocus  && !titleCurrentlyChanging)
        {       
            changeTitle();
        }

        $("#cikti").prepend("<b style='color:"+data.kisi.renk+"'>"+data.kisi.nick +"</b> : "+ data.msj +"<hr>");   
        $(".progress").hide();

    });

    socket.on('Cikis', function (data) { // Kişi sayfadan ayrıldığında çalışacak olay.
        $("#kisisayisi").html(parseInt($("#kisisayisi").html())-1);
        $("#cikti").prepend("<b style='color:"+data.kisi.renk+"'>"+data.kisi.nick+" has disconnected.</b><hr>");  

    });
}
function BootstrapFuncs(){
    $("#txtNick").popover({content : "* Where are you going without enter the nick ?", placement : "top",trigger:"manual"});    
}

var hasFocus = true;
var titleCurrentlyChanging = false;
var i = 0;

function changeTitle() {
    i++;
    if(i%2) {
        document.title = 'New message !';
    }
    else {
        document.title = title;
    }

    if(!hasFocus) {
        titleCurrentlyChanging = true;
        setTimeout('changeTitle()',1000);
    }
    else {
        titleCurrentlyChanging = false;
        i=0;
        document.title = title;
    }
}

“public>javascripts>app.js” içeriği

var config = require("./config/config"),
    express = require('express'),       
    app = express(),    
    http = require("http"),
    server = app.listen(config.port),
    io = require('socket.io').listen(server),
    utils = require("./lib/utils");

app.configure(function(){

    app.set('views', __dirname + '/views');
    app.set('view engine', 'jade');

    app.use(express.bodyParser());        
    app.use(express.methodOverride());

    app.use(express.static(__dirname + '/public'));
    app.use(express.logger('dev'));

}); 

var kisiler = [];

io.sockets.on('connection', function (socket) {

    socket.on('Giris', function (data){

        socket.kisi = {
            id:socket.id,
            nick:utils.removeTags(data),
            renk:utils.GetRandomColor()

        };

        kisiler.push(socket.kisi);

        io.sockets.emit('Giris',{kisi:socket.kisi, kisisayisi:kisiler.length });                     

    });   

    socket.on('MsjGonder', function (data) {             
        io.sockets.emit('MsjGoster', {kisi:socket.kisi, msj: utils.removeTags(data) });
    });

    socket.on('disconnect', function () {
        io.sockets.emit('Cikis', {kisi:socket.kisi});
        kisiler = utils.DelObjById(socket.id,kisiler);
    });

});    

app.get('/', function(req, res){
    res.render('index',  { ip : utils.getClientIp(req) } );    
});

console.log('Çayı koydu, dinleniyor : '+ config.port);

 

Projeye deneyebilmek için ilk önce bilgisayarınıza node.js son sürümünü kurmamız gerekiyor.

Daha önceki yazımda projeyi localhost altında nasıl yayınlayacağımızı anlatmıştım.

 

GitHub :  https://github.com/yusufdoru/chatys20

 

Kolay gelsin.

 

Yayınlayan

Yusuf Doru

İstanbul'da yaşıyor. Web ve masaüstü ortamlarında çalışmalar yapıyor. Araştırıyor, geliştiriyor. Kendine ait kişisel blogu var. Her ne kadar .NET dillerine ilgisi olsa da, açık kaynaklı programlama dillerinde de kendini geliştirmeye devam ediyor.

“node.js: ChatYS 2.0 yayında.” üzerine 15 yorum

  1. hocam projeyi çalıştırmaya çalışırken şöyle bir hata alıyorum sence nedendir?

    C:\chat>node app.js

    module.js:340
        throw err;
              ^
    Error: Cannot find module ‘../bin/builder’
        at Function.Module._resolveFilename (module.js:338:15)
        at Function.Module._load (module.js:280:25)
        at Module.require (module.js:364:17)
        at require (module.js:380:17)
        at object.module.io (C:\chat\node_modules\socket.io\node_modules\socket.io-c
    lient\lib\io.js:156:18)
        at Object. (C:\chat\node_modules\socket.io\node_modules\socket.io
    -client\lib\io.js:206:3)
        at Module._compile (module.js:456:26)
        at Object.Module._extensions..js (module.js:474:10)
        at Module.load (module.js:356:32)
        at Function.Module._load (module.js:312:12)

    C:\chat>

    iyi çalışmalar

    1. Projeyi Github üzerinden indirdikten “node_modules” klasörünü silin. Daha sonra komut istemi ile o klasöre gidin. “npm install” komutunu kullanarak package.json dosyası içinde ismi geçen modülleri kendisi kuracaktır. Daha sonra node app.js ile çalıştırabilirsiniz.

  2. Elinize sağlık , bayadır arayışlardayım başarılı bir kod yapısı gördüm ekstra özellikler beni mutlu etti. Bazı yerlerde fazla kodlama var fakat devede kulak kalıyor.

  3. Merhaba Hocam Öncelikle paylaşımınız için teşekkürler uygulamayı kurmaya çalıştığımda

    undefined is not function hatası almaktayım bu konuda yardımcı olabilirmisiniz.

  4. Merhaba Yusuf bey,
    Bir üst sürüm düşünürseniz içeriğinde yönetimsel işlevlerinde bulunmasını isteriz. Veya ücreti mukabil yapabilirim derseniz iletişim kurmanızı rica ederim. İyi çalışmalar.

  5. Node.js ‘ ye yeni başladım. Yorum yapmadan geçmek istemedim.
    Gerçekten başarılı bir çalışma olmuş. Tebrikler.

  6. Merhaba,
    Bu projeyle iki farklı bilgisayarda mesaj gönderip haberleşebilir miyiz ne yapmamız gerekli?
    Teşekkürler.

  7. iyi çalışmalar,
    Node.js konusunda yeni çalışmalar yapıyorum. Var olan uygulamayı indirdim ve denedim. Bir problem ile karşılaştım. Yardımcı olursanız çok sevinirim. Chat uygulamasını kendi local bilgisayarımda başlatıp kullanabiliyorum ve local ağımda yer alan diğer bilgisayarlar ya da akıllı telefon, chat uygulamasına erişiyorlar. Fakat chat uygulamasına nickname yazıp giriş sağlayamıyorlar. Güvenlik duvarındaki bildiğim kadarı ile tüm ayarları yaptım. (3000 portuna gelen ayarları izin verdim, güvenlik duvarına her iki taraftada kapatmayı denedim), virüs korumasını kapattım. İnternet üzerinden de bu konuyla ilgili araştırma yaptım ama bir türlü birebir bir yardım içeriğine denk gelemedim. kendim çok uğraştım, yine olumlu bir yanıt alamadım. Yardımlarınızı rica ederim. İyi çalışmalar.

    1. Merhaba,

      “public/js/site.js” dosyasını açıp, 4. satırdaki “http://localhost:3000” adresi yerine “192” ile başlayan yerel ip adresini yazıp deneyebilir misin ?

      1. yazarak denedim, normalde bilgisayarda çalışan pencerede de kasılma başladı. localhost:3000 ile uygulamayı hemen başlatabiliyorum. ama ip adresini yazınca “nick name” kısmında takılı kalıyor.

      2. teşekkürler, ben bir noktayı gözden kaçırmışım. dediğiniz yöntem oldu. 🙂 bu arada çalışmanız ve anlatımınız gerçekten bu konuya yeni başlayan bizler için çok yol gösterici. iyi çalışmalar.

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir