Node.js based Socket.IO, Express and HTML 5 based Bingo! game development presentation which is presented during the Turkey's first javascript conference jstanbul

1. Bingo Oyununu Node.js,
Socket.io ve HTML5 ile
Geliştirme
{
By @emrahayanoglu #jstanbul

2. Merhaba();
>BenKimim()
@emrahayanoglu
emrahayanoglu@gmail.com

3. node.JS?
Express?
HTML 5?
Socket.IO?
Bingo Oyunu?
Oyun Tasarımı?

4. Bingo
Oyunu
Oyun
Tasarımı
Oyun Server
ve Client
Tasarımı
İmplementasyon
Whooray!!!

5. 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.

6. Oyun Salonu
Oda 1
Oda 2

7. Oyuncu Bingo içerisinde nasıl davranır?
Oyuncu
online
oldu
Oyuncu bir
tane oda
seçer
Oyun odada
başlar
Odadaki
oyun
tamamlanır

8. Oyun Server ve Client
Tasarımı
Server
(Node.js)
Client
Redis
(Temporary Storage)
Controller
Socket.IO
MQ
Front
Socket.IO
HTML 5
Models
Rendering
MySQL
(Persistent Storage)

9. 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

10. 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 Worldn'ʹ);
}).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/

11. 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.

12. 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

13. Express Örneği
Görüntüleme
Motoru
Görüntüleme
Dizin Yeri
Yöneltici
(Router)
Statik
Dosyaların
Dizin Yeri
Port 3000’I
dinle

14. Node.JS ve Express tamam, peki,
Client ile Oyun Server’larını nasıl
bağlamalıyız?
Flash Socket
Websocket
=
SOCKET.IO
XHR-­‐‑Polling
JSONP-­‐‑Polling

15. 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ı

16. Socket.IO hakkında daha fazla
bilgi…
Event Send&Receive
Server Tarafı
Client Tarafı
Veya WebSocket gibi
kullan

17. 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ı

18. Server tarafı tamamlandı, peki
Client tarafındaki grafikleri ne ile
geliştirebiliriz?

19. 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…

20. Bingo Demo

21. Son olarak,
• Deployment
• Heroku
• Nodejitsu
• AWS
• API Entegrasyonu
• Facebook
• hpps://github.com/emrahayanoglu