{

Bingo  Oyununu  Node.js,  Socket.io  ve  HTML5  ile  

Geliştirme By  @emrahayanoglu  #jstanbul

Merhaba(); >BenKimim()

@emrahayanoglu emrahayanoglu@gmail.com

node.JS? Express?

Socket.IO? HTML  5?

Bingo  Oyunu? Oyun  Tasarımı?

Bingo  Oyunu

Oyun  Tasarımı

Oyun  Server  ve  Client  Tasarımı

İmplementasyon

Whooray!!!

Bingo!  Oyunu  (Tombala)

General  Rules: •  Seçilen  sayılar  0  ile  90  arasında  olmalıdır •  Oyun  kartında  her  sütun  10’un  katları  olan  sayıları  içermektedir. •  Bir  oyuncunun  kartındaki  bütün  sayılar,  seçilen  sayılar  arasındaysa          oyuncu  Bingo’yu  kazanır.

Oyun  Salonu

Oda  1 Oda  2

Oyuncu  online  oldu

Oyuncu  bir  tane  oda  seçer  

Oyun  odada  başlar

Odadaki  oyun  

tamamlanır

Oyuncu  Bingo  içerisinde  nasıl  davranır?  

Server  (Node.js) Client

Fron

t  Con

troller

Models

Redis (Temporary  Storage)

MySQL (Persistent  Storage)

Socket.IO

HTML  5  Rendering

Socket.IO

Oyun  Server  ve  Client  Tasarımı

MQ

Peki,  Node.JS  nedir?  Sadece  modern  teknoloji  sozcüklerinden  birimi?

•  Javascript  programlama  ortamı

•  V8  tabanlı

•  Olaya  Dayalı(Event  Driven)

•  Doğal  olarak  Non-­‐‑blocking  I/O  modeli  destekler  

•  C/C++  tabanlı  eklentileri  destekler

•  Çok  hızlı(Blazing  fast)

•  Gerçek  zamanlı  uygulamalar  için  

         oldukça  uygun

•  Referenslar; •  Linkedin,  Yahoo,  Uber,  Game  Salad

Node.JS  ile  web  server  oluştumak  kolaymı?

var  hpp  =  require('ʹhpp'ʹ); hpp.createServer(function  (req,  res)  {    res.writeHead(200,  {'ʹContent-­‐‑Type'ʹ:  'ʹtext/plain'ʹ});    res.end('ʹHello  World\n'ʹ); }).listen(1337,  'ʹ127.0.0.1'ʹ); console.log('ʹServer  running  at  hpp://127.0.0.1:1337/'ʹ);

>node  example.js Server  running  at  hpp://127.0.0.1:1337/

Fakat,  Multiplayer  oyunlar  için  neden  Node.JS’I  tercih  edelim?

•  Diğer  dillerdeki  kütüphaneler  gibi  Doğal  olarak  Olaya  dayalı(Event  driven)  ve  Non  blocking  I/O  modeli  destekler; •  Nepy(Java) •  EventMachine(Ruby) •  Twisted(Python)

•  Mevcut  projeleri  Node.JS’e  çevirmek  oldukça  kolay; •  DB •  Caching •  Message  Queue •  Authentication(OAuth)

•  Son  olarak,  Node.js  sadece  JavaScript’ten  oluşur.

Node.JS  tamam,  peki  Web  Framework  için    Node.JS’te  hangi  

kütüphaneyi  kullanabiliriz?

Express  nedir? •  Node.JS’teki  Ruby  Sinatra  tabanlı  web  kütüphanesidir. •  Node.JS’te  yüksek  performans  ve  en  üst  kalite  web  geliştirme  

olanağını  sağlar. •  Özellikleri;

•  Sağlam  yöneltici(routing)  barındırır. •  (Redirection)Yönlendirme  yardımcılarını  barındırır. •  Dinamik  görüntüleme  yardımcılarını  barındırır. •  Yüksek  performansa  odaklıdır. •  Session  tabanlı  flash  bildirimleri  destekler. •  Referanslar;

•  Learnboost •  Linkedin  Mobile

Yöneltici (Router)

Görüntüleme   Dizin  Yeri

Görüntüleme  Motoru

Statik  Dosyaların  Dizin  Yeri

Port  3000’I  dinle

Express  Örneği

Node.JS  ve  Express  tamam,  peki,  Client  ile  Oyun  Server’larını  nasıl  

bağlamalıyız?

Flash  Socket

Websocket

XHR-­‐‑Polling

JSONP-­‐‑Polling

= SOCKET.IO

Peki,  Socket.IO  nedir?

•  Socket.IO  gerçek  zamanlı  ve  devamlı(persistent)  bağlantıyı  gerçekleştirir. •  Birçok  Browser’a  destek  verir.

•  Hapa,  IE  5.5’a  bile  destek  verir  J •  API  tabanında  WebSocket,  Flash  Socket,  Long  Polling  AJAX,  Multipart  

AJAX,  Iframes  vardır •  Otomatik  olarak  JSON  encoding/decoding’i  gerçekleştirir. •  Alan  adlarına(Namespaces(Multiplexing))  ve  

Anlaşmaya(Handshaking(Session  Handling))  destek  verir.

Server  Tarafı Client  Tarafı

Socket.IO  hakkında  daha  fazla  bilgi…

Event  Send&Receive

Veya  WebSocket  gibi  kullan

Server  Tarafı Client  Tarafı

Socket.IO’u  oyunlarımız  için  nasıl  kullanabiliriz?

•  Oyun  içerisindeki  mesajlaşmaları  ve  olayları  Socket.IO  ile  iletebiliriz. •  Socket.IO  birçok  browser’a  mesajların  yollanmasını  sağlamaktadır. •  Hapa,  JSON  decode  veya  encode’a  gerek  olmadan  iletişimi  sağlamaktadır. •  Bizim  deneyimlerimize  göre  Flash  Socket  ve  Web  Socket’i  diğer  iletim  

yöntemlerine  göre  tercih  etmemiz  tavsiye  edilir.

Bingo  Oyunundaki  Örnek  Socket.IO

Server  Tarafı Client  Tarafı

Server  tarafı  tamamlandı,  peki  Client  tarafındaki  grafikleri  ne  ile  

geliştirebiliriz?

HTML5  == <!DOCTYPE  html>  ?  

•  J  HTML5  birçok  yeni  API’la  geliyor; •  Canvas  API •  WebSocket  API •  LocalStorage  API •  WebStorage •  WebGL •  …

•  2D  Graphics  =  HTML5.getCanvasAPI(); •  Browser  içerisinden  2D  olarak  grafik  geliştirmemize  olanak  sağlar •  Javascript  ve  HTML’den  başka  herhangi  bir  araç  ve  programlama  dili  

kullanmaya  gerek  yoktur. •  Modern  Browser’lar  tarafından  desteklenmektedir. •  Plug-­‐‑in  tabanlı  Flash,  Silverlight  gibi  eklentilere  ve  SVG’yi  artık  

unutun…

Bingo  Demo  

Son  olarak,

•  Deployment •  Heroku •  Nodejitsu •  AWS

•  API  Entegrasyonu •  Facebook

•  hpps://github.com/emrahayanoglu