Malwarez v0.1.a “Ben”

Malwarez v0.1.a Kod Adı:”Ben”

Sonunda Malwarez projesinin 0.1 alfa sürümünü tamamlamış bulunuyoruz.

Demoya buradaki linkten erişebilirsiniz.

Projenin hedefi zararlı yazılım aktivitelerinin geçmişte toplanan veriler ile birlikte gerçek zamanlı olarak görsellenmesidir. Geliştirme planımızda uygulamayı hedeflediğimiz 3 ana özellik var. Bunlar;

1) Aktivite Haritaları
2) Sıcaklık Haritaları
3) Saldırı İlişki Haritaları

Alfa sürümünde bu hedeflerden ilkini tamamladık.Diğer iki hedef üzerinden çalışmaya devam ediyoruz. Yakında onları da duyurmayı umuyoruz.

Saldırı ilişki haritalarında zararlı yazılımları coğrafi konumlarına göre görselleştiriyoruz. Görselleştirme iki seviye üzerinden yapılıyor: Dünya ve ülke seviyeleri.

Dünya Seviyesi:

Bu seviyede 2 tip sembol göreceksiniz. İlki zararlı yazılım aktivite sıklığını temsil eden kırmızı dairelerdir. Performans nedeniyle çakışan semboller birleşerek daha büyük tek bir daire ile gösterilmiştir. Diğer sembol ise anlık veriyi temsil eden sarı noktalardır. Her bir sarı nokta hpfriends projesinden gelen yeni olayları temsil eder. Bu semboller çizildikten 3 saniye sonra ekrandan silinir ve kırmızı daireler bu yeni veri ile güncellenir. Hem ülkeler hem de semboller üzerine gelindiğinde çıkan bilgi baloncuklarına sahiptir. Ülkelere ait bilgi baloncukları o ülkeden yapılan toplam saldırı sayısını gösterir. Sembollerin bilgi baloncukları ise o coğrafi konumdan yapılan toplam saldırı sayısını gösterir.

Ekran görüntüsü örnekleri:
screenshot-1screenshot-3

Ekranın solunda, toplanan hpfeeds verileri hakkında bazı istatistikleri görebilirsiniz. Bu veriler şu formata sahiptir; “<Değer>(<kayıt sayısı>)”. Ekran görüntüsü şöyledir:

screenshot-2

Ekranda gözüken etiketlerin anlamları aşağıdaki gibidir.

(“toplanan hpfeeds verilerinde”)
- Attacker Country: en çok gözlenen zararlı yazılım aktivitelerine sahip ülkeler
- Attacker Port: en çok gözlenen kaynak port
- Attacker IP: en çok gözlenen kaynak IP adresi
- Target Port: en çok gözlenen hedef port ( Şu an yalnızca dionaea.capture kanalından veri toplamaktayız.  Bu nedenle sadece bir port değeri gözükmektedir. Yakında başka kanalları da ekleyeceğiz.)

Solda bulunan istatistiklere tıklandığında (şu an bu özellik sadece “attacker IP” bilgisi için geçerlidir.) küçük bir pencerede hpfeeds üzerinden gelen diğer bilgiler gösterilmektedir. Yakında Mnemosyne gibi başka kaynaklardan da ilave veri ekleyeceğiz.

Ülke Seviyesi

Ülkelere ya da kırmızı dairelere tıklamak ülke bazlı zararlı yazılım aktivitesini gösteren yeni bir pencere açacaktır. O haritada bulunan çubuk semboller o ülke içindeki zararlı yazılım aktivite sıklığını temsil eder. Çubuk semboller yeni okunan veriler ile güncellenir. Bu haritalarda Dünya seviyesindeki sarı noktalar gibi yeni olayları vurgulamak için kullanılan göstergeler yoktur, ancak bu özellik de yakında eklenecektir. Çubuk sembollerin bulundukları şehrin ismini ve o şehirdeki olay sayısını barındıran bilgi baloncukları vardır. Bir sonraki sürümde bu çubuklara tıklandığında o şehir ile ilgili istatistiklerin listelendiği yeni bir pencere açılacaktır.

