Develop Reference

Real time client information synchronization, best practices and advice

I am writing a PHP backend, JS/Jquery front end application that will allow users to "communicate" in near real time. That is the hope at least, my question is what is my best course of action? Am I best to use WebSockets to send data between the server and client or would use AJAX and some sort of timer (x amount of seconds) be better. My worry with the AJAX way is that it may be taxing on the server to have 10+ clients all asking for data every 15-30 seconds. I need it to be near real-time and so 5 minutes is not really realistic.
An example of what I am trying to do would be if I had 5 users all on a page and user 1 updates their status, I would want users 2,3,4, and 5 to see the update as fast as possible without having to refresh.
I am mixed on what I think is best and I don't want to start doing it one way and find out it is insecure or terrible after getting halfway done. What is my best route with an application like this?

Here's a list of popular possible solutions:
Short polling (what you're referring to in AJAX
Long Polling (AJAX too, but not too many requests)
Websockets
WebRTC
So, for short polling as you've said it consumes lots of resources so let's remove that from the list.
as for long polling, its idea is that a request is send to server and the server doesn't respond unless a new event has happened (keeps the request) but its rarely used in modern development. so If you're going to work with other developers its kind of bad decision.
for WebRTC, browser compatibility is not that great and still a draft in W3C.
Thus, you're left out with WebSockets, and yes they consume ram but not CPU. ram is much cheaper (and it doesn't consume that much too).
As for security they can be considered equal (except for WebRTC which is better because it is actually P2P Communication)
Side note: don't overthink it :)
Here's some resources that can help you:
https://webrtc.org/
https://github.com/walkor/phpsocket.io //Socket library for PHP similar to Socket.io
https://socket.io
What are the realtime communication protocols available for the web? List of the protocols
https://codeburst.io/polling-vs-sse-vs-websocket-how-to-choose-the-right-one-1859e4e13bd9 great article for polling, websockets & covers SSE too

there is one way to make the RTC, RealTime App, Just Use the Socket.io "WebSocket " for signaling and before that take a full view of these webPages:
https://bloggeek.me/
https://www.html5rocks.com/en/tutorials/webrtc
https://w3c.github.io/webrtc-pc/#rtcsignalingstate-enum
https://www.w3.org/TR/mediacapture-streams/#legacy-interface-extensions
and i start to development this technology with this book enter link description here it will open your view of RTC usage and All Details.

My Understanding of HTTP Polling, Long Polling, HTTP Streaming and WebSockets

I have read many posts on SO and the web regarding the keywords in my question title and learned a lot from them. Some of the questions I read are related to specific implementation challenges while others focus on general concepts. I just want to make sure I understood all of the concepts and the reasoning why technology X was invented over technology Y and so on. So here goes:
Http Polling: Basically AJAX, using XmlHttpRequest.
Http Long Polling: AJAX but the server holds on to the response unless the server has an update, as soon as the server has an update, it sends it and then the client can send another request. Disadvantage is the additional header data that needs to be sent back and forth causing additional overhead.
Http Streaming: Similar to long polling but the server responds with a header with "Transfer Encoding: chunked" and hence we do not need to initiate a new request every time the server sends some data (and hence save the additional header overhead). The drawback here is that we have to "understand" and figure out the structure of the data to distinguish between multiple chunks sent by the server.
Java Applet, Flash, Silverlight: They provide the ability to connect to socket servers over tcp/ip but since they are plugins, developers don't want to depend on them.
WebSockets: they are the new API which tries to address the short comings of above methods in the following manner:
The only advantage of WebSockets over plugins like Java Applets, Flash or Silverlight is that WebSockets are natively built into browsers and does not rely on plugins.
The only advantage of WebSockets over http streaming is that you don't have to make an effort to "understand" and parse the data received.
The only advantage of WebSockets over Long Polling is that of elimination of extra headers size & opening and closing of socket connection for request.
Are there any other significant differences that I am missing? I'm sorry if I am re-asking or combining many of the questions already on SO into a single question, but I just want to make perfect sense out of all the info that is out there on SO and the web regarding these concepts.
Thanks!

