• Web sitemizin içeriğine ve tüm hizmetlerimize erişim sağlamak için Web sitemize kayıt olmalı ya da giriş yapmalısınız. Web sitemize üye olmak tamamen ücretsizdir.
  • Sohbetokey.com ile canlı okey oynamaya ne dersin? Hem sohbet et, hem mobil okey oyna!
  • Soru mu? Sorun mu? ''Bir Sorum Var?'' sistemimiz aktiftir. Paylaşın beraber çözüm üretelim.

flash ve xmlsocket ile veri iletisimi chatgame

Üyelik Tarihi
7 Ocak 2015
Konular
4,091
Mesajlar
4,274
MFC Puanı
40
Flash Xml Socket Sistem Nedir?

Socket serverlar java C++ ya da visual basic gibi yazılımlarla oluşturulan ve daimi mesaj yayını yapmaya yarayan sistemlerdir. Bir socket serveri sunucunuzun CGI BIN klasorune koyamazsınız bulunduğu sistemde kök dizinde calısmaları gererkir. Socket serverların en büyük özelliği clientlar’ın sunucudan veri almak için herhangi bir talepte bulunmasına ihtiyac olmamasıdır.

Bir socket servera bağlı dururumdaki clientler verileri otomatik olarak alırlar. Flash ile geliştirilmiş olan canlı sohbet online oyun gibi uygulamalar socket serverlar kullanılarak geliştirilmektedir.
Flash ile bir socket sunucusuna bağlanmak

Socket sunucularını local olarak calıstırabilir ve uzerinde uygulamalar ngeliştirebilirsiniz. Flash ile bir socket sunucusuna bağlanmak için öncelikle yeni bir XMLSocket nesnesi oluşturmamız gerekir.

Server = new XMLSocket();

Yukarda görmüş olduğunuz kod ile yeni bir XMLSocket nesnesi oluşturmuş olduk.

Yeni bir XMLSocket nesnesi oluşturduktan sonra bu nesneyi Socket server’a bağlamak için connect() metodu kullanıyoruz.

Server.connect(hostname,port);

Hostname: Bu özellik socket serverın bulunacağı ip adresidir. Kendi makinemizde bir sunucuya bağlanacaksak bu değer “127.0.0.1” yada “localhost” olabilir.

Port: Bir socket servera bağlanırken socket serverın dinlemekte olduğu portu connect metodunu kullanırken belirtmemiz gerekir.CTSock Serverda Serverı Çalıştırdığınızda karşınıza gelen ekrandan serverın dinlemesini istediğiniz port numarasını girersiniz. Örneğin “3333” portunu dinlemek istiyosunuz. Bu durumda;

Server = new XMLSocket();
Server.connect(“127.0.0.1”,3333);

Kodlarını kullanarak localinizdeki server’a bağlanabilirsiniz.

Not: Flash yanlızca 1024’ den büyük portları dinleyebilir.
Socket server’a bağlantıyı kurduk. Bazı durumlarda kod içinde bu bağlantıyı kesme ihtiyacı hissedebilirsiniz. Bunun için kullanılacak metod close() methodudur.

Server.close();

Socket sunucuya veri göndermek için kullanılacak olan method Send() methotudur.

Server.send(“merhaba”);

XMLSocket sınıfının yanıt verdiği diğer olaylar aşşağıdadır.

onConnect : Bu olay bağlantının başarısız olup olmadığını kontrol eder ve ona göre tepki verir.

onXML : Bu özellik Socket sunucudan bir xml verisi geldiğinde tetiklenir.

onData : Bu özellik Socket sunucudan herhangi bir data geldiğinde ateşlenir.

onClose : Bu özellik Socket Server ile bağlantı koptuğunda tetiklenir.

Sıra geldi sabırsızlıkla beklediğiniz chat uygulamasına..

Mini Chat Uygulaması:

Yeni bir flash uygulama başlatalım ve ilk frame’e bir input text box ve birde buton koyalım. Textbox’ımızın adını ”kullanici_txt”, butonumuzun adınıda ”tamam_btn” olarak belirleyelim.


1.Frame’in action kısmına aşşağıdaki kodları ekleyelim.
stop();
tamam_btn.onPress = function() {
if (kullanici_txt.text != "") {
_root.kullanici_str = kullanici_txt.text;
gotoAndPlay(2);
}
};

Bu bölümde kullanıcıdan kendisine bir nick belirlemesini isatiyoruz. Yukardaki kodlar metin alanına girilen değeri ”kullanici_str” adlı bir değişkene aktarmaya ve 2.Frame’e gecmemizi sağlıyor.

2. framede sayfaya ”SUNUCUYA BAĞLANILIYOR” adlı bir metin koyalım ve action bölumune aşağıdaki kodları ekliyelim
stop();
server = new XMLSocket();
server.connect("localhost", 3333);
server.onConnect = function(durum) {
if (durum) {
gotoAndStop(4);
} else {
gotoAndStop(3);
}
};

