Node.js, Socket.io ve MongoDB ile Haber Akışı

 bcakir
 5 Mayıs 2014

Daha önceki yazımızda, Node.js, Socket.io ve MySQL ile haber akışı yapımı örneği geliştirmiştik. Bu yazımızda ilişkisel veri tabanı yerine büyük veri çözümü kullanarak uygulamayı tekrar geliştireceğiz. Bu nedenle yazımızın konusu Node.js, Socket.io ve MongoDB ile Facebook tarzı haber akışı yapımı. Bu uygulamamız önce yaptığımız uygulamanın benzeri olacak. Önceki uygulamayla birlikte inceleyip farklarını inceleyebilirsiniz. Bu uygulamada mongoose ve socket.io modüllerini kullanacağız (npm paket yöneticisiyle kurmayı unutmayın) ve 8000 portundan yayın yapacağız.

var mongoose = require('mongoose');
mongoose.connect('mongodb://localhost/haberlerDb');
var io = require('socket.io').listen(8000);

var Schema = mongoose.Schema;
var haberlerSemasi = new Schema({
    icerik: String
});

var haberler = mongoose.model('haberler', haberlerSemasi);
var haber = new haberler();

var notes = [];
eskiHaberleriAl();
var kullaniciSayisi = 0;

io.sockets.on('connection', function(socket){
    kullaniciSayisi++;
    io.sockets.emit('yeniKullanici', kullaniciSayisi);
    socket.emit('eskiHaberler', notes);
        
    socket.on('disconnect', function(){
        kullaniciSayisi--;
        io.sockets.emit('yeniKullanici', kullaniciSayisi);
    });
 
    socket.on('yeniHaber', function(data){
        io.sockets.emit('yeniHaber', {note: data.note});
        notes.unshift(data);
        haberler = mongoose.model('haberler', haberlerSemasi);
        haber = new haberler();
        haber.icerik = data.note;
        haber.save();
    });

});

function eskiHaberleriAl(){
    haberler.find().sort({ _id : -1 }).limit(10).exec(function(err, rows){
        if (err)
            console.log(err);
        else
            notes.push(rows);
    });
}

Yukarıda sunucu kısmını (server.js) oluşturduk. Node.js çalıştığında eski yazılan haberler ile dizimizi doldurduk ve giren kullanıcılara haberlerimizi dizimizden gösterdik. Yeni haber eklendiğinde ise MongoDB veritabanına kaydedip dizimize ekledik ve eklenen yeni haberi diğer kullanıcılara gönderdik. Yeni girecek kullanıcılar için ise eski ve yeni eklenen haberler dizimizde bekliyor, tekrar veritabanına bağlanıp haberleri almaya gerek duymuyoruz.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	<meta name="author" content="bcakir" />
	<title>Node.js, Socket.io ve MongoDB ile Haber Akışı</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="http://localhost:8000/socket.io/socket.io.js"></script>
<script type="text/javascript">
var socket = io.connect('http://localhost:8000');
$(document).ready(function(){
    
    socket.on('eskiHaberler', function(data){
        var html = '';
        for (var i = 0; i < data['0'].length; i++){
            html += '<li>' + data['0'][i].icerik + '</li>';
        }
        $('#haberler').html(html);
    });
    
    socket.on('yeniHaber', function(data){
        $('#haberler').prepend('<li>' + data.note + '</li>');
    });
    
    socket.on('yeniKullanici', function(data){
        $('#loggin').html('Kullanıcı Sayısı: ' + data);
    });
    
});

function formKontrol(){
    var icerik = $("#icerik").val();
    if(icerik != ''){
        socket.emit('yeniHaber', {note: icerik});
        $("#icerik").val('');
    }else{
        alert('İçerik alanını boş bırakmayın.');
        return false;
    }
}
</script>

<style type="text/css">
    form div{width: 400px}
    textarea {width: 394px; height: 80px; margin:0; padding: 3px; resize:vertical;}
    input[type="submit"] {float:  right; margin: 3px 0; padding: 7px 15px;}
</style>
</head>
<body>

<ul id="haberler"></ul>
<div id="loggin"></div>

<form action="javascript:formKontrol();">
    <div><textarea id="icerik" name="icerik" placeholder="İçerik giriniz..."></textarea></div>
    <div><input type="submit" name="btnEkle" value="Ekle" /></div>
</form>

</body>
</html>

Yukarıdaki bölümde ise istemci tarafını (newsfeed.html) geliştirdik. Sunucudan gönderilen (diziye eklenmiş olan haberler) haberleri ekranda listeledik ve formdan yeni haber girildiğinde sunucuya yeni kayıt eklenmesi isteğinde (database insertion callback) bulunduk. Bu istek sonucunda, sunucuda MongoDB veritabanına kaydetme ve diğer görüntüleyen kullanıcılarda ise yeni yazılan haberin sayfaya eklenmesi gerçekleşmiş oldu.

 1.231 Okunma

Bu yazıya 4 yorum yapılmış.

  1. Aradığımı buldum sonunda teşekkürler

  2. Merhaba Kodlar için teşekkür ediyorum, ayrıca yazıların sonunda kodların github adreslerini eklemenizi öneriyorum .

  3. teşekkürler işime yaradı bunu arıyordum

  4. Elinize emeğinize sağlık. Sonunda bu kodlarla işimi gördüm, teşekkür ederim yararlı bir makale olmuş

Yazı hakkında görüşlerinizi belirtmek istermisiniz?

Daha fazla Facebook, Html/Html5, JQuery, Node.js, NoSQL
Kapat