Ekranın sol bölümde yine bazı istatistikler bulacaksınız. Bu kez bu istatistikler ülke özelindedir. Dünya haritasında kullanılan aynı etiketler kullanıldığı için bu bölüme tekrar değinmiyorum.

Kısıtlar

- Firefox üzerinde düşük performans ile çalışıyor. (En iyi chromium ile çalışıyor.)
- Zayıf tarayıcı uyumluluğu
- Dünya haritası üzerinde ki bilgi baloncukları güncellenmiyor.
- Çoklu dil desteği yok.
- Zayıf tasarım (Javascript konusunda yeniyim, hala öğreniyorum…)
- Dünya haritası üzerine eklenen yeni sembollerin bilgi baloncukları gözükmüyor.

Plan
Kısaca, bir sonraki küçük ölçekli sürümde aşağıdaki geliştirmeler ve yeni özellikler bulunacaktır:
- Dünya haritası üzerindeki bilgi balonlarının içeriklerinin dinamik güncellenmesi.
- Bar sembollerine tıklandığında seçilen şehir ile ilgili istatistiklerin listelenmesi
- Yeni hpfeeds kanallarının eklenmesi.
- Ülke haritalarına yeni olay göstergelerinin eklenmesi
- Sıcaklık haritasının eklenmesi(opsiyonel bir sonraki büyük ölçekli sürüme sarkabilir.)
- Kod kalitesinin iyileştirilmesi

Büyük ölçekli sürüm için hedeflerimiz.
- Saldırı ilişki Attack Relation Map Feature
- Performans iyileştirilmesi
- Kod kalitesinin iyileştirilmesi
- Her iki seviye içinde haritalar için yakınlaştırma ve kaydırma özelliklerinin eklenmesi

Bu alfa sürümünde buglar ve kısıtlarımız mevcut. Lütfen her türlü hata/özellik/fikir/eleştiri ve önerinizi githuba eklemekten çekinmeyiniz. Her türlü geri bildirime açığız.

Umarım projemizi beğenirsiniz. :)
Gürcan

Tagged with: ,
Posted in yakindanegitim

Malwarez v0.1.a “Ben”

Malwarez v0.1.a Code Name:Ben

We are pleased to announce the alpha release of version 0.1 of Malwarez project.

You can find the demo here.

The aim was to provide real time visualization of malware activities with historical data. In our development plan there are 3 main features we are planning to implement.
1) Activity map
2) Heatmap
3) Attack Relation Map

Currently we implemented activity map feature. Other 2 features are currently work in progress. We hope soon to announce them too.

In activity map we visualize the malware activities based on geo locations. As zooming capability 2 levels of maps exists with names of world and country levels.

World Level:

In world level you would notice 2 kind of symbols. First one is red bubbles, which represents the malware activity frequencies. For performance reason overlapped symbols are drawn as one larger bubble. The other one is yellow dots, which represent live data. Each yellow dot shows a new event fetched from hpfriends project and disappears after 3 seconds and update the red bubbles. Both countries and Symbols have tooltips to show the frequencies. Country tooltips shows the total number of activities caused by that country. Symbol tooltips shows the total number of activities caused by host located at that geo location.

Here are some screen shots:
screenshot-1screenshot-3

On the left side of the screen you will see some statistics about the collected hpfeeds data. Each statistics is in form of “<value>(<number of records>)”.  Here is a screen shot:

screenshot-2

Here is the meanings of labels:

- Attacker Country: most seen malware activity in countries.
- Attacker Port: most seen Source port for attacks.
- Attacker IP: most seen Source IP in collected hpfeeds data
- Target Port: most seen Destination Port in collected hpfeeds data(Currently we collect data only from dionaea.capture channel. So that there is only one value. We will add more channels soon.)

