wordpress realtime - wordcamp são paulo 2015
TRANSCRIPT
real time
Fernando DaciukFullStack Engineer
npm install fdaciuk
zimp.me
github.com/wpbrasil/odin
da2k.com.br
JAVASCRIPTNINJA
eventick.com.br/curso-javascript-ninja
What isreal time?real time?What is
Process that automatesupdating data
Give meexamples!
Data needs to beupdated...
interaction!without user
interaction!without user
1. fast
2. self-updating
How todo that?How todo that?
pooling
Are wethere yet?
function update() {
$.get('/api/product/123')
.done(function(data) {
$('#price').text(data.price);
setTimeout(update, 15000);
});
}
pooling
function update() {
$.get('/api/product/123')
.done(function(data) {
$('#price').text(data.price);
setTimeout(update, 15000);
});
}
functioncreate update
function update() {
$.get('/api/product/123')
.done(function(data) {
$('#price').text(data.price);
setTimeout(update, 15000);
});
}make an
ajax request
function update() {
$.get('/api/product/123')
.done(function(data) {
$('#price').text(data.price);
setTimeout(update, 15000);
});
}update price and
run again after 15s
1. fast
2. self-updating
so fast!It is notso fast!It is not
Client requestsserver
00:00 - GET /api/product/123
Server respondsto client
00:02 - RESPONSE { price: 100}
Server changes dataafter 3s
00:05 - { price: 120}
Client waits 15sbefore request again
00:17 - GET /api/product/123
What is thebetter way?
What is the
socketsweb
the data...Server sends
like
The information
magic!
appears...
Are youready?Are youready?
But, how does it work?
That sounds good!
CLIENTSIDE
.emit()
streamtweet
socket.io-playgroundgithub.com/fdaciuk
npmjs.org/package/node-tweet-stream
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
adddependencies
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
adddependencies
{
"consumer_key": "CONSUMER_KEY",
"consumer_secret": "CONSUMER_SECRET",
"token": "TOKEN",
"token_secret": "TOKEN_SECRET"
}
config.json
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
adddependencies
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
adddependencies
app.use(serveStatic(__dirname + '/public'));
app.get('/', function(req, res) {
res.sendFile(__dirname + '/public/index.html');
});
server.listen(3000);
app.js
Createlocal server
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.ioconfiguration
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.ioconfiguration
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.ioconfiguration
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.ioconfiguration
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.ioconfiguration
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.ioconfiguration
<!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
<!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
<!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
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
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
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
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
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
?
!socket.io-emittersocket.io-redis
CLIENTSIDE
emit()
+ socket.io-emitter
socket.io-redis
Installingdependencies
{
"require": {
"rase/socket.io-emitter": "^0.7.0"
}
}
composer.json
composer require rase/socket.io-emitter
terminal
Install “redis-server”on your operating system
Now, we need a simpleNodeJS Application
var io = require('socket.io')(3000);
io.adapter(require('socket.io-redis')());
io.on('connection', function() {
console.log('Connected!');
});
app.js
PHP can’t emit
events to client
var io = require('socket.io')(3000);
io.adapter(require('socket.io-redis')());
io.on('connection', function() {
console.log('Connected!');
});
app.js
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
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
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
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
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
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
var socket = io('http://localhost:3000');
socket.on('post views', function(id, views) {
$('#post-' + id).text(views);
});
main.js
var socket = io('http://localhost:3000');
socket.on('post views', function(id, views) {
$('#post-' + id).text(views);
});
main.js
var socket = io('http://localhost:3000');
socket.on('post views', function(id, views) {
$('#post-' + id).text(views);
});
main.js
var socket = io('http://localhost:3000');
socket.on('post views', function(id, views) {
$('#post-' + id).text(views);
});
main.js
var socket = io('http://localhost:3000');
socket.on('post views', function(id, views) {
$('#post-' + id).text(views);
});
main.js
the box!Think outsidethe box!Think outside
Fernando DaciukFullStack Engineer
Thanks!
/fdaciuk/talks npm install fdaciuk