jstanbul, node.js based socket.io, express and html5 based bingo game
DESCRIPTION
Node.js based Socket.IO, Express and HTML 5 based Bingo! game development presentation which is presented during the Turkey's first javascript conference jstanbulTRANSCRIPT
{
Bingo Oyununu Node.js, Socket.io ve HTML5 ile
Geliştirme By @emrahayanoglu #jstanbul
Merhaba(); >BenKimim()
@emrahayanoglu [email protected]
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