The document discusses the history and techniques for implementing real-time web applications, including Java Applets, Flash, XMLHttpRequest, Comet, Server-Sent Events, WebSockets, and Socket.io. It covers early techniques like hidden iframes and XHR polling that had flaws like lack of error handling. Long polling techniques like XHR long polling are described as an improvement. Implementation examples using Facebook, Node.js, and a PHP to Node.js integration are provided to illustrate real-world uses.

1. Behind the scenes of Real-Time
Notifications
Cakefest 2015.
New York, USA.
Guillermo Mansilla
@gmansilla

2. 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.

3. 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.

4. Comet: Implementations
• Hidden Iframe
• XHR Polling
• XHR Long Polling
• JSONP Long Polling

5. HTTP Protocol
Client Server
Request resource
Response

6. Hidden Iframe
This 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.

7. XHR Polling
This 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.

8. 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.)

9. XHR Long Polling
Unlike 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.

10. Client Server
Request
No
Immediate
response
Request (Any updates for me?)
Response
Event (i.e.
new updates)

11. Real-world Example

12. 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)

13. Facebook XHR-Long
Polling Implementation
Click on the request and then take a look at the “preview” tab

14. Facebook XHR-Long
Polling Implementation
After receiving a response a new request will be sent

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

17. Server-Sent Events
SSE 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.

18. Server-Sent Events
Client:
Server:

19. Server-Sent Events:
Custom Events
Server: Emitting a custom event with the name userlogon
Client: Acting upon receiving an event with the name userlogon

20. WebSockets
WebSockets 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

21. WebSockets
Establishing the connection:
Some Callbacks:

22. WebSockets
Sending data:
Receiving data:

23. 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/

24. Node.js for Real-time
applications
Why Node.js?
• Non-blocking I/O API.
• Event-driven.

25. Socket.io
Socket.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

26. Socket.io
Socket.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

27. Socket.io

28. PHP – Node.js Integration
PHP
Redis /
Memcached
Node.js
Session Data Session Data

29. 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.

30. Demo
Node.js app:
https://github.com/gmansilla/CakefestNodejs
CakePHP app:
https://github.com/gmansilla/CakefestSocket.io

31. 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.

33. Node.js…

34. Client