Clicking on statistics (currently it is available for attacker IP only) will show a small modal and gives additional information collected from hpfeeds. We plan to add additional data sources soon such as Mnemosyne.

Country Level

Clicking on countries or red bubbles will open a new modal screen to show country specific malware activities. In that map, bar graphs represents the malware activity frequencies. Bars are updated upon new event data. In this map there is no indicator for new events like yellow dots in world map but we will add such feature soon. Bar symbols have tooltips which shows the name of the city and the number of events recorded. Clicking on bars will open new statistics modal in the next release.

On the left side of the screen again you will find some statistics. This time they are country specific. Same labels are used as in world map.

Limitations
- Poor performance on firefox. (Works best with chromium)
- Poor browser compatibility tests
- Static tooltip content on world map
- No i18n
- Poor design (I am new on javascript so still learning…)
- new added symbols does not have tooltips on worldmap

Plans
In short, next minor release will contain following new features and improvements:
- dynamic tooltip content on world map
- clicking on bars will open a statistics modal about the selected city
- more hpfeeds channels
- new event indicator for country maps
- Heat map feature (optional may be delayed to major release)
- code improvements

Next major release will contain:
- Attack Relation Map Feature
- Performance improvements
– Currently upon new event all symbols are updated which is unnecessary. We should update only necessary symbols.
- Code Refactoring
- Pan and Zoom feature on both levels

It is an alpha release with limitations and bugs. Feel free to report any issue or feature request! Any feedback is welcomed.

Hope you enjoy it. :)
Gurcan

Tagged with: ,
Posted in yakindanegitim

Django ve Socket.io ile Gerçek Zamanlı Uygulamalar – 4. Bölüm

Merhabalar,

Bu yazımızda Python kullanarak socket.io sunucularına nasıl bağlanabileceğimizden bahsedeceğim. Bu iş için socketIO-client kütüphanesini kullanacağız. Bu kütüphaneyi kurmak için aşağıda ki komutu çalıştırıyoruz.

pip install socketIO-client==0.3

Bu işlemi yaptıktan sonra bir önceki yazımızda oluşturduğumuz Django projesinin içersine scripts isminde bir klasör oluşturuyoruz. Bu klasörde projelerimizde direk django ile iç içe olmayan yardımcı betiklerimizi depolayacağız. Oluşturduğumuz bu klasör içersine ilk betiğimizi oluşturalım. İlk betiğimizin adı socketIO_client.py olsun.

Burada yapacağımız tanımla javascript kullanarak hazırladığımız istemci kodundan çok farklı değil. Burada ki tek fark socket.io üzerinden gelecek mesajların direk bir fonksiyona değil bir sınıfın fonksiyonları tarafından işlenecek olmasıdır. İstemci kodunu yazmamızı sağlayan bu sınıf BaseNamespace sınıfından türetilmelidir. BasNamespace sınıfını socketIO_client mödülünden betiğinize dahil edebilirsiniz.

ilk örnek sınıfımızı yazalım.

from socketIO_client import SocketIO, BaseNamespace
class HelloSocketIOClient(BaseNamespace):
    def on_connect(self, socketIO):
        print '[Baglanti kuruldu]'

    def on_disconnect(self):
        print '[Baglanti kesildi]'

Bu oluşturduğumuz sınıf, bağlantı kurulduğunda ve bağlantı kesildiğinde sadece ekrana bu bilgileri basacak. Her hangi bir veri alışverişi tanımlamadık. Peki bağlantıyı nasıl sağlıyoruz. Aşağıdaki kodları inceleyelim.

socketIO = SocketIO('127.0.0.1', 8000)
chatSocket = socketIO.connect('/chat', Namespace)
socketIO.wait()

