web in real time - technical project - socket.io

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

Upload: thomas-ferney

Post on 15-Aug-2015

216 views

Category:

Technology


0 download

TRANSCRIPT

Page 1: Web in real time - technical project - socket.io

Socket.ioWeb in Real-time

/ Thomas Ferney Clément De Figueiredo

Page 2: Web in real time - technical project - socket.io

http://realtimeweb.antiseptikk.fr

Page 3: Web in real time - technical project - socket.io

Summary

Concept introduction

Real-time communication methods

Node.js

Socket.io

Applications

Conclusion

Page 4: Web in real time - technical project - socket.io

Web in Real-timeCollaborative + Multi-screen + New contexts

Page 5: Web in real time - technical project - socket.io

Real-time communicationmethods

Page 6: Web in real time - technical project - socket.io

Pooling made every secondsOvercharged risk in case of overcrowding

Page 7: Web in real time - technical project - socket.io

Ajax Long PoolingPooling variation

Connection open waiting for dataConnection closed by a response or a timeout

Many connections open at once

Page 8: Web in real time - technical project - socket.io

Ajax Multipart StreamingMethod based on Gecko(Netscape Navigator, Firefox...)

Adding the parameter multipart = true to the XMLHttpRequest objectUse of multipart/x-mixed-replace content that will stream data

Page 9: Web in real time - technical project - socket.io

Forever iframeHidding an iframe with the mentions :

Transfer-encoding : chunkedConnection : keep-alive

Infinite loading bar on some browser

Page 10: Web in real time - technical project - socket.io

WebSocketsBi-directionnal communication over a TCP socket

Standards methods on every browser

Page 11: Web in real time - technical project - socket.io

Runtime environment for JavaScript programs developed in C++Code interpretation with the V8 engine of Google

Library of modules managed with NPM

Page 12: Web in real time - technical project - socket.io

Server creationvar 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');

Page 13: Web in real time - technical project - socket.io

Framework JavaScript using WebSocketsEnhanced support for browsers

Available from NPM

Page 14: Web in real time - technical project - socket.io

Exemple of server implementationvar 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' ););

Page 15: Web in real time - technical project - socket.io

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); );

Page 16: Web in real time - technical project - socket.io

Monitoring appDaemon in C

MySQL databaseDashboard in HTML / JavaScript on a Node.js server

Page 17: Web in real time - technical project - socket.io

2:19

Page 18: Web in real time - technical project - socket.io

Collaboratives shopping lists appMongoDB database

AngularJS web app on a Node.js server

Page 19: Web in real time - technical project - socket.io

1:36

Page 20: Web in real time - technical project - socket.io

Conclusion

Node.jsEasy to usePowerful

Socket.ioAbstractionAPI well-stocked

Real-time in few lines

Page 21: Web in real time - technical project - socket.io

4:48

Page 22: Web in real time - technical project - socket.io

Thanks a lot !Contact : / @MrAntiseptikk @CaptainKali