Web in real time - technical project - socket.io http://realtimeweb.antiseptikk.fr/

1. Socket.io
Web in Real-time
/Thomas Ferney Clément De Figueiredo

2. http://realtimeweb.antiseptikk.fr

3. Summary
Concept introduction
Real-time communication methods
Node.js
Socket.io
Applications
Conclusion

4. Web in Real-time
Collaborative + Multi-screen + New contexts

5. Real-time communication
methods

6. Pooling made every seconds
Overcharged risk in case of overcrowding

7. Ajax Long Pooling
Pooling variation
Connection open waiting for data
Connection closed by a response or a timeout
Many connections open at once

8. Ajax Multipart Streaming
Method based on Gecko(Netscape Navigator, Firefox...)
Adding the parameter multipart=trueto the XMLHttpRequest object
Use of multipart/x-mixed-replacecontent that will stream data

9. Forever iframe
Hidding an iframe with the mentions :
Transfer-encoding:chunked
Connection:keep-alive
Infinite loading bar on some browser

10. WebSockets
Bi-directionnal communication over a TCP socket
Standards methods on every browser

11. Runtime environment for JavaScript programs developed in C++
Code interpretation with the V8 engine of Google
Library of modules managed with NPM

12. Server creation
var http = require('http'),
fs = require('fs');
http.createServer(function(req, res) {
res.writeHead(200, {
'Content­Type': 'text/html',
'Access­Control­Allow­Origin': '*'
});
var readStream = fs.createReadStream(__dirname + '/index.html');
readStream.pipe(res);
}).listen(3000);
console.log('http://localhost:3000');

13. Framework JavaScript using WebSockets
Enhanced support for browsers
Available from NPM

14. Exemple of server implementation
var app = require('http').createServer(handler);
var io = require('socket.io')(app);
var fs = require('fs');
app.listen(80);
function handler (req, res) {
fs.readFile(__dirname + '/index.html',
function (err, data) {
res.writeHead(200);
res.end(data);
});
}
io.on('connection', function(socket) {
socket.emit('news', { hello: 'world' });
});

15. Exemple of client implementation
<script src="/socket.io/socket.io.js"></script>
<script>
</script>
var socket = io('http://localhost');
socket.on('news', function (data) {
console.log(data);
});

16. Monitoring app
Daemon in C
MySQL database
Dashboard in HTML / JavaScript on a Node.js server

17. 2:19

18. Collaboratives shopping lists app
MongoDB database
AngularJS web app on a Node.js server

19. 1:36

20. Conclusion
Node.js
Easy to use
Powerful
Socket.io
Abstraction
API well-stocked
Real-time in few lines

21. 4:48

22. Thanks a lot !
Contact : /@MrAntiseptikk @CaptainKali