İlk satır ile hangi sunucuya bağlanacağımızı verdiğimiz host ve port bilgileri ile belirliyoruz. Daha sonra bu sunucu üzerindeki hangi kanala bağlantı açacağımızı ve hangi sınıfın bu bağlantıdan sorumlu olacağını belirtiyoruz. 3. satır ise bu bağlantının sonlanmasını bekleyen fonksiyondur. Bu fonksiyon sayesinde betiğimiz bağlantı tamamlanana kadar çalışmaya devam edecektir. Ufak bir not: 2. satırı farklı sınıf ve farklı kanallar için birden çok kez kullanmamız mümkün.

Şimdi öncelikle run.py ile django projemizi çalıştıralım. Ardından yeni yazmış olduğumuz socketIO_client.py dosyamızı çalıştıralım. Bu adımda SocketIO bulunamadı gibi bir hata mesajı ile karşılaşabilirsiniz. Virtualenv ortamında betiğimizin başına bu satırları ekleyebilirseniz sorunumuz çözülecektir. 4. satırda belirtilen klasör yolunun kurulumunu yaptığımız kütüphaneyi barındırdığından emin olun ve gerekirse kodu güncelleyiniz.

import os
import sys
sys.path.append(os.environ['VIRTUAL_ENV']+'/lib/python2.7/site-packages/')

Bu adımı da tamamladık.

Şimdi sırada diğer komutları eklemek var.
Öncelikle sunucuya kayıt olmak için subscribe etiketi ile başlamalıyız. Bu yüzden on_connect fonksiyonuna ekleme yapıyoruz.

def on_connect(self, socketIO):
    print '[Baglanti kuruldu]'
    self.socketIO.emit('subscribe' , {'my': 'mynick'});

Burada kullandığımız son satır sunucuya verı göndermek için kullanılmıştır. Sunucuda gelebilecek diğer mesajlar ise welcome ve message’tır. Bu mesajları işlemek için on_welcome(self, id, message) ve on_message(self, id, message) fonksiyonlarını eklememiz yeterlidir.

Peki biz sunucuya veri göndermek istersek. Örnek olarak bir kaynaktan okuduğumuz veriyi sunucuya göndermek istersem, yapılması gereken oldukça basit. Bu işlem için sunucu tarafında daha önceden hazırlamış olduğumuz update etiketini kullanabiliriz, bu sayede sunucuya göndermiş olduğumuz veriler istemcilere mesaj olarak gönderilirebilir olacaktır.

Yapılması gereken tek şey bağlantı açıldıktan sonra belli aralıklarla yada yeni veri gelişine göre veri göndermek olacaktır. Bu işlem için aşağıda ki kodu kullanabiliriz.

socketIO = SocketIO('127.0.0.1', 8000)
chatSocket = socketIO.connect('/chat', Namespace)

newData = readNewData()
chatSocket.emit('update', newData)

socketIO.wait()

Umarım işinize yarar.

İyi haftalar

Tagged with: ,
Posted in yakindanegitim

Django ve Socket.io ile Gerçek Zamanlı Uygulamalar – 3. Bölüm

Merhabalar,

Merhaba Dünya django uygulamamızı yaptıktan sonra, sırada gevent ve gevent-socketio kurulumu var. Nedir gevent-socketio? Socket-io protokolünün python dilinde uygulanmasıdır. Yazacağımız django uygulamasının Node.js nin yerini almasını sağlamaktadır. Hızlıca kuruluma geçiyoruz.

# Kurulumu pip ile yapıyoruz.
pip install gevent==0.13.8
pip install git+git://github.com/abourget/gevent-socketio
pip install git+git://github.com/abourget/gevent-websocket

Şimdi sırada djangoyu gevent ile çalıştıracak python betiğini sistemimize ekleyelim.
run.py isimli bir dosya oluşturalım.

run.py
#########################################
#!/usr/bin/env python
from gevent import monkey
from socketio.server import SocketIOServer
import django.core.handlers.wsgi
import os
import sys

# Bu ifade sayesinde django üzerinde ki iletişimi standart kütüphane yerine
# gevent tarafından yapılamasını sağlamaktadır.
# Ayrıntılı bilgi için: http://www.gevent.org/gevent.monkey.html
monkey.patch_all()