There are more differences than the ones you have identified.
Duplex/directional:
Uni-directional: HTTP poll, long poll, streaming.
Bi-direcitonal: WebSockets, plugin networking
In order of increasing latency (approximate):
WebSockets
Plugin networking
HTTP streaming
HTTP long-poll
HTTP polling
CORS (cross-origin support):
WebSockets: yes
Plugin networking: Flash via policy request (not sure about others)
HTTP * (some recent support)
Native binary data (typed arrays, blobs):
WebSockets: yes
Plugin networking: not with Flash (requires URL encoding across ExternalInterface)
HTTP *: recent proposal to enable binary type support
Bandwidth in decreasing efficiency:
Plugin networking: Flash sockets are raw except for initial policy request
WebSockets: connection setup handshake and a few bytes per frame
HTTP streaming (re-use of server connection)
HTTP long-poll: connection for every message
HTTP poll: connection for every message + no data messages
Mobile device support:
WebSocket: iOS 4.2 and up. Some Android via Flash emulation or using Firefox for Android or Google Chrome for Android which both provide native WebSocket support.
Plugin networking: some Android. Not on iOS
HTTP *: mostly yes
Javascript usage complexity (from simplest to most complicated). Admittedly complexity measures are somewhat subjective.
WebSockets
HTTP poll
Plugin networking
HTTP long poll, streaming
Also note that there is a W3C proposal for standardizing HTTP streaming called Server-Sent Events. It is currently fairly early in it's evolution and is designed to provide a standard Javascript API with comparable simplicity to WebSockets.