”server = new XMLSocket();”

”server.connect("localhost", 3333);”

Yukardaki kodlarla socket server’a bağlanmaya çalışıyoruz.

Bu komut ile server adında yeni bir xml socket nesnesi oluşturuyoruz. Sistemde veri gonderip almak bağlantıyı kesmek vs. Gibi işlemler icin bu nesneyi kullanacağız.

Bu komut ile localhostta çalışan socket server’a 3333’ üncü portundan bağlanma isteği gönderiyoruz.(local host bolumune uygulamanızın çalışacağı alan baz alınarak bir ip adreside girebilirsiniz.)


Bu kod bütünü ile socket sistemin ”onConnect ” fonksiyonunu kullanarak bağlantının gerçekleşip gerçekleşmediğini kontrol ediyoruz.

server.onConnect = function(durum) {
if (durum) {
gotoAndStop(4);
} else {
gotoAndStop(3);
}
};

Bağlantı kurulabildiyse 4. Frame’e , kurulamadıysa 3. Frame’e gidiyoruz.

http://a1202.hizliresim.com/u/f/2pxp2.png

Başarılı bir şekilde bağlantımızı oluşturabildiysek sistem 4.Frame’e gelecektir. Bu sayfada ekrana 2 adet textArea ve 1 adette buton ekleyelim. Text Alanlarını üstteki goruntude gorulduğu gibi yerleştirip üstteki text alanına ”gelen_ileti”, alttaki text alanınada ”giden_ileti” isimlerini verelim. Ekrandaki butonumuzada ”gonder_btn” ismini verelim ve aşşağıda görülen kodları actionscript bölümümüze ekleyelim.

_root.gelen_ileti.html = true;
_root.gelen_ileti.editable = false;
server.onXML = function(mesaj) {
var komut = mesaj.firstChild.attributes.komut;
var kimden = mesaj.firstChild.firstChild.firstChild;
var gelen_mesaj = mesaj.firstChild.firstChild.nextSibling.firstChild ;
if (komut=="mesaj") {
_root.gelen_ileti.text = _root.gelen_ileti.text+""+kimden+" = "+gelen_mesaj;
scroll_boyu = _root.gelen_ileti.length+100;
_root.gelen_ileti.vPosition = scroll_boyu;
}
};
function send_data() {
if (_root.giden_ileti.text<>"") {
giden_veri=""+_root.kullanici_str+" "+_root.giden_ileti.text+"";
server.send(giden_veri);
_root.giden_ileti.text = "";
}
}
gonder_Btn.onPress = function() {
send_data()
}

Yukarda görmüş olduğunuz kodlar minichat sistemimizde karşıdaki kullanıcıya mesaj göndermeye, gelen mesajları göstermeye yarar. Şimdi bu kodları ayrıntılı gözden geçirelim.

_root.gelen_ileti.html = true;
_root.gelen_ileti.editable = false;

var komut = mesaj.firstChild.attributes.komut;
var kimden = mesaj.firstChild.firstChild.firstChild;
var gelen_mesaj = mesaj.firstChild.firstChild.nextSibling.firstChild ;