try:
  from malwarez import settings
except ImportError:
  sys.stderr.write("Error: Can not find the file 'settings.py'")
  sys.exit(1)

PORT = 8000
os.environ['DJANGO_SETTINGS_MODULE'] = 'socketIO_Test.settings'
application = django.core.handlers.wsgi.WSGIHandler()

if __name__ == '__main__':
  print 'Listening on http://127.0.0.1:%s and on port 843 (flash policy server)' % PORT
  SocketIOServer(('', PORT), application, resource="socket.io").serve_forever()

#########################################

python run.py ile djangoyu çalıştırıyoruz. Bundan sonra Djangoyu çalıştırmak için “python manage.py runserver” komutunu kullanmayacağız.

Eğer bir sorun ile karşılaşmazsanız, http://127.0.0.1:8000/ adresine giriş yaptığınızda yine Merhaba Dünya yazısını göreceksiniz.

Şimdi socket.io için kullanacağımız sunucu bölümünü yazalım. Hatırlarsanız, 1. Bölümde sunucuya bağlanmak için ‘var socket = io.connect(‘/chat’);’ komutunu kullanmıştık. Buradaki /chat ifadesi sunucu üzerinde bağlanılacak kanalı nitelendirmektedir. Yazacağımız sunucu kodunda yapmamız gerekecek ilk şey BaseNamespace sınıfından türeyen bir sınıf yazmamız olacaktir. Bu sınıfı hangi kanal ile ilişkilendirileceğini @namespace(‘/chat’) ifadesi ile belirtiyoruz. Bu sayede /chat kanalına bağlanan tüm istemciler bu sınıf tarafından yönetilecektir.

İstemci tarafında mesaj gönderirken şöyle bir fonksiyon kullanıyorduk. “socket.emit(‘subscribe’ , {‘me’: ‘mynick’});” Parametreleri inceleyelim. “subscribe” parametresi gönderilen mesajın etiketi olarak düşünülebilir, “{‘me’: ‘mynick’}” ise mesajın içeriğidir. Sunucu tarafında gelecek “subscribe” etiketli mesajı işlemek için on_subscribe(self, msg) imzalı bir method yazmamız yeterlidir. gevent-socketio kütüphanesi gelen mesajların etiketlerine göre on_{etiket}(self, msg) fonksiyonunu otomatik olarak çalıştırıyor.

Örnek sunucu kodumuz aşağıdadır.

web/sockets.py
#########################################
from socketio.namespace import BaseNamespace
from socketio.mixins import BroadcastMixin
from socketio.sdjango import namespace

@namespace('/chat')
class ChatNamespace(BaseNamespace, BroadcastMixin):
  client_num=0

  def on_subscribe(self, msg):
    print 'yeni kullanici: ', msg
    self.emit('welcome', '%d numarali istemcisiniz.'%(self.client))
    self.emit('message', 'socketIO_Test projesinden bir mesaj geldi...'%(self.client))

  def on_update(self, msg):
    print 'guncelleme bilgisi geldi. ', msg
    self.emit('message', msg)
#########################################

Bu işi tamamladıktan sonra socketIO_Test/urls.py dosyasını güncellememiz gerekmektedir.

socketIO_Test/urls.py
#########################################
from django.conf.urls import patterns, include, url
from django.contrib.staticfiles.urls import staticfiles_urlpatterns
from socketio import sdjango

sdjango.autodiscover()

urlpatterns = patterns('',
url(r'^$', 'web.views.index'),
url(r'^socket\.io', include(sdjango.urls)),
)
urlpatterns += staticfiles_urlpatterns()
#########################################

web/static klasörü içersine socket.io.min.js dosyasını koymamız gerekmektedir. Ayrıca ilk yazımızda anlatılan kodları test-soclet.io.js adıyla web/static/ klasörüne kaydetmemiz gerekmektedir.

Son olarak index.html sayfamızı güncelliyoruz.