Some great answers from others that cover a lot of ground. Here's a little bit extra.
The only advantage of WebSockets over plugins like Java Applets, Flash or Silverlight is that WebSockets are natively built into browsers and does not rely on plugins.
If by this you mean that you can use Java Applets, Flash, or Silverlight to establish a socket connection, then yes, that is possible. However you don't see that deployed in the real world too often because of the restrictions.
For example, intermediaries can and do shutdown that traffic. The WebSocket standard was designed to be compatible with existing HTTP infrastructure and so is far less prone to being interfered with by intermediaries like firewalls and proxies.
Moreover, WebSocket can use port 80 and 443 without requiring dedicated ports, again thanks to the protocol design to be as compatible as possible with existing HTTP infrastructure.
Those socket alternatives (Java, Flash, and Silverlight) are difficult to use securely in a cross-origin architecture. Thus people often attempting to use them cross-origin will tolerate the insecurities rather than go to the effort of doing it securely.
They can also require additional "non-standard" ports to be opened (something administrators are loathe to do) or policy files that need to be managed.
In short, using Java, Flash, or Silverlight for socket connectivity is problematic enough that you don't see it deployed in serious architectures too often. Flash and Java have had this capability for probably at least 10 years, and yet it's not prevalent.
The WebSocket standard was able to start with a fresh approach, bearing those restrictions in mind, and hopefully having learned some lessons from them.
Some WebSocket implementations use Flash (or possibly Silverlight and/or Java) as their fallback when WebSocket connectivity cannot be established (such as when running in an old browser or when an intermediary interferes).
While some kind of fallback strategy for those situations is smart, even necessary, most of those that use Flash et al will suffer from the drawbacks described above. It doesn't have to be that way -- there are workarounds to achieve secure cross-origin capable connections using Flash, Silverlight, etc -- but most implementations won't do that because it's not easy.
For example, if you rely on WebSocket for a cross-origin connection, that will work fine. But if you then run in an old browser or a firewall/proxy interfered and rely on Flash, say, as your fallback, you will find it difficult to do that same cross-origin connection. Unless you don't care about security, of course.
That means it's difficult have a single unified architecture that works for native and non-native connections, unless you're prepared to put in quite a bit of work or go with a framework that has done it well. In an ideal architecture, you wouldn't notice if the connections were native or not; your security settings would work in both cases; your clustering settings would still work; your capacity planning would still hold; and so on.
The only advantage of WebSockets over http streaming is that you don't have to make an effort to "understand" and parse the data received.
It's not as simple as opening up an HTTP stream and sitting back as your data flows for minutes, hours, or longer. Different clients behave differently and you have to manage that. For example some clients will buffer up the data and not release it to the application until some threshold is met. Even worse, some won't pass the data to the application until the connection is closed.
So if you're sending multiple messages down to the client, it's possible that the client application won't receive the data until 50 messages worth of data has been received, for example. That's not too real-time.
While HTTP streaming can be a viable alternative when WebSocket is not available, it is not a panacea. It needs a good understanding to work in a robust way out in the badlands of the Web in real-world conditions.
Are there any other significant differences that I am missing?
There is one other thing that noone has mentioned yet, so I'll bring it up.
The WebSocket protocol was designed to a be a transport layer for higher-level protocols. While you can send JSON messages or what-not directly over a WebSocket connection, it can also carry standard or custom protocols.
For example, you could do AMQP or XMPP over WebSocket, as people have already done. So a client could receive messages from an AMQP broker as if it were connected directly to the broker itself (and in some cases it is).
Or if you have an existing server with some custom protocol, you can transport that over WebSocket, thus extending that back-end server to the Web. Often an existing application that has been locked in the enterprise can broaden it's reach using WebSocket, without having to change any of the back-end infrastructure.
(Naturally, you'd want to be able to do all that securely so check with the vendor or WebSocket provider.)
Some people have referred to WebSocket as TCP for the Web. Because just like TCP transports higher-level protocols, so does WebSocket, but in a way that's compatible with Web infrastructure.
So while sending JSON (or whatever) messages directly over WebSocket is always possible, one should also consider existing protocols. Because for many things you want to do, there's probably a protocol that's already been thought of to do it.
I'm sorry if I am re-asking or combining many of the questions already on SO into a single question, but I just want to make perfect sense out of all the info that is out there on SO and the web regarding these concepts.
This was a great question, and the answers have all been very informative!

If I may ask one additional thing: I came across in an article somewhere that says that http streaming may also be cached by proxies while websockets are not. what does that mean?
(StackOverflow limits the size of comment responses, so I've had to answer here rather than inline.)
That's a good point. To understand this, think about a traditional HTTP scenario... Imagine a browser opened a web page, so it requests http://example.com, say. The server responds with HTTP that contains the HTML for the page. Then the browser sees that there are resources in the page, so it starts requesting the CSS files, JavaScript files, and images of course. They are all static files that will be the same for all clients requesting them.
Some proxies will cache static resources so that subsequent requests from other clients can get those static resources from the proxy, rather than having to go all the way back to the central web server to get them. This is caching, and it's a great strategy to offload requests and processing from your central services.
So client #1 requests http://example.com/images/logo.gif, say. That request goes through the proxy all the way to the central web server, which serves up logo.gif. As logo.gif passes through the proxy, the proxy will save that image and associate it with the address http://example.com/images/logo.gif.
When client #2 comes along and also requests http://example.com/images/logo.gif, the proxy can return the image and no communication is required back to the web server in the center. This gives a faster response to the end user, which is always great, but it also means that there is less load on the center. That can translate to reduced hardware costs, reduced networking costs, etc. So it's a good thing.
The problem arises when the logo.gif is updated on the web server. The proxy will continue to serve the old image unaware that there is a new image. This leads to a whole thing around expiry so that the proxy will only cache the image for a short time before it "expires" and the next request goes through the proxy to the web server, which then refreshes the proxy's cache. There are also more advanced solutions where a central server can push out to known caches, and so on, and things can get pretty sophisticated.
How does this tie in to your question?
You asked about HTTP streaming where the server is streaming HTTP to a client. But streaming HTTP is just like regular HTTP except you don't stop sending data. If a web server serves an image, it sends HTTP to the client that eventually ends: you've sent the whole image. And if you want to send data, it's exactly the same, but the server just sends for a really long time (like it's a massively gigantic image, say) or even never finishes.
From the proxy's point of view, it cannot distinguish between HTTP for a static resource like an image, or data from HTTP streaming. In both of those cases, the client made a request of the server. The proxy remembered that request and also the response. The next time that request comes in, the proxy serves up the same response.
So if your client made a request for stock prices, say, and got a response, then the next client may make the same request and get the cached data. Probably not what you want! If you request stock prices you want the latest data, right?
So it's a problem.
There are tricks and workarounds to handle problems like that, it is true. Obviously you can get HTTP streaming to work since it's it's in use today. It's all transparent to the end user, but the people who develop and maintain those architectures have to jump through hoops and pay a price. It results in over-complicated architectures, which means more maintenance, more hardware, more complexity, more cost. It also means developers often have to care about something they shouldn't have to when they should just be focussing on the application, GUI, and business logic -- they shouldn't have to be concerned about the underlying communication.

HTTP limits the number of connections a client can have with a server to 2 (although this can be mitigated by using subdomains) and IE has been known to enforce this eagerly. Firefox and Chrome allow more (although I can't remember of the top of my head exactly how many). This might not seem like a huge issue but if you are using 1 connection constantly for real-time updates, all other requests have to bottleneck through the other HTTP connection. And there is the matter of having more open connections from clients puts more load on the server.
WebSockets are a TCP-based protocol and as such don't suffer from this HTTP-level connection limit (but, of course, browser support is not uniform).

What's the best way for keeping the client browser informed about events (like a new chat message)?

The common way, I think, is making a periodic "ping" to the server, but I don't like how it looks too much like
"Is there anything new? - No"
"Is there anything new? - No"
"Is there anything new? - No"
"Is there anything new? - No"
"Is there anyt..."
I've seen another approach where client ask for news and server "retains" the request (with a sleep loop, for example) until there is anything new. That's cool, but I'd really like to hear about another options.

Unfortunately there isn't really any cross browser mechanism for pushing data from the server to the browser. For example, back in 1995 Netscape released a server push technology that uses a special content type -- multipart/x-mixed-replace but from what I understand IE doesn't support it. WebSockets are a new one but support is just coming out now.
So you're forced to use the tools at hand, which means the client needs to ask the server if there's any new data -- polling. Polling comes in 2 varieties: polling on an interval, and long polling. When you poll on an interval you simply make a request to the server every n seconds asking for data. This is fairly chatty (pardon the pun) if there is no new data to return. This is what people think of when you say "polling."
The other option, long polling, is similar in that the client makes a request to the server to see if there's new data. But in this case the server doesn't send a response until it has something to say. In this case the client is left hanging for a response for an undetermined amount of time. When the client eventually gets its response it parses the response and immediately makes another request which will stay hanging until there's data.
Both of these polling approaches consume a lot of HTTP overhead, but if you want to use XHRs this is about the only way to do it.
A word of warning about long polling: When working with long polling it's important to ensure that all of your XHRs are running asynchronously otherwise you'll see the browser's UI thread lock up.
If you're not interested in using AJAX then you can always use the tried and testing IFRAME-that-never-finishes-loading. In this case you have an IFRAME with the chat log and another IFRAME that contains your message area. In this case the server simply never closes the connection for the IFRAME that contains the chat log. Instead, it just keeps pushing chat messages into the body.

WebSockets can be helpful if you're okay if some browsers aren't able to use it.
If you want to it in JavaScript, there is no alternative to polling in intervals.

What you need is ajax push or reverse ajax.
There are lots of ajax based frameworks who support push. In Java for example nextapp echo2, or you can give a shot to ape project as well.

Options
Long-Polling: keep the request open until data arrives. Receive data and close connection. Open a new connection to receive data again. For this to scale you need to have non-blocking IO)for all communication). This approach is the simplest to implement. You could even use blocking I/O if your server does not have a lot of concurrency.
HTTP-Streaming: Do not close the connection when receiving data. For this to work cross-browser you have to do some "hacking" to make it work in all browsers.
XMPP over BOSH For this you use your XMPP server and sprinkle it with some BOSH(XMPP over HTTP). Prosody for example is an easy XMPP server which supports BOSH. Next you could write the client-side with the excellent strophe.js library.
Websockets: I guess this will be the future, but right now the browser support is not sufficient to really use it for all browsers.
Server-Sent Events: Also pretty cool html5 feature. This protocol is in my opinion simpler then websockets. This also is not widely supported by all the majar browsers yet.
Flash: You could also communicate via flash if you like. The browser has to have flash plugin installed, but that will be the case most of the times.
What is the best way?
In my opinion long-polling is the easiest/best way to implement event-based messaging over HTTP. it definitely is not the fastest alternative, but every major browser supports it and the easiest to implement.
I think Websockets will be the best technology(future), but is not widely adopted in the browsers yet.
All though all the above technologies are pretty good. They all have there pros and cons.

