Versão com GIFs: https://docs.google.com/presentation/d/17M-jHlkAP5KPfQ4_Alck_wIsN2gK3dZNGfJR9Bi1L50/present Códigos para instalação das dependências: https://github.com/fdaciuk/talks/tree/master/2015/wordcamp-sao-paulo

1. real time

2. Fernando Daciuk
FullStack Engineer
npm install fdaciuk

3. zimp.me

4. github.com/wpbrasil/odin

5. da2k.com.br

6. JAVASCRIPT
NINJA
eventick.com.br/curso-javascript-ninja

7. What is
real time?real time?
What is

8. Process that automates
updating data

9. Give me
examples!

12. Data needs to be
updated...

13. interaction!
without user
interaction!
without user

14. 1. fast
2. self-updating

15. How to
do that?
How to
do that?

16. pooling

17. Are we
there yet?

18. function update() {
$.get('/api/product/123')
.done(function(data) {
$('#price').text(data.price);
setTimeout(update, 15000);
});
}
pooling

19. function update() {
$.get('/api/product/123')
.done(function(data) {
$('#price').text(data.price);
setTimeout(update, 15000);
});
}
function
create update

20. function update() {
$.get('/api/product/123')
.done(function(data) {
$('#price').text(data.price);
setTimeout(update, 15000);
});
}
make an
ajax request

21. function update() {
$.get('/api/product/123')
.done(function(data) {
$('#price').text(data.price);
setTimeout(update, 15000);
});
}
update price and
run again after 15s

22. 1. fast
2. self-updating

23. so fast!
It is not
so fast!
It is not

24. Client requests
server
00:00 - GET /api/product/123

25. Server responds
to client
00:02 - RESPONSE {
price: 100
}

26. Server changes data
after 3s
00:05 - {
price: 120
}

27. Client waits 15s
before request again
00:17 - GET /api/product/123

28. What is the
better way?
What is the

29. sockets
web

30. the data...
Server sends

31. like
The information
magic!
appears...

32. Are you
ready?
Are you
ready?

33. But, how does
it work?
That sounds good!

35. CLIENT
SIDE
.emit()

36. stream
tweet
socket.io-playground
github.com/fdaciuk

37. npmjs.org/package/node-tweet-stream

38. var config = require('./config.json');
var app = require('express')();
var serveStatic = require('serve-static');
var server = require('http').Server(app);
var io = require('socket.io')(server);
var tw = require('node-tweet-stream')(config);
app.js
add
dependencies

39. var config = require('./config.json');
var app = require('express')();
var serveStatic = require('serve-static');
var server = require('http').Server(app);
var io = require('socket.io')(server);
var tw = require('node-tweet-stream')(config);
app.js
add
dependencies

40. {
"consumer_key": "CONSUMER_KEY",
"consumer_secret": "CONSUMER_SECRET",
"token": "TOKEN",
"token_secret": "TOKEN_SECRET"
}
config.json

41. var config = require('./config.json');
var app = require('express')();
var serveStatic = require('serve-static');
var server = require('http').Server(app);
var io = require('socket.io')(server);
var tw = require('node-tweet-stream')(config);
app.js
add
dependencies

42. var config = require('./config.json');
var app = require('express')();
var serveStatic = require('serve-static');
var server = require('http').Server(app);
var io = require('socket.io')(server);
var tw = require('node-tweet-stream')(config);
app.js
add
dependencies

43. app.use(serveStatic(__dirname + '/public'));
app.get('/', function(req, res) {
res.sendFile(__dirname + '/public/index.html');
});
server.listen(3000);
app.js
Create
local server

44. io.on('connection', function(socket) {
console.log('socket.io connected!');
tw.track('wordcampsp');
tw.on('tweet', function(tweet) {
socket.emit('tweet', tweet);
});
});
app.js
socket.io
configuration

45. io.on('connection', function(socket) {
console.log('socket.io connected!');
tw.track('wordcampsp');
tw.on('tweet', function(tweet) {
socket.emit('tweet', tweet);
});
});
app.js
socket.io
configuration

46. io.on('connection', function(socket) {
console.log('socket.io connected!');
tw.track('wordcampsp');
tw.on('tweet', function(tweet) {
socket.emit('tweet', tweet);
});
});
app.js
socket.io
configuration

47. io.on('connection', function(socket) {
console.log('socket.io connected!');
tw.track('wordcampsp');
tw.on('tweet', function(tweet) {
socket.emit('tweet', tweet);
});
});
app.js
socket.io
configuration

48. io.on('connection', function(socket) {
console.log('socket.io connected!');
tw.track('wordcampsp');
tw.on('tweet', function(tweet) {
socket.emit('tweet', tweet);
});
});
app.js
socket.io
configuration

49. io.on('connection', function(socket) {
console.log('socket.io connected!');
tw.track('wordcampsp');
tw.on('tweet', function(tweet) {
socket.emit('tweet', tweet);
});
});
app.js
socket.io
configuration

50. <!DOCTYPE html>
<html>
...
<body>
<ul data-js="tweets"></ul>
<script src="/socket.io/socket.io.js"></script>
<script src="js/main.js"></script>
</body>
</html>
public/index.html

