Slide 1

Slide 1 text

Making WordPress Real-Time Tony Kovanen

Slide 2

Slide 2 text

What is real-time?

Slide 3

Slide 3 text

What is real-time? 1. Data displayed in the UI is always up to date

Slide 4

Slide 4 text

What is real-time? 1. Data displayed in the UI is always up to date 2. Data is updated with minimum latency (as quickly as possible)

Slide 5

Slide 5 text

Client Server Request Response Request GET /index.html HTTP/1.1 Host: www.example.com Response HTTP/1.1 200 OK Date: Mon, 23 May 2005 22:38:34 GMT Server: Apache/1.3.3.7 (Unix) (Red-Hat/Linux) Last-Modified: Wed, 08 Jan 2003 23:11:55 GMT ETag: "3f80f-1b6-3e1cb03b" Content-Type: text/html; charset=UTF-8 Content-Length: 138 Accept-Ranges: bytes Connection: close An Example Page Hello World, this is a very simple HTML document.

Slide 6

Slide 6 text

setInterval(function() { $.getJSON(url, function(data) { // Updating simple text element, got: { count: x } $(dataElementSelector).text(data.count); }); }, 5000);

Slide 7

Slide 7 text

1. Data displayed in the UI is always up to date 2. Data is updated with minimum latency (as quickly as possible) setInterval(function() { $.getJSON(url, function(data) { // Updating simple text element, got: { count: x } $(dataElementSelector).text(data.count); }); }, 5000);

Slide 8

Slide 8 text

1. Data displayed in the UI is always up to date 2. Data is updated with minimum latency (as quickly as possible) — at least sort of setInterval(function() { $.getJSON(url, function(data) { // Updating simple text element, got: { count: x } $(dataElementSelector).text(data.count); }); }, 10);

Slide 9

Slide 9 text

Food ready?

Slide 10

Slide 10 text

Food ready? Food ready?

Slide 11

Slide 11 text

Food ready? Food ready? Food ready? Food ready? Food ready?

Slide 12

Slide 12 text

Food ready? Food ready? Food ready? Food ready? Food ready? Server congestion

Slide 13

Slide 13 text

Client Server Long-lived connection WebSocket

Slide 14

Slide 14 text

var socket = new WebSocket(url); socket.onopen = function(event) { socket.send('This is a message'); }; socket.onmessage = function(event) { console.log(event.data); };

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

Socket.IO // note, io() will create an HTTP server for you var io = require('socket.io')(80); io.on('connection', function(socket) { // Event based socket.emit('event', { will: 'be received only by the socket' }); io.emit('event', { will: 'be received by everyone' }); io.volatile.emit('volatile event', { will: 'only be received if socket not busy' }); // Rooms socket.join('all the cool sockets'); socket.to('all the cool sockets').emit('hello cool sockets'); // Receiving events socket.on('private message', function(from, msg) { console.log('I received a private message by ', from, ' saying ', msg); }); socket.on('reconnect', function() { console.log('socket reconnected'); }); socket.on('disconnect', function (){ io.emit('user disconnected'); }); });

Slide 17

Slide 17 text

Socket.IO var socket = io.connect('http://localhost'); // Listening to events on the client side socket.on('news', function(data) { console.log(data); // Emitting events on the client side socket.emit('my other event', { my: 'data' }); });

Slide 18

Slide 18 text

Socket.IO Server WordPress site Redis Client

Slide 19

Slide 19 text

'6379', 'host' => '127.0.0.1' )); $emitter->emit('event name', array( 'property' => 'much value', 'another' => 'very object' )); ?> github.com/rase-/socket.io-php-emitter

Slide 20

Slide 20 text

Let’s look at some solutions in practice