If this is done with JavaScript, there really isn't any other way than pinging the server. You're only option is to heavily optimize the request, to avoid uselessly asking the "question".

AJAX and Client-Server Architecture with JavaScript

I have to program websites, but I rather don't like the static HTML nature. I prefer more of a client-server architecture.
Now I've figured, that with XMLhttp, you can basically dynamically update your page and send/request for information/action to/from a server. So this would basically cover the client area.
But to complete a client-server architecture, it is necessary for the server to send/request information, too, without being queried.
Is there any way, for example for a chat server, to send back a received message to all clients (the clients use a web browser) without that the clients have to query in a fixed interval? I want to implement that one can see while you type something in.

There are several different ways to accomplish this. Some of them are already answered here, but I wanted to include a few more as well as my thoughts on them.
1. Polling
Frequent requests are made to the server to check for new info. This is the worst way to do this, but probably the easiest. If your site will have a low number of users, it might be worth doing it this way.
This can be accomplished by using setInterval(myFunction, n) in javascript to send XMLHttpRequests to the server every n milliseconds. Then, on the server, you respond to this with your new info, when you have it, or some message that implies no new info.
2. Long Polling
When the page is loaded, it makes a request to the server for new info. The server holds the connection open until there is something to send back. This method reduces the amount of network traffic used, but increases the resources used on the server. You can use this for a small number of users, but it doesn't scale very well.
The easiest way to do this is to have the page that handles the AJAX request simply wait for new information to be available, then respond. This can tie up a lot connections on your server. So, use with care.
3. COMET
COMET is basically long polling, but the server is setup properly for it. It knows that these connections aren't "real" and it uses less resources to handle them. This is a great solution for this problem, but it requires that the server is explicitly setup for this purpose. There are COMET servers and COMET addins for other popular servers, but it will require some setup and sometimes some money.
Implementing this on .NET isn't the easiest thing in the world. You can pay for solutions, try to find someone else's code that does something similar, or try to write it yourself. I've not found any decent free solutions for this. If someone else has, please comment.
4. RIA
Another solution would be to include Flash, Silverlight, or Java Applet on your page. People often do this by using a 1x1 object so that they can use Flash or Silverlight to talk to the server. If you don't mind adding the dependency, this is a decent solution. If you already know Silverlight or Flash, it could be relatively simple to implement.
You can find tutorials on the internet for each of these options.
5. Web Sockets
If you are on the cutting edge, you can look into Web Sockets. It's only available in the latest builds of modern browsers. It was part of HTML5, but it might be its own spec now. Regardless, it means that older browsers won't be able to handle it. But, if you don't mind limiting yourself to the latest of browsers, you can use this amazing feature.
I believe that Chromium is the only browser that currently supports it. However, there is work being done to implement this in Firefox and WebKit.
I'll spare you the controversy and simply say that this does exactly what you want it to. The Abstract of the spec says it all.
This specification defines an API that enables Web pages to use the Web Sockets protocol for two-way communication with a remote host.
Special Mention
If you are interested in the world of Node JS, you can't go wrong with Socket IO. It will implement the best of whichever technology is available to the browser.
Conclusion
The best option is Socket.IO on Node JS. However, for an ASP.Net solution, go for COMET or Web Sockets, if you can. Otherwise, using Flash/Silverlight isn't terrible. Finally, polling and long polling should be last resorts. You could always support one of these, then fall back to another if there isn't support for it in the client's browser.