web/templates/index.html
#########################################
<html>
<head>
<script type="text/javascript" src="static/socket.io.min.js"></script>
<script type="text/javascript" src="static/test-socket.io.js"></script>
</head>
<body>
{{hello_text}}
<br/>
<textarea id="log" style="width: 400px; height: 600px;"></textarea>
</body>
</html>
#########################################

Projeyi aşağıdaki linkten indirebilirsiniz.

https://github.com/ggercek/ornekler/tree/master/python/socketIO_Test

Bir sonraki yazı da hazırladığımız bu sisteme python kullanarak nasıl bir istemci ile bağlanabileceğimize değineceğim.

Tagged with: , ,
Posted in yakindanegitim

Django ve Socket.io ile Gerçek Zamanlı Uygulamalar – 2. Bölüm

Merhabalar,

Sunucu tarafında Django kullanacağımızdan bahsetmiştik. Bu yazida Django ile Merhaba Dünya uygulaması yapacağız. İlk iş olarak virtualenv ile bir çalışma ortamı yaratalım ve buraya bir django projesi yaratalım.

  • Sanal ortamımızı oluşturalım
  • –no-site-packages parametresi ile sistemimizde kurulu olan python kütüphanelerini bu yeni ortama aktarmamaktadır. Kurulum testleri için oldukça kullanışlı bir araç, ayrıntılarına bakmanızı tavsiye ederim.

virtualenv test --no-site-packages
cd test
source bin/activate
# yeni ortamımız boş olarak kullanıma hazır.
# Djangoyu kuralım.
pip install django==1.5.1

  • Django projemizi oluşturalım.

django-admin.py startproject socketIO_Test
  • Django için bir uygulama oluşturalım

django-admin.py startapp web

mkdir web/template
mkdir web/static

settings.py
######################################################################

  • Şimdi settings.py dosyamızı güncelleyelim. Dosyanın en üstüne aşağıdaki değişkenini ekleyelim.

import os
PROJECT_ROOT = os.path.dirname(os.path.abspath(__file__)) + '/..'

Bunu yapmamızdaki sebep relative path yerine absolute path ile tanımlarımızı yapmamız gerekmesidir.

  • STATICFILES_DIRS değişkenini güncelleyelim.

STATICFILES_DIRS = (
    # Put strings here, like "/home/html/static" or "C:/www/django/static".
    # Always use forward slashes, even on Windows.
    # Don't forget to use absolute paths, not relative paths.
    os.path.join(PROJECT_ROOT, 'web/static'),
)
  • TEMPLATE_DIRS değişkeni

TEMPLATE_DIRS = (
    # Put strings here, like "/home/html/django_templates" or "C:/www/django/templates".
    # Always use forward slashes, even on Windows.
    # Don't forget to use absolute paths, not relative paths.
    'web/templates'
)
  • INSTALLED_APPS değişkenine oluşturduğumuz web uygulamasını ekliyoruz.

INSTALLED_APPS = (
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.sites',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    # Uncomment the next line to enable the admin:
    # 'django.contrib.admin',
    # Uncomment the next line to enable admin documentation:
    # 'django.contrib.admindocs',
    'web',
)

######################################################################

url.py
######################################################################

  • Şimdi url.py dosyasını güncelleyip bir hello world uygulaması yapalım. urlpatterns değişkenini güncelleyelim.

urlpatterns = patterns('',
    # Examples:
    # url(r'^$', 'helloworld.views.home', name='home'),
    # url(r'^helloworld/', include('helloworld.foo.urls')),

    # Uncomment the admin/doc line below to enable admin documentation:
    # url(r'^admin/doc/', include('django.contrib.admindocs.urls')),

    # Uncomment the next line to enable the admin:
    # url(r'^admin/', include(admin.site.urls)),

    url(r'^$', 'web.views.index')
)

######################################################################

  • Şimdi template dosyamızı oluşturalım.

web/templates/index.html

######################################################################

