Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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 ...
A bit of history behind
real-time web
• 1995: Java Applets.
• 1996: Flash.
• 1999: ActiveX extension called XMLHTTP, later...
Comet: Implementations
• Hidden Iframe
• XHR Polling
• XHR Long Polling
• JSONP Long Polling
HTTP Protocol
Client Server
Request resource
Response
Hidden Iframe
This technique consists of having an Iframe receiving
JavaScript code to be executed in the browser as
event...
XHR Polling
This technique consists of making continuous requests
to server, the server would keep sending back an
empty r...
Client Server
Request (Any updates for me?)
Empty Response (No updates for you,
sorry.)
Request (Any updates for me?)
Empt...
XHR Long Polling
Unlike XHR Polling, the server won’t respond
immediately if there is no data to respond with.
In other wo...
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.
Not...
Facebook XHR-Long
Polling Implementation
Click 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 Events
SSE will let the users receive updates without explicitly
asking for them continuously as we do with XH...
Server-Sent Events
Client:
Server:
Server-Sent Events:
Custom Events
Server: Emitting a custom event with the name userlogon
Client: Acting upon receiving an...
WebSockets
WebSockets is an advanced technology that makes it
possible to open an interactive communication
session betwee...
WebSockets
Establishing the connection:
Some Callbacks:
WebSockets
Sending data:
Receiving data:
WebSockets: Server Side.
One PHP option is “Ratchet”
Ratchet is a loosely coupled PHP library providing
developers with to...
Node.js for Real-time
applications
Why Node.js?
• Non-blocking I/O API.
• Event-driven.
Socket.io
Socket.IO is a JavaScript library for realtime web
applications. It enables realtime, bi-directional
communicati...
Socket.io
Socket.IO primarily uses the WebSocket
protocol with polling as a fallback option,
while providing the same inte...
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...
Demo
Node.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...
Node.js…
Client
Behind the scenes of Real-Time Notifications
Behind the scenes of Real-Time Notifications
Upcoming SlideShare
Loading in …5
×

Behind the scenes of Real-Time Notifications

2,121 views

Published on

In this talk I would like to show how Real Time Apps work from the an architectural point of view, in order for me to show that, I plan to do a quick walk-through over important concepts such as:
The HTTP Protocol, XMLHttpRequest, XHR Polling, Long Polling, HTML5 and Web Sockets.

After explaining those concepts I plan to show an example on how to integrate a CakePHP app with Node.js and Socket.io in order to implement real time notifications.

The code used for this demo can be found here:
https://github.com/gmansilla/CakefestSocket.io
https://github.com/gmansilla/CakefestNodejs

Published in: Software
  • Be the first to comment

Behind the scenes of Real-Time Notifications

  1. 1. Behind the scenes of Real-Time Notifications Cakefest 2015. New York, USA. Guillermo Mansilla @gmansilla
  2. 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. 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. 4. Comet: Implementations • Hidden Iframe • XHR Polling • XHR Long Polling • JSONP Long Polling
  5. 5. HTTP Protocol Client Server Request resource Response
  6. 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. 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. 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. 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. 10. Client Server Request No Immediate response Request (Any updates for me?) Response Event (i.e. new updates)
  11. 11. Real-world Example
  12. 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. 13. Facebook XHR-Long Polling Implementation Click on the request and then take a look at the “preview” tab
  14. 14. Facebook XHR-Long Polling Implementation After receiving a response a new request will be sent
  15. 15. HTML5 • Server-Sent Events (SSE). • Web Sockets.
  16. 16. 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.
  17. 17. Server-Sent Events Client: Server:
  18. 18. Server-Sent Events: Custom Events Server: Emitting a custom event with the name userlogon Client: Acting upon receiving an event with the name userlogon
  19. 19. 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
  20. 20. WebSockets Establishing the connection: Some Callbacks:
  21. 21. WebSockets Sending data: Receiving data:
  22. 22. 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/
  23. 23. Node.js for Real-time applications Why Node.js? • Non-blocking I/O API. • Event-driven.
  24. 24. 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
  25. 25. 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
  26. 26. Socket.io
  27. 27. PHP – Node.js Integration PHP Redis / Memcached Node.js Session Data Session Data
  28. 28. 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.
  29. 29. Demo Node.js app: https://github.com/gmansilla/CakefestNodejs CakePHP app: https://github.com/gmansilla/CakefestSocket.io
  30. 30. 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.
  31. 31. Node.js…
  32. 32. Client

×