Behind the scenes of Real-Time Notifications
•Télécharger en tant que PPTX, PDF•
4 j'aime•2,879 vues
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.
Recommandé
Contenu connexe
Tendances
Tendances (20)
Similaire à Behind the scenes of Real-Time Notifications
Similaire à Behind the scenes of Real-Time Notifications (20)
Dernier
Dernier (20)
Behind the scenes of Real-Time Notifications
- 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)
- 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.
- 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:
- 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.
- 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
Notes de l'éditeur
- 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. Difference from real-time computing The real-time web is fundamentally different from real-time computing since there is no knowing when, or if, a response will be received. The information types transmitted this way are often short messages, status updates, news alerts, or links to longer documents. The content is often "soft" in that it is based on the social web—people's opinions, attitudes, thoughts, and interests—as opposed to hard news or facts.
- A Java applet is a small application which is written in Java and delivered to users in the form of bytecode. The user launches the Java applet from a web page, and the applet is then executed within a Java Virtual Machine (JVM) in a process separate from the web browser itself. Flash, as we all know, went on to rule the Web as the most widely available platform for creating animations, games, video players, and everything interactive, for the major part of the next decade. In 1999, Microsoft used its iframe technology and JavaScript to update news and stock quotes on Internet Explorer's default home page. This XMLHTTP component was originally meant to load XML data in the page asynchronously, using JavaScript. It was soon adopted by Mozilla, Safari, and Opera, as XMLHttpRequest (or XHR, for short). Comet was not one single approach. It introduced multiple mechanisms to give the feeling of data being pushed from the server to the client. These included Hidden iframe, XHR polling, XHR long polling, and Script tag long polling (or, JSONP long polling).
- Hidden Iframe has two major flaws: The lack of a reliable way to handle errors Impossibility of tracking the state of the request calling process.