Behind the scenes of Real-Time Notifications

Cakefest 2015.New York, USA.

Guillermo Mansilla@gmansilla

What is real-time web?• The real-time web is a network web using

technologies and practices that enable users to receive information as soon as it is published by its authors, rather than requiring that they or their software check a source periodically for updates.

Wikipedia.

A bit of history behind real-time web

• 1995: Java Applets.• 1996: Flash.• 1999: ActiveX extension called XMLHTTP, later

adapted by Mozilla, Safari and Opera as “XMLHttpRequest” (XHR).

• 2006: Comet.

Comet: Implementations

• Hidden Iframe• XHR Polling• XHR Long Polling• JSONP Long Polling

HTTP ProtocolClient Server

Request resource

Response

Hidden IframeThis technique consists of having an Iframe receiving JavaScript code to be executed in the browser as events occur.

Two major flaws: • The lack of a reliable way to handle errors.• Impossible to track the state of the request

calling process.

XHR PollingThis technique consists of making continuous requests to server, the server would keep sending back an empty response until there is something to be sent.

One major flaw: Unnecessary Requests can cause overload on the server side.

Client Server

Request (Any updates for me?)

Empty Response (No updates for you, sorry.)

Request (Any updates for me?)

Empty Response (No updates for you, sorry.)

New updates!

Request (Any updates for me?)

Response (Yes, here are your updates.)

XHR Long PollingUnlike XHR Polling, the server won’t respond immediately if there is no data to respond with. In other words, the request will be kept open for a while, once the server has something to be sent back the connection is closed and the client will emit a new request.

Client Server

Request

No Immediate response

Request (Any updates for me?)

Response

Event (i.e. new updates)

Real-world Example

Facebook XHR-Long Polling Implementation

After loading facebook, open the network tab and take a look at the requests.

Notice how there is no immediate response... (hence the “Pending” status)

Facebook XHR-Long Polling ImplementationClick on the request and then take a look at the “preview” tab

Facebook XHR-Long Polling Implementation

After receiving a response a new request will be sent

HTML5 • Server-Sent Events (SSE).• Web Sockets.

Server-Sent EventsSSE will let the users receive updates without explicitly asking for them continuously as we do with XHR long polling.

How?With a Javascript API that will let us create a stream over which the server can send events to the client.

Server-Sent EventsClient:

Server:

Server-Sent Events: Custom Events

Server: Emitting a custom event with the name userlogon

Client: Acting upon receiving an event with the name userlogon

WebSocketsWebSockets is an advanced technology that makes it possible to open an interactive communication session between the user’s browser and server. With this API, you can send messages to a server and receive event-driven responses without having to poll the server for a reply.

Mozilla Developer Network

WebSocketsEstablishing the connection:

Some Callbacks:

WebSocketsSending data:

Receiving data:

WebSockets: Server Side.

One PHP option is “Ratchet”

Ratchet is a loosely coupled PHP library providing developers with tools to create real time, bi-directional applications between clients and servers over WebSockets. 

http://socketo.me/

Node.js for Real-time applications

Why Node.js?

• Non-blocking I/O API.

• Event-driven.

Socket.ioSocket.IO is a JavaScript library for realtime web applications. It enables realtime, bi-directional communication between web clients and server. It has two parts: a client-side library that runs in the browser, and a server-side library for node.js. Both components have a nearly identical API. Like node.js, it is event-driven.

Wikipedia

Socket.ioSocket.IO primarily uses the WebSocket protocol with polling as a fallback option, while providing the same interface. Although it can be used as simply a wrapper for WebSocket, it provides many more features, including broadcasting to multiple sockets, storing data associated with each client, and asynchronous I/O.

Wikipedia

Socket.io

PHP – Node.js Integration

PHP

Redis / Memcached

Node.js

Session Data

Session Data

Communication between PHP and Node.js

There are multiple ways of integrating PHP and Node.js. The following demo is one of the simplest one.

We will have the client to initiate a connection with socket.io to a node.js server, the client will wait for node.js to emit events and act upon them.

The PHP application will send messages to Node.js so that it can emit the proper events to the client.

DemoNode.js app: https://github.com/gmansilla/CakefestNodejs

CakePHP app: https://github.com/gmansilla/CakefestSocket.io

On the CakePHP side…

We will use an Event Listener to send a message to the Node.js when a particular event occurs.

I used the Blog Tutorial from the Cookbook as an starting point.

We’ll send a message to Node.js whenever an Article|Comment is added/edited.

Node.js…

Client