<html>
<head></head>
<body>
{{hello_text}}
</body>
</html>

######################################################################
  • View kısmını oluşturalım.

web/views.py
######################################################################
# Create your views here.
from django.shortcuts import render_to_response

def index(request):
    return render_to_response('index.html',{'hello_text':'Merhaba Dünya'})

######################################################################
  • Şimdi sırada sunucumuzu çalıştırmak var. Bunun için manage.py betiğini kullanıyoruz.

python manage.py runserver

http://127.0.0.1:8000/ adresine giriş yaptığınızda Merhaba Dünya yazısını göreceksiniz.

Şimdi sırada gevent ve gevent-socketio kurulumu var.

Tagged with: ,
Posted in yakindanegitim

Django ve Socket.io ile Gerçek Zamanlı Uygulamalar – 1. Bölüm

Merhabalar,

Bu hafta sizlere django ile socket.io kullanımından bahsedeceğim.
HTML5 ile websocket’lerin standart olmasına karşın şu an django kurulduğu haliyle bu desteği sağlamamaktadır. Bu desteği eklememiz için farklı bir wsgi kullanmamız gerekmektedir. Çok ayrıntıya girmeden hızlıca örneklere geçmek istiyorum. Bu terimlerle ilgili döküman sayısı oldukça fazla, fakat internet üzerinde bulunan örnek kodlar djangonun son sürümü ile düzgün çalışmamaktadır.

Hızlıca örneğimize geçelim.
İstemci tarafı:
İstemci tarafında kullanacağımız socket.io kütüphanesi hayatımızı oldukça kolaylaştırıyor. Burada ki yapıyı IRC’ye benzetebiliriz. Öncelikli olarak bir sunucuya bağlanıyoruz. Ardından da istediğimiz kanalı seçiyoruz. Socket.io ile yapacağımız bağlantı da aynı bu şekilde çalışıyor.

Kod örneğimiz şöyledir.

/*
Bağlantıyı sayfayı çektiğimiz sunucuya açıyoruz. Ve bağlantıyı açarken hangi kanala bağlanacağımızı belirtiyoruz. Birden fazla kanala bağlanmamız da mümkün, ama basitlik için buna değinmeyeceğim.
*/
var socket = io.connect('/chat');

/*
Mesajlaşma sırasında mesajlarımızı ayırt edebilmemiz için etiketler kullanılıyor. Bu işi socket.io bizim için arka planda otomatik olarak yapıyor. Mesajlar içersinde bulunan bu etiketlere göre socket.on() metodunu kullanarak kaydettiğimiz 'callback' fonksiyonlarımız çalıştırılıyor.

Burada socket.connect() fonksiyonu ile başlattığımız bağlantı işlemi tamamlandığında yapılması gerekenleri tanımlıyoruz. Bu örnek kapsamında istemci bağlantı işlemini tamamladıktan sonra bir kayıt isteği gönderiyor.
*/
socket.on("connect", function(){
console.log('bağlandı>');
/* Kayıt olma isteği gönderiyoruz */
socket.emit('subscribe' , {'me': 'mynick'});
console.log('kayıt yapıldı.');
});

/*
Burada sunucudan gelecek 'welcome' etiketli mesajların hangi fonksiyon ile işleneceğini belirtiyoruz. Mesajımızın içeriği obj parametresi ile fonksiyonumuza geçiriliyor.
*/
socket.on("welcome", function(obj){
console.log('Merhaba mesajı geldi. Mesaj içeriği: ' + obj);
});

/*
Kayıt işlemimiz tamamlandıktan sonra sunucu tarafından gönderilen message etiketli mesajları işliyoruz.
*/
socket.on("message", function(obj) {
console.log('Yeni mesaj geldi. Mesaj içeriği: ' + obj);
});

Bu yazının ikinci bölümünde sunucu tarafına değineceğim.

İyi haftalar

Tagged with: ,
Posted in yakindanegitim

