Making WordPress Real-Time

Making WordPress Real-Time Tony Kovanen

What is real-time?

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

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)

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-Modiﬁed: 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 <html> <head> <title>An Example Page</title> </head> <body> Hello World, this is a very simple HTML document. </body> </html>

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

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

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

Food ready?

Food ready? Food ready?

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

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

Client Server Long-lived connection WebSocket

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

Socket.IO // note, io(<port>) 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'); }); });

Socket.IO <script src="/socket.io/socket.io.js"></script> <script> 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' }); }); </script>

Socket.IO Server WordPress site Redis Client

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

Let’s look at some solutions in practice

Making WordPress Real-Time

Making WordPress Real-Time

Tony Kovanen

Other Decks in Programming

Featured

Transcript