Yes, you can use COMET.

The client has to tell the server when the client-user begins typing. You've got a couple options here.
Frequent requests from the server for the latest activity. This would be taking place for each user involved in the chat. The same request could be used to send user-specific activity to the server as well: "Jonathan is typing..."
Long-polling. This essentially requests information from the server, and the server keeps the connection opened until it has something to send back. So your requests are minimized, but your connections stay opened longer.
Depending on your traffic, type of data being transmitted, server-environment, and many other factors, one of these options may shine more than the other.

You can use Silverlight for push notifications. Look at PollingDuplexHttpBinding. Since you are using ASP.Net MVC, adding Silverlight will be easy.
Look at this page for more information.

Based upon the REST architecture the html system is based upon, the servers role is to simply act as a resource for the client to pull from. I am generalizing but there are tools to implement this type of action on the client side, rather than on the server side.
You are better off writing/using a library that can request updates from the server periodically. You can encapsulate these types of requests in a javascript object that can fire events. This way your client side script can act like it's getting notified from the server. Review some common stuff with COMET you can probably find some tools to help you client side code.
HTML 5 has some tentative attempts at this type of functionality, but if you want your app to work on older browsers, your better off using more stable methods, like AJAX requested updates.

can you asyncronously notify a web browser?

I'm trying to figure out if there's a way I can somehow notify a web browser of an event from a web server.
I know Ajax lets you asynchronously make a request to update a section of a page. I guess I could have a timer periodically ask for updates. But, I'd prefer to avoid a polling scheme, if possible. Is there a better way to go and still remain with a browser-based solution?