51. <!DOCTYPE html>
<html>
...
<body>
<ul data-js="tweets"></ul>
<script src="/socket.io/socket.io.js"></script>
<script src="js/main.js"></script>
</body>
</html>
public/index.html

52. <!DOCTYPE html>
<html>
...
<body>
<ul data-js="tweets"></ul>
<script src="/socket.io/socket.io.js"></script>
<script src="js/main.js"></script>
</body>
</html>
public/index.html

53. var socket = io('http://localhost:3000');
var $tweets = document.querySelector('[data-js="tweets"]');
socket.on('tweet', function(data) {
$tweets.innerHTML += '<li>' + data.text + '<li>';
});
public/js/main.js

54. var socket = io('http://localhost:3000');
var $tweets = document.querySelector('[data-js="tweets"]');
socket.on('tweet', function(data) {
$tweets.innerHTML += '<li>' + data.text + '<li>';
});
public/js/main.js

55. var socket = io('http://localhost:3000');
var $tweets = document.querySelector('[data-js="tweets"]');
socket.on('tweet', function(data) {
$tweets.innerHTML += '<li>' + data.text + '<li>';
});
public/js/main.js

56. var socket = io('http://localhost:3000');
var $tweets = document.querySelector('[data-js="tweets"]');
socket.on('tweet', function(data) {
$tweets.innerHTML += '<li>' + data.text + '<li>';
});
public/js/main.js

57. var socket = io('http://localhost:3000');
var $tweets = document.querySelector('[data-js="tweets"]');
socket.on('tweet', function(data) {
$tweets.innerHTML += '<li>' + data.text + '<li>';
});
public/js/main.js

58. ?

59. !
socket.io-emitter
socket.io-redis

60. CLIENT
SIDE
emit()
+ socket.io-emitter
socket.io-redis

61. Installing
dependencies

62. {
"require": {
"rase/socket.io-emitter": "^0.7.0"
}
}
composer.json

63. composer require rase/socket.io-emitter
terminal

64. Install “redis-server”
on your operating system

65. Now, we need a simple
NodeJS Application

66. var io = require('socket.io')(3000);
io.adapter(require('socket.io-redis')());
io.on('connection', function() {
console.log('Connected!');
});
app.js

67. PHP can’t emit
events to client

68. var io = require('socket.io')(3000);
io.adapter(require('socket.io-redis')());
io.on('connection', function() {
console.log('Connected!');
});
app.js

69. require_once './vendor/autoload.php';
$id = get_the_ID();
$views = (int) get_post_meta( $id, 'views', true );
$views++;
update_post_meta( $id, 'views', $views );
$emitter = new SocketIOEmitter();
$emitter->emit( 'post views', $id, $views );
echo $views;
single.php

70. require_once './vendor/autoload.php';
$id = get_the_ID();
$views = (int) get_post_meta( $id, 'views', true );
$views++;
update_post_meta( $id, 'views', $views );
$emitter = new SocketIOEmitter();
$emitter->emit( 'post views', $id, $views );
echo $views;
single.php

71. require_once './vendor/autoload.php';
$id = get_the_ID();
$views = (int) get_post_meta( $id, 'views', true );
$views++;
update_post_meta( $id, 'views', $views );
$emitter = new SocketIOEmitter();
$emitter->emit( 'post views', $id, $views );
echo $views;
single.php

72. require_once './vendor/autoload.php';
$id = get_the_ID();
$views = (int) get_post_meta( $id, 'views', true );
$views++;
update_post_meta( $id, 'views', $views );
$emitter = new SocketIOEmitter();
$emitter->emit( 'post views', $id, $views );
echo $views;
single.php

73. require_once './vendor/autoload.php';
$id = get_the_ID();
$views = (int) get_post_meta( $id, 'views', true );
$views++;
update_post_meta( $id, 'views', $views );
$emitter = new SocketIOEmitter();
$emitter->emit( 'post views', $id, $views );
echo $views;
single.php

74. require_once './vendor/autoload.php';
$id = get_the_ID();
$views = (int) get_post_meta( $id, 'views', true );
$views++;
update_post_meta( $id, 'views', $views );
$emitter = new SocketIOEmitter();
$emitter->emit( 'post views', $id, $views );
echo $views;
single.php

75. var socket = io('http://localhost:3000');
socket.on('post views', function(id, views) {
$('#post-' + id).text(views);
});
main.js

76. var socket = io('http://localhost:3000');
socket.on('post views', function(id, views) {
$('#post-' + id).text(views);
});
main.js

77. var socket = io('http://localhost:3000');
socket.on('post views', function(id, views) {
$('#post-' + id).text(views);
});
main.js

78. var socket = io('http://localhost:3000');
socket.on('post views', function(id, views) {
$('#post-' + id).text(views);
});
main.js

79. var socket = io('http://localhost:3000');
socket.on('post views', function(id, views) {
$('#post-' + id).text(views);
});
main.js

80. the box!
Think outside
the box!
Think outside

81. Fernando Daciuk
FullStack Engineer
Thanks!
/fdaciuk/talks npm install fdaciuk