WordPress Real Time

What is Real Time and how to use it inside WordPress.
Version with gifs can be found here:
https://docs.google.com/presentation/d/1ec-JpzrGDAfm6VM7RG8VZqTk-J34ZIEo70ZkLN2gYIg/present?slide=id.g324d53eb4_0_14

Transcript

1. real time
2. Fernando Daciuk Frontend Engineer /fdaciuk {
4. github.com/wpbrasil/odin
5. da2k.com.br
6. JAVASCRIPT NINJA WCBH15 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. stream tweet socket.io-playground github.com/fdaciuk
36. npmjs.org/package/node-tweet-stream
37. 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
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. { "consumer_key": "CONSUMER_KEY", "consumer_secret": "CONSUMER_SECRET", "token": "TOKEN", "token_secret": "TOKEN_SECRET" } config.json
40. 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
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. app.use(serveStatic(__dirname + '/public')); app.get('/', function(req, res) { res.sendFile(__dirname + '/public/index.html'); }); server.listen(3000); app.js Create local server
43. io.on('connection', function(socket) { console.log('socket.io connected!'); tw.track('wordcampbh'); tw.on('tweet', function(tweet) { socket.emit('tweet', tweet); }); }); app.js socket.io configuration
44. io.on('connection', function(socket) { console.log('socket.io connected!'); tw.track('wordcampbh'); 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('wordcampbh'); 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('wordcampbh'); 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('wordcampbh'); 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('wordcampbh'); tw.on('tweet', function(tweet) { socket.emit('tweet', tweet); }); }); app.js socket.io configuration
49. <!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
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. 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
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. ?
58. We’ll need to use socket.io-emitter
59. { "require": { "rase/socket.io-emitter": "^0.7.0" } } composer.json
60. Install “redis-server” on your operating system
61. Now, we need a simple NodeJS Application
62. var io = require('socket.io')(3000); io.adapter(require('socket.io-redis')()); io.on('connection', function() { console.log('Connected!'); }); app.js
63. PHP can’t emit events to client
64. var io = require('socket.io')(3000); io.adapter(require('socket.io-redis')()); io.on('connection', function() { console.log('Connected!'); }); app.js
65. 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 SocketIO\Emitter(); $emitter->emit( 'post views', $id, $views ); echo $views; single.php
66. 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 SocketIO\Emitter(); $emitter->emit( 'post views', $id, $views ); echo $views; single.php
67. 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 SocketIO\Emitter(); $emitter->emit( 'post views', $id, $views ); echo $views; single.php
68. 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 SocketIO\Emitter(); $emitter->emit( 'post views', $id, $views ); echo $views; single.php
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 SocketIO\Emitter(); $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 SocketIO\Emitter(); $emitter->emit( 'post views', $id, $views ); echo $views; single.php
71. var socket = io('http://localhost:3000'); socket.on('post views', function(id, views) { $('#post-' + id).text(views); }); main.js
72. the box! Think outside the box! Think outside
73. Fernando Daciuk Frontend Engineer /fdaciuk { Thanks! /fdaciuk/talks