Upload
christian-joudrey
View
13.194
Download
0
Embed Size (px)
Citation preview
The challenges
• We want persistent connection between client and server
o Easy! We've got HTML5 Websockets.
The challenges
• We want persistent connection between client and server
o Easy! We've got HTML5 Websockets.
• We want to detect client disconnection and timeouts
The challenges
• We want persistent connection between client and server
o Easy! We've got HTML5 Websockets.
• We want to detect client disconnection and timeouts
o Easy! We can detect when a websocket closes.
The challenges
• We want persistent connection between client and server
o Easy! We've got HTML5 Websockets.
• We want to detect client disconnection and timeouts
o Easy! We can detect when a websocket closes.
• We want cross-browser support
That's okay...
• We can use different transports:
o HTML5 WebSocket
o Flash Socket
o AJAX Long Polling
o Forever Iframe
“Socket.IO aims to make realtime apps possible in every browser and mobile device, blurring the differences between the different transport mechanisms. It's care-free realtime 100% in JavaScript.”
Getting started
• Socket.IO: http://socket.io
• Install Socket.IO using npm:npm install socket.io
• Documentation: http://bit.ly/SocketIODocs
Your first server
# Using Express as http servervar app = require('express').createServer();var io = require('socket.io').listen(app);
io.sockets.on('connection', function (socket) { console.log('Someone connected!');});
app.listen(8080);
# You can also use node's http modulevar app = require('http').createServer(callback);var io = require('socket.io').listen(app);
app.listen(8080);
- or -
Client-side JS
<script src='/socket.io/socket.io.js'></script><script> var socket = io.connect(); socket.on('connect', function () { console.log('We are connected!'); });</script>
Sending a message to server
<script src='/socket.io/socket.io.js'></script><script> var socket = io.connect(); socket.on('connect', function () { console.log('We are connected!'); var name = prompt('What is your name?'); this.emit('set nickname', name); });</script>
Receiving a message from client
var app = require('express').createServer();var io = require('socket.io').listen(app);
io.sockets.on('connection', function (socket) { console.log('Someone connected!'); socket.on('set nickname', function (nickname) { socket.nickname = nickname; console.log(nickname + ' just connected!'); });});
app.listen(8080);
Message acknowledgement (client)
<script src='/socket.io/socket.io.js'></script><script> var socket = io.connect(); socket.on('connect', function () { console.log('We are connected!');
var name = prompt('What is your name?');
this.emit('set nickname', name, function (success) { console.log('The server got the message!');
if (!success) { console.log('Nickname in use!'); } }); });</script>
Message acknowledgement (server)var app = require('express').createServer();var io = require('socket.io').listen(app);
var users = [];
io.sockets.on('connection', function (socket) { socket.on('set nickname', function (nick, cb) { if (users.indexOf(nick) != -1) { return cb(false); }
socket.nickname = nick; users.push(nick); cb(true); });});
app.listen(8080);
Detecting disconnectsvar app = require('express').createServer();var io = require('socket.io').listen(app);
var users = [];
io.sockets.on('connection', function (socket) { // ... socket.on('disconnect', function () { var nickname = socket.nickname;
if (nickname) { socket.broadcast.emit('user part', nickname); users.splice(users.indexOf(nickname), 1); } });});
app.listen(8080);
Interesting links
• Source code of a working chat: http://bit.ly/nodechat1
• Socket.IO Docs: http://bit.ly/SocketIODocs