server.onXML = function(mesaj) {

Yukarda görülen kodlarla elen ileti adlı text alanının html özelliğini açıyoruz ve kullanıcı atarafından değiştirilmesini önlemek için editabel alanını false hale getiriyoruz. Çünkü gelen ileti adlı text alanı gelen ve giden mesajların gösterileceği bir alan olduğu için bu alana metin girilmesi doğru deildir.

Yukarda gördüğünüz kod bütünü ise socket serverdan bir mesaj gelip gelmediğini anlamak için kullanılır. ”OnXML” fonksiyonu socket serverdan herhangi bir ”XML” mesajı geldiğinde tetiklenir. ”XML” formatı dışındaki verileri yakalamak için ise ”onData” fonksiyonu kullanılır.Yukarıdaki kod sayesinde socket serverdan gelen xml datası ”mesaj” adlı değişkene aktarılır.

Sonuc itibari ile yukarda görmüş olduğunuz kodlar vasıtası ile sunucudan gelen verileri belli değişkenlere atıyoruz. Komut değişkenine gelen xml düğümünün ne amaçla geldiğini aktarıyoruz. Bu örnekte gelen komut ”mesaj” dır. Sistemde uygun kodları kullanarak gelen mesajların ne amacla gonderildiğini bu yontemle anlayıp doğru fonksiyonları çağırarak sistematk bir sistem kurabiliriz.

Bu örneğimizde ikinci olarak kimden değişkenine genel mesajın hangi kullanıcıdan gönderildiği bilgisini yükleriz.

Son olarak ise gelen_mesaj değişkenine gönderilen mesajı ekleriz.

Burda dikkat etmemiz gereken konu düzenli bir yapı kurup mesaj gönderme ve alma işlemini karışık projelerde fonksiyonel ve kolay bir yontemle çözmektir. Buda yazılımcının algoritma yeteneğine kalmış bir durumdur. Sonuc itibari ile gidecek olan xml’i de siz oluşturduğunuz için kurulacak sistem tamamen size bağlıdır.
if (komut=="mesaj") {


Yukarıda görmüş olduğun kod yukarda belirtmiş olduğumuz komut adlı değişkenin içeriğini sorgula***** eyer gelen xml de verilen komut ”mesaj” ise altındaki komutları çalıştırmaya yarar.


Bir önceki kodda bahsettiğimiz komut eğer ”mesaj”



_root.gelen_ileti.text = _root.gelen_ileti.text+""+kimden+" = "+gelen_mesaj;
scroll_boyu = _root.gelen_ileti.length+100;
_root.gelen_ileti.vPosition = scroll_boyu;


ise yukarda görmekte olduğunuz kodlar çalışaktır.Yukarda görmekte olduğunuz kod bloğunda 1. satırdaki kodlar gelen mesajı gelen_ileti meti alanının sonuna ekleme görevini üstlenir. Koddanda anlıyacağınız gibi bazı html özellikleri kullanılarak ekrana yazdırma sırasında daha anlaşılabilir bi yapı kurulması sağlanmıştır.


function send_data() {
if (_root.giden_ileti.text<>"") {
giden_veri=""+_root.kullanici_str+"
" + _root.giden_ileti.text+"";
server.send(giden_veri);
_root.giden_ileti.text = "";
}
}

2. ve 3. satırdaki kodlar ise gelen_ileti metin alanında çıkacak olan scroll ’un hep en alt seviyede kalmasını sağlar. Bunun sebebi her yeni mesaj geldiğinde bi yerden sonra text alanına sığmıcaktır ve aşşağı doğru uzayacaktır. Scroll’u bu yontemle en alt seviyeye çekmez isek kullanıcı son gelen mesajı görmek için manuel olarak scroll’u aşşağı çekmek zorunda kalacaktır.


Yukarıda görmekte olduğunuz kodlar sunucuya veri göndermemizi sağlayan kodlardır.
1. satırda görmüş olduğunuz gibi ”send_data” adında bir fonsyion oluşturuyoruz.

2. satırda ise ekranda bulunan giden_ileti adlı text alanının boş olup olmadığını control ederek sunucuya boş veri göndermeyi engellemiş oluyoruz.

3. satırda ise ”giden_veri” adlı değişkenimize servera göndercek olduğumuz veriyi yukluyuroz. Koddanda anlıyacağınız üzere xml formatında bir veri oluşturuyoruz. taglarının arasına eklemiş olduğumuz ”_root.kullanici_str” değişkeninde chat sistemine girerken belirlemiş olduğumuz nick name’imiz bulkunmakta idi. Xml kodumuzda bu taglar arasına nick’imizi ekleyip daha sonra datayı ayrıştırırken nick verisini çekerek mesajın kimden gönderildiğini anlıyabiliyoruz.

taglarının arasına eklediğimiz
giden_ileti adlı text alanı ise ekran gönderceğimiz mesajı yazmamız için daha önce oluşturduğumuz text alanını işaret eder ve bu sayede ekrandaki text alanına yazmış olduğumuz mesajımızı xml kodumuza ekleriz daha sonra kodu ayrıştırma işlemi sırasında gönderilen mesajı çeker ve ekrana yansıtırız.

4. satırda “server.send(giden_veri)” komutu ile bir üst satırda giden_veri değişkenine aktarmış olduğumuz xml datamızı sunucuya göndermiş oluyoruz. Bildiğiniz gibi socket sistemde sunucuya veri göndermek için ”send” komutunu kullanıyoruz.

5. satırda ise ”_root.giden_ileti.text = "";” komutunu kullanarak mesajımız gittikten sonra ekranda bulunan giden_ileti isimli text alanının içini boşaltıyoruz.


gonder_Btn.onPress = function() {
send_data()
}
Yukarda görmüş olduğumuz kodlar ise ekranda bulunan ”gonder_Btn” adlı buton’umuzun ”press” event’inde ”send_data” adlı fonksiyonun çağrılmasını sağlar.


Yukarıda flash xml socket server ile ilgili basit bir chat sistemini nasıl oluşturacağımız ayrıntılı olarak öğrendik. Yukarıda anlatılan özellikleri öğrendikten sonra socket sistem ile bir çok karışık projenin altından kalkabilecek kadar bilgi sahibi oldunuz demektir.

Multiplayer oyunlar, online sınav sistemleri, yüzlerce odadan oluşmuş chat sistemleri oluşturmak artık o kadarda zor görünmecektir. Socket sistemle ilgili uygulama geliştirirken dikkat etmeniz gereken en önemli konulardan biri ise kullanacağınız Socket serverdır.

Saygılarımla..
 
Üst