Kedvet kaptam játszani egy nagyon egyszerű, de annál inkább szórakoztatóbb kártya (társas) játékot. Történethez tartozik, hogy meg szerettem volna vásárolni azt, de sehol nem találtam tisztességes áron, így hát nyakamba vettem az online szabálykönyvet és nekiültem implementálni.
JavaScript nyelven írtam a játék logikáját, amit eleinte frontend oldalra terveztem kitenni, végül szerver oldalra került. Készültek tesztek Jasmine JS segítségével. Nagyjából 60 tesztesettel fedtem le , amiben 100-nál is több állítás van. Frontenden csak a socket.io kliens kódja és az eseményvezérelt UI kódbázisa található. Minden egyes kliens mozzanatot a szerver felé küld, így szűrve a csalás lehetőségét.
Most kezdtem el (újra) ismerkedni a Node.js rejtelmeivel, nehéz volt frontend-en megszokott dolgokat elfelejteni, hiszen más szabályok vannak szerver oldalon. Hozzáteszem, itt minden jobb, kényelmesebb és elérhető npm-el.
Választásom Expressjs-re esett, ami nagyban leegyszerűsítettem a Node.js hiányosságaimat. Pillanatokon belül sikerült egy példa szervert beállítanom. Először telepíteni kell a hiányzó node modult.
$ sudo npm install express
Majd készítettem egy basic-server.js fájlt, amibe betöltöm a későbbiekben használt elemeket.
var app = require('express')(),
server = require('http').createServer(app);
app.get('/', function(request, response) {
response.sendfile(__dirname + '/index.html');
});
server.listen(3000);
var activePlayerCount = 0;
io.sockets.on('connection', function(socket) {
activePlayerCount++;
// ez a node konzolján jelenik majd meg
console.log('Aktív játékosok száma:' activePlayerCount);
io.sockets.emit('playerChange', {number: activePlayerCount});
socket.on('disconnect', function() {
activePlayerCount--;
io.sockets.emit('playerChange', {number: activePlayerCount});
});
});
Szerver indítása után a http://127.0.0.1:3000/ oldalon már az index.html fájlunkat szolgáljuk ki ahova a már említett frontend kódokat helyezzük. Szerepeljen benne valami ilyesmi:
<!DOCTYPE html>
<html>
<head>
<script src="/static/app.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script>
var socket = io.connect('http://127.0.0.1:3000');
socket.on('playerChange', function(data) {
// ez a böngésző konzolján jelenik majd meg
console.log('Aktív játékosok száma:', data.number);
});
</script>
</head>
<body>Hello world!</body>
</html>
A fenti páros az egyidejűleg az oldalon tartózkodó felhasználók számát fogja kiírni a böngésző ill. a szerver konzoljára. Használjuk a socket.io.js fájlt, ezt a webszerver kiszolgálja statikusan, nem kell letölteni/másolgatni. Viszont az app.js fájlra szükségünk van és jelenleg 404-et kap. Ezért bővítettem a szervert egy statikus fájlkiszolgálással.
app.configure(function(){
app.use("/static", express.static(__dirname + '/src/'));
});
Ez most egyben egy routing is, hiszen minden kérés ami illeszkedik a /static/* -ra azt az src/ mappából fogja kiszolgálni a node szerver. Van egy kellemetlen mellékhatása a basic-server.js fájl bővítésének: újra kell indítani minden alkalommal a szervert.
$ sudo node basic-server.js
Elvileg 1024 alatti portok figyeléséhez szükség van sudo-ra, gyakorlatilag én a 3000-es portot sem tudtam sudo nélkül hallgatni. Lehet használja valami.
Jelenleg állapotban tehát él a kiszolgálás, csatlakozhatunk több szállal (akár több böngésző füllel is) a szerverhez, mindegyik egy-egy egyedi "játékosnak" felel meg. Tudunk a szerver és a játékosok között kommunikálni, eseményeket kezelni. A következő lépés az lesz, hogy minden "játékost" egyedileg azonosítunk.
Folyt köv.