Node İle Robot Yazılımı: İstemci ve Firewall – 1

Beybut Robot 2. Bölüm

Node.js, Socket.io, Mysql, Php ve birazcık da Ajax kullanan Beybut Robot projemi geliştirmeye devam ediyorum. Bir önceki adımda Node.js, Npm, Socket.io, Mysql kurulumlarını yapmış ve temel ayarları tamamlamıştım. Sırada, sunucuya (beybutrobot.js’ye) Php firewall aracılığı ile mesaj gönderecek istemcimizin (client’in) kodlanması var. Node.js sunucusuna istemci ve ön yüz ile direkt istekte bulunmak yerine bir geçit ve süzgeç kullanarak bu ilişkiyi kurmak istiyorum. Böylece, doğabilecek güvenlik zaafiyetlerini bir nebze aşmak; sunucunun yükünü azaltmak amacındayım. Geçitimizi Php ile kodlayacağım. Ama önce istemci Web yüzümüzün temellerini atalım.

Bir Php sayfası oluşturarak </head> kapanış etiketinden önce aşağıdaki kodları ekleyelim.

<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script src="https://cdn.socket.io/socket.io-1.4.5.js"></script>

Gereksinim duyduğumuz Jquery kütüphanesini ve Socket.io’yu sayfamıza yüklemiş olduk.

İstemci sayfamıza, sunucudan gelen mesajları yansıtmak için <body>’den sonra “ekran” adlı bir div oluşturalım.

<div class="ekran" id="ekran" name="ekran"></div>

“ekran” div’i için css ve js kullanacağımızdan, şimdiden class, id ve name bilgilerini belirledim.

Tekrar </head> öncesine dönüp; sunucudan gelen iletileri bu div içerisine yansıtacak Javascript kodlarımızı buraya ekleyelim.

<script type="text/javascript">
var socket = io.connect("http://beybut.com:1919"); //1919 portunda çalışan Beybut Robot sunucusuyla bağlantı kurdum. Artık istemcimiz sunucudan gelecek iletileri almaya hazır. 
socket.on("sunucu-iletisi", function(veri){ //Eğer sunucumdan sunucu-iletisi adlı bir ileti gelirse bunu "veri"ye aktarmasını söyledim.
$("#ekran").append(veri.ileti); //Aşağıda oluşturduğumuz "ekran" adlı div içerisine gelen verideki iletiyi ekledim. 
$('#ekran').animate({scrollTop: $('#ekran').prop("scrollHeight")}, 500); //Kaydırma çubuğu gerekiyorsa/varsa bunu en alta çektim.
}); 
</script>

İleti gönderimi ve gösterimini sağlayacak form elementlerimizi oluşturalım.

<div class="iletiniz" id="iletiniz" name="iletiniz">
  <input name="iletici" type="text" id="iletici" onkeypress="return yolla(event)" size="65" />
  <input type="submit" name="gonder" id="gonder" value="Robotla Sohbet Et :-)" />
</div>

“iletiniz” div’i içerisinde “iletici” input’u ve gönder butonuyla suzgec.php’ye (firewall) Ajax yardımıyla post göndereceğim. </head>’dan önce;

<script type="text/javascript">
function yolla(e) {

if (e.keyCode == 13) {
var ilet = $('#iletici').val();
var gonderilecek_veriler = 'ileti-geldi='+encodeURIComponent(ilet);  
  	$.ajax({ 
  		type:'POST',
  		url:'suzgec.php',
  		data:gonderilecek_veriler,
  		success:function(cevap){
  		$("#ekran").append(cevap); 
  		}
  	});
	$("#iletici").val("");
	 document.getElementById("iletici").focus();

        
    }
}
</script>

Js kodlarıyla verilerimizi, eğer enter tuşuna basılmışsa, suzgec.php’ye sayfayı yenilemeden gönderebiliyoruz. Ardından “iletici” inputumuzun içeriğini silip bu kutuya focuslanıyoruz.

Butonumuza basıldığında aynı işlemi yapması için, ileti gönderimi sağlayan form elementlerinden sonra aşağıdaki JS’yi ekliyoruz.

<script>
  $('#gonder').click(function(){
var ilet = $('#iletici').val();
var gonderilecek_veriler = 'ileti-geldi='+encodeURIComponent(ilet);  
  	$.ajax({ 
  		type:'POST',
  		url:'suzgec.php',
  		data:gonderilecek_veriler,
  		success:function(cevap){
  		$("#ekran").append(cevap); 
  		}
  	});
	$("#iletici").val("");
	 document.getElementById("iletici").focus();
  });
  </script>

Böylece kullanıcı dilerse butona basarak da iletisini yollayabilecek. Şimdilik, ön yüzümüz tamamlandı. suzgec.php dosyamızı oluşturalım.

<?php
error_reporting(0);
header('Content-Type: text/html; charset=utf-8');
$ileti=strip_tags($_POST["ileti-geldi"]);
echo '<br />';
echo '<strong>Siz</strong>: '.$ileti;

?>

Artık kullanıcının yazdığı her şey #ekran div’i içerisinde gösterilecek.

Unutmadan… beybutrobot.js sunucumuzun son hali şu şekilde:

var mysql      = require('mysql');
var io = require('socket.io').listen(1919); 

console.log('Beybut Robot Sunucusu Baslatildi.\nTest Sunucusuna Hos Geldiniz. \nTest Sunucusu v.1.0.0\nProgramlayan: Baris YESILCIMEN\nMart 2016.');

//Mysql Bağlantım
var connection = mysql.createConnection({
  host     : 'localhost',
  user     : 'MYSQL KULLANICI ADI',
  password : 'MYSQL KULLANICI ŞİFRESİ',
  database : 'MYSQL VERİTABANI ADI'
  
});
//Mysql Bağlantım Son.


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

//Hoş geldin mesajı
socket.emit('sunucu-iletisi', {'ileti':'Hoş geldiniz.<br />Ben Beybut Robot. Akıllı bir arkadaşınız olma yolunda ilerliyorum.<br />Benimle aşağıdaki kutucuk aracılığıyla sohbet edebilirsiniz. :-)'}); 
//Hoş geldin mesajı.

});

 

Beybut İlk Mesaj

Sonraki adımda Php içerisinden (suzgec.php’den), Elephant.io kullanarak sunucuya ileti göndermeyi; flood koruması eklemeyi, sansürleme işlemi yapmayı amaçlıyorum.

Yazar: admin

Beybut.com yöneticisi ve yazarı. 17 Ocak 1980'de doğdu. Uluslar arası ilişkiler ve siyaset bilimi, Türkçe öğretmenliği eğitim aldı. 1995 yılından beri, özellikle yazılım konusunda profesyonel çalışmalarda bulundu. Pascal, Delphi, Php, sunucu güvenliği ve optimizasyonu, Seo alanlarında çalışmalar yürüttü. Yerel gazetelerde köşe yazarlığı yaptı. Yazın yaşamına dair yarışmalarda birçok ödül kazandı. Şiir, tarih, psikoloji, felsefe ve siyaset bilimi özel ilgi alanları.

Bir cevap yazın

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