Kartograph.js: 3. Bölüm Etkileşimli Haritalar – 2

Merhabalar,

Bu hafta fare olaylarının çizdiğimiz SVG elemanları ile nasıl etkileşime girebileceğine değineceğim. Bu işi tamamlamak iki yoldan bahsedeceğiz, JQuery ve Kartograph.js.

JQuery:

SVG elemanları çizildikleri katmanların (layer) stil sınıf değerlerini almaktadır. Bu yüzden JQuery yardımı ile bu katmana ait tüm elemanları çekip bu elemanların ‘mouseover’, ‘mouseout’ ve ‘click’ olaylarına ait callback fonksiyonlarını tanımlamamız yeterlidir.

$('.countries').each(function(index) {
    $(this).on('mouseover', function() {
        $(this).css("fill", "#FF0000");
    });
    $(this).on('mouseout', function(){
        $(this).css("fill", "#ABC");
    });
    $(this).on('click', function(){
        countryId=$(this).attr('id');
        alert('You clicked on country with id: ' + countryId);
    });
}

Bu yöntemin bir problemi SVG üzerinde tanımlanmış verilere ulaşmamız kolay olmamaktadır. Örnek vermek gerekirse bu yöntem ile sadece DOM elemanlarının üzerinde bulunan verilere erişebiliriz. ‘Name’, ‘ISO’ gibi SVG üretirken json dosyasında belirttiğimiz değişkenlere bu yöntemle ulaşamıyoruz. Bunun için kartograph.js’nin bize sunmuş olduğu yöntemleri kullanmalıyız.
Kartograph.js:
Kartograph.js nin desteklediği fare olayları şöyledir; ‘click’, ‘mouseenter’, ‘mouseleave’, ‘dblclick’, ‘mousedown’, ‘mouseup’, ‘mouseover’, ‘mouseout’. Bu olaylara ilgili callback fonksiyonlarının atanması/tanımlanması için kullanabileceğimiz iki yöntem var.
  • addLayer fonksiyonunun içersine aşağıdaki satırları eklemek. Burada tanımlanan fonksiyon 3 parametre almaktadır. ‘Data’ değişkeni fare olayına hedef olan path svg elemanın verilerini tutan sözlük değişkenidir. ‘Path’ değişkeni Raphael objesidir. ‘Event’ ise javascript tarafından oluşturulan orjinal olayıdır.

map.addLayer('countries', {
    click: function(data, path, event) {
        countryId=data.id;
        alert('You clicked on country with id: ' + countryId);
    },
    mouseenter: function(data, path, event) {
        path.attr("fill", "#FF0000");
    },
    mouseleave:function(data, path, event) {
        path.attr("fill", "#ABC");
    }

  • getLayer fonksiyonu sayesinde daha önceden eklemiş olduğumuz bir katmanı çağırıp üzerine yeni callback fonksiyonlarımızı atayabiliyoruz.

map.getLayer('countries')
    .on('click', function(data, path, event) {
        countryId=data.id;
        alert('You clicked on country with id: ' + countryId);
});

SVG Verilerine Erişmek
Burada ki verilere erişmek için yapılması gereken oldukça basittir. Bu veriler kartograph kütüphanesinde layerların altında sözlük objeleri olarak tutmaktadır. Bu verileri çekmek için istediğiniz katman objesinin üzerinden getPathsData fonksiyonunu kullanıyoruz. Bu fonksiyon bize sözlük objelerinden oluşan bir dizi döndürüyor.

var layer = map.getLayer('mylayer');
var pathData = layer.getPathsData();

Bu dönen verileri haritamız üzerinde bar yada dairesel grafiklerin büyüklüklerini belirlemek için kullanabiliriz. Bu grafiklerin bu çekilen veriler ile nasıl oluşturabileceğimizi bir sonraki yazıda belirteceğim.
İyi haftalar,
Gürcan
Tagged with: ,
Posted in yakindanegitim
Archives
Follow

Get every new post delivered to your Inbox.