Check out "comet" techniques, where you basically hold a connection open to a server which pushes data back at you.

Well, you could try to set the "ignore-user-abort"-flag on, and make sure that the script doesn't terminates (while condition) sleep()). After you have echo'ed the information you need to transfer, flush() the text to the browser.
But i would't recommend this solution. Instead: Go with ajax, and use a polling scheme. Most up-to-date framework support it out of the box.

Comet is the thing you are looking for. There are some js libraries and http servers that make it easier to use. It's based on the idea of keeping connections open with a certain request and streaming back to the browser when the server has something to stream. You should be aware of he fact that browsers usually can have a very limited number of connections open to one domain (typicaly one I think). If you like to try this out take a look at:
dojo cometd
js io
orbited
apache tomcat advanced io
If you are into erlang check this:
http://yoan.dosimple.ch/blog/2008/05/15/

I guess I could have a timer periodically ask for updates. But, I'd prefer to avoid a polling scheme, if possible.
Tough luck: that's what you gotta do. The web is built on a request/response model: 1 request from the browser, 1 response from the server, and always in that order.
That said, you don't have to (and probably shouldn't) build that polling scheme yourself. You can probably find an existing implementation that abstracts away the details and make it look like the server is notifying the client.

You can use partial rendering. I would check out this article for more information.
Here is another article on the topic.

There is Server-Sent Events from the WHATWG Web Applications 1.0 specification that was added to Opera 9. Mozilla/Firefox seem to be working on it.

In the past I found nice article about streaming data in HTML:
http://ajaxpatterns.org/HTTP_Streaming
Can be usefull :)

Also check out juggernaut for RubyOnRails here