3. Agenda
• Example 1: a simple MMOCPG
Massively Multiplayer Online Click-Playing Game
by Krasimir Tsonev
• Example 2: a Connect 4 game
Adaptations for a 2-Player Game
by Gérard Tyedmers
• Various
• Beer
6. Online Game
with NodeJS and Socket.io
• by Krasimir Tsonev
• http://krasimirtsonev.com/blog/article/Real-
time-chat-with-NodeJS-Socketio-and-
ExpressJS
7. Install Node and Modules
• Get Node.js from nodejs.org
• node-v0.10.26-x64
• Socket.io for real time communication
• moniker to generate random names
8. Install Node and Modules
• Create File „package.json“:
{
"name": "SocketioExample",
"version": "0.0.1",
"description": "SocketioExample",
"dependencies": {
"socket.io": "0.9.16",
"moniker": "0.1.2"
},
"author": "dev"
}
• Run „npm install“ in the diretory of your file
10. Structure of the game
index.js - Server
• connection
• disconnect
• click
page.html - Client
11. Structure of the game
index.js - Server
• connection cerate user, add user to users
• disconnect remove user from users
• click add 1 point, broadcast to users
page.html - Client
12. Structure of the game
index.js - Server
• connection cerate user, add user to users
• disconnect remove user from users
• click add 1 point, broadcast to users
page.html - Client
• HTML containers
• Script
13. Structure of the game
page.html
• HTML containers
– Welcome Message
– Progress Bar (clickable)
– Users List
• Script
– Connect to Server
– Get Welcome Message
– Get Users List
– Send Click
– Get Progress
14. Structure of the game
• Client: var socket = io.connect('http://localhost:3250');
• Server: io.sockets.on('connection', function (socket) {
• Client: progress.onclick = function() { socket.emit("click");
• Server: socket.on("click", function() {
• Server: io.sockets.emit("update", {currWidth: currWidth});
• Client: socket.on('update', function (data) {
15. page.html
<!DOCTYPE html>
<html>
<head>
<title>Real time game</title>
<style type="text/css"> ... styles here… </style>
<script src="/socket.io/socket.io.js"></script>
<script type="text/javascript">
... game logic here …
</script>
</head>
17. page.html
window.onload = function() {
var welcome = document.getElementById("welcome");
var allUsers = document.getElementById("users");
var progress = document.getElementById("progress");
var results = document.getElementById("results");
var socket = io.connect('http://localhost:3250');
18. page.html
socket.on('welcome', function (data) { console.log(data);
welcome.innerHTML = "Welcome to the game <strong>" +
data.name + "</strong>„; });
socket.on('users', function (data) { allUsers.innerHTML =
"<strong>Users:</strong> " + data.users; });
socket.on('update', function (data) { progress.innerHTML =
data.currentWidth; progress.style.width =
parseInt(data.currentWidth) + "px"; });
socket.on('win', function (data) { results.innerHTML =
data.message; });
progress.onclick = function() { socket.emit("click"); } }
19. index.js
var handler = function(req, res) {
fs.readFile('./page.html', function (err, data) {
if(err) throw err;
res.writeHead(200);
res.end(data);
});
}
20. index.js
var app = require('http').createServer(handler);
var io = require('socket.io').listen(app);
var fs = require('fs');
var Moniker = require('moniker');
var port = 3250;
app.listen(port);
21. index.js
io.sockets.on('connection', function (socket) {
var user = addUser();
updateWidth();
socket.emit("welcome", user);
socket.on('disconnect', function () {
removeUser(user);
});
socket.on("click", function() {
…
});
});