Google's GMail service does it because it integrates Google Talk -- and Etherpad (now typewith.me) made famous the system which is used by, for example, Google Wave. All such systems update the page the user is working on effectively instantly when other users make changes to the page. It's easy to tell the server that a change has happened when it has happened, but it's more difficult to get clients to update themselves.
How does this kind of realtime editing work? Does it simply have the client ping the server tens of times per second for updates?
You can use Comet.
Asynchronous JavaScript and XML or AJAX
With Ajax, web applications can retrieve data from the server asynchronously in the background without interfering with the display and behavior of the existing page. The use of Ajax techniques has led to an increase in interactive or dynamic interfaces on web pages. Data is usually retrieved using the XMLHttpRequest object. Despite the name, the use of XML is not actually required, nor do the requests need to be asynchronous.
Just in case someone falls on that question.
Comet was an old way of doing real-time updates, now it has been made obsolete by technologies like websockets
I suggest using AJAX & jQuery for Asynchronous JS
http://api.jquery.com/category/ajax/
There are many options but basically i'd recommend you look into XMPP. i don't think i'm good enough to boil it down correctly, so i'll let a wiki talk for me
In fact, google voice and video uses it for these systems.
About AJAX, i think it's a communication channel, not a platform or a protocol for multiple person exchange. You could also answer "Use xml over http!" and still be at the same point :)
AFAIK, they use some form of AJAX. However, I would recommend you use the AJAX libraries via jQuery. AJAX is simplified a lot if you use jQuery to do it.
Javascript / Ajax allows you to send code to be executed on the client-side (that means, by the browser).
Now if you e.g. define a loop which checks for new messages on server every 5 seconds, you can update the web-page "in-real-time" (plus the time for the server to process the req and send response), or similar. A practical example would be the RoR Prototype periodically_call_remote Ajax helper.
Hope this helps!
As everyone says.. AJAX.
The client keeps on asking the server, after say 30 secs if there is anything new for it to do. Also, you can set the timeout value on an ajax request. keep the time out a bit high.. and the server replies whenever there is something new.
There is no way that the server can other wise ask the client to load some data.
If you are thinking of implementing something on the same lines, look up strophe.js which is an XMPP js-library
It can be done via POlling and Push design.
Polling is a client side information pulling technique after a given timeperiod.
Push technique involves the server to push the new updates to the client using websockets or new websocket like technology for example pusher.
Article
Related
I'm developing a web application with Symfony2. I need to create a push notifications sysmte (like Facebook). When an user publish something, I need some of another users receive a notification.
I saw that Node.js it's the easiest manner to do this. But, I did some simple examples and all works fine, but I don't know how can I integrate this node.js application with my Symfony2 application, or really with a PHP application.
Anybody can help me?
Thanks in advance!
Please note that you've not given enough details, so I will respond as a front-end developer and not as a mobile developer
Integrating NodeJS and PHP (in general) is not a good way since you need to launch both servers separatly, create the websocket server in JS while your application is in PHP and finally create a request (GET or POST) from your PHP to you JS server. Well, a big mess, so I'll expose my solution here under.
Quick insight for mobile apps. Well, technically, there's no easy way. You can use the Push "protocol" (http://www.wikiwand.com/en/Push_technology) with NotificationPusher (https://github.com/Ph3nol/NotificationPusher). I didn't used it before so I can't help you with it.
In general.
Most of the time when people thinks of Push, long polling will do the trick. For starters it means that the request is made client-side and the server don't send data & close connection until there's new data.
How do you implement this ?!?
Basically, you change the max_execution_time using ini_set or set_time_limit to a very long time for the current script and launch a loop (like a do..while) with a sleep and the check to your data inside. From your Javascript just make an Ajax call, for example with jquery: $.get. Just remember to remove the timeout and stay in asynchronous mode.
The only drawback of this solution is that you will always have a connection opened to your server which will consume a bit more of battery on a mobile device. If you have multiple types of data to receive do not hesitate to merge the calls and publish a type in your response data, since most of the browsers allows only 2 or 3 simultaneous connections to the same server.
I sounds like your describing WebSockets.
Take a look at Socket.io, its a module for node.js.
Also there is a example at GitHub https://github.com/Automattic/socket.io/tree/master/examples/chat
Interesting files for you should be the index.js and the public/main.js.
You can see the example live at http://socket.io/demos/chat/
I want to create a web application that displays data from a public api. I will use d3 (a javascript data-visualization library). I want to retrieve data from the api every ten minutes, and update my page (say it is traffic, or something). I have not built many web applications, how do I get the updates?
Should the js on the client side use a timer to request updates from the server side of my application (perhaps the application is written in Rails or node.js). The server then makes the api call and sends a response asynchronously? Is this called a socket? I have read that HTML5 provides sockets.
Or, perhaps an AJAX request?
Or, does the server side of my application create a timer, make the api call, and then "push" updates to the view. This seems wrong to me, there could be other views in this application, and the server shouldn't have to keep track of which view is active.
Is there a standard pattern for this type of web application? Any examples or tutorials greatly appreciated.
An AJAX request (XMLHttpRequest) is probably the way to go.
I have a very simple example of an XMLHttpRequest (with Java as the backend) here: https://stackoverflow.com/a/18028943/1468130
You could recreate a backend to receive HTTP GET requests in any other server-side language. Just echo back whatever data you retrieved, and xmlhttp.onload() will catch it.
Depending on how complex your data is, you may want to find a JSON library for your server-side language of choice, and serialize your data to JSON before echoing it back to your JS. Then you can use JavaScript's JSON.parse() method to convert your server data to an object that can easily be used by the client script.
If you are using jQuery, it handles AJAX very smoothly, and using $.ajax() would probably be easier than plain-old XMLHttpRequest.
http://api.jquery.com/jQuery.ajax/
(There are examples throughout this page, mostly-concentrated at the bottom.)
It really annoys me how complicated so many of the AJAX tutorials are. At least with jQuery, it's pretty easy.
Basically, you just need to ask a script for something (initiate the request, send url parameters), and wait for the script to give you something back (trigger your onload() or jqxhr.done() functions, supplying those functions with a data parameter).
For your other questions:
Use JavaScript's setTimeout() or setInterval() to initiate an AJAX request every 600000 milliseconds. In the request's onload callback, handle your data and update the page appropriately.
The response will be asynchronous.
This isn't a socket.
"Pushing" probably isn't the way to go in this case.
If I understand correctly and this API is external, then your problem can be divided into two separate sub-problems:
1) Updating data at the server. Server should download data once per N minutes. So, it should not be connected to customers' AJAX calls. If two customers will come to the website at the same time, your server will make two API call, what is not correct.
Actually, you should create a CRON job at the server that will call API and store its' result at the server. In this case your server will always make one call at a time and have quite a fresh information cached.
2) Updating data at clients. If data at customers' browsers should be updated without refreshing the page, then you should use some sort of Ajax. It can make a request to your server once per X minutes to get a fresh data or use so-called long-polling.
I think the most effective way to implement real time Web application is to use Web socket to push changes from the server rather than polling from the client side. This way users can see changes instantaneously once server notify that there is new data available. You can read more on the similar post.
I have tried using nodejs package called socket.io to make a real time virtual classroom. It works quite well for me.
I put together an AJAX chat a while back ASP.NET MVC and jQuery. The javascript would hit the server about every 7 seconds to check for new messages. Obviously this was horrible on performance as the chat grew and included more and more users. The site traffic grew exponentially with so many requests going on. A user could leave the computer on all day and not even be there and they would still be making hits every 7 seconds.
Is there a better way to do this? I have heard of something called "push" but I haven't really been able to wrap my head around it. I think I just need pointed in the right direction.
1.) What is the best way to develop an AJAX chat and have it be scalable?
2.) What is push and how would I just that with jQuery?
1.) What is the best way to develop an AJAX chat and have it be scalable?
I agree with #freakish about the complexity and potential lack of scaling of IIS.
However, there is a relatively new Microsoft option in the works called SignalR which could become a core part of ASP.NET. More details in this related SO Question:
AJAX Comet - Is there any solution Microsoft is working on or supports to allow it to be scalable?
2.) What is push and how would I just that with jQuery?
Partially answered elsewhere, but it's a long-held persistent connection between the server and the client which means the server can instantly 'push' data to the client when it has new data available.
jQuery does support making AJAX requests but the core library doesn't support expose ways of doing HTTP Long-Polling or HTTP Streaming. More information in this SO answer to 'Long Polling/HTTP Streaming General Questions'.
Server push is a technology that allows the server to push data back to the client without forcing client to make many requests (like every 7 seconds). It is not really a matter of javascript but rather good server scripting. The upcoming HTML5 will make it simple due to server-sent events and/or WebSockets. This will be a true TCP connection between different machines.
But if you intend to make a webpage compatible with older browsers, then the most common technique is the long polling. The client sends request to the server and the server does not respond to it until it has new data. If it does then the response is made and the client immediatly after receiving data calls the server with new request. In practice however this requires the server to be well-written (for example it has to maintain thousands of idle requests at the same time) and can become a rather big challenge for developers.
I hope this helps. :) Good luck!
The technique you should use is the real-time persistent long running connections over a web page using WebSockets. You can use this library.
Node.js is becoming quite popular to build something like this and supports socket connections so you could push the data out only when there is a new message. But that would be learning something completely new.
Another nice potential would be to use MVC's OutputCacheAttribute and use the SQL dependency option so your AJAX page could be cached and would only be a new request when a new chat message appears. Also you would want your controller to be an Asynchronous controller to help reduce the load on IIS.
Enjoy, optimization is always fun and very time consuming!
What is needed to implement a feature that emulates Twitter and Facebook in allowing one to post status posts and seeing responses to these posts coming in automatically?
The term you're looking for is called "Comet" and there are different ways of acheiving it, each with many implementations, frameworks and code tutorials. Googling for "Comet" and the software you plan on using will be a good start.
Edit:
A newer technology to perform this style of communication is "WebSocket". It causes an HTTP connection (say as made by an AJAX request) to behave less like an HTTP connection (where the client sends data to the server, and the server can only return data in response to the send) and more like a normal TCP connection (where both sides can send and receive data at any time).
I would use a combination of jQuery $.ajax command along with a JavaScript setTimeout() function to poll a database every X seconds. That way you wouldn't have to do a screen refresh.
For posterity's sake, new visitors to this question may want to look into the WebSocket API that was proposed as part of HTML5. It's got pretty solid browser support at this point, even going back to IE 10, so it should be safe enough to use in modern applications.
I'm trying to reverse engineer how facebook handles their notifications, where when you get a message you get instantly notified via the browser.
I've fiddled with it for a little bit and realized that there is always a pending GET request "listening" if you will to some sort of update from the server. This appears to be some sort of observer pattern. I was just wondering if this pattern was documented somewhere.
The technique is actually called Long Polling. This is one of the popular Comet techniques to get around the limitations of traditional polling.
You may want to check out the following Stack Overflow post for a very simple example:
Simple “Long Polling” example code?
UPDATE:
In addition to the above, I suggest that you check out the accepted answer to the following Stack Overflow post for a detailed description of the technique:
How does facebook, gmail send the real time notification?
The technique is called Comet, aka 'server push'
There are currently 2 main ways of implementing comet.
1) As Daniel mentioned, long-polling, where you can use ajax to leave a hanging request to the browser that doesn't send the response back until the server decides to (whether it be based on someone else's actions or another server event).
2) The second approach, used by Google, is streaming. This involvs using ajax to leave a hanging request, but the response is never sent back to you, ever. Instead, the server updates bits of data and you use javascript to monitor changes, and fire events based on new data being pushed in. What happens is you get one very long continuous stream of data flowing in on a document that never closes, taking new data as it comes in.
HTML5 has a specification for a simpler way to do this with Web-Sockets. In the future, this type of live web-app will become commonplace as Web-Sockets are easy to use, but it is not supported on all browsers yet.
If you want to build a Comet site for production, you'll need to use a non-blocking I/O async server like one of the following.
http://www.tornadoweb.org/ - python
http://nodejs.org/ - server side javascript
-- or google for comet servers.
You'll need to know how to program for comet type apps on the server-side, as the javascript for Comet is pretty trivial, just your normal ajax calls with a couple event handlers.