HTML5 Websockets for Realtime Chat app?

Question

We were planning to make an HTML5 based chat app using the Websockets technology.

So my question is:

1. Which are the browsers that support <

Answer 1

Which are the browsers that support Websockets natively currently as of today?

As pointed out in previous answers.

See:

• http://caniuse.com/websockets
• http://html5please.com/#Websockets

If a browser does not support it, what is a possible graceful fallback?

If your realtime web server only supports WebSockets then the next best option is to use web-socket-js it's a Flash-based polyfill which creates a WebSocket object which an be interacted with in the same ways as the native WebSocket object.

Additional fallbacks - which need to be supported by your realtime web server and managed by the JavaScript client library it provides - are, ordered best to worst:

1. EventSource - A single streaming connection from server -> client. Bi-directional communication can be achieved using a second HTTP request.
2. HTTP Streaming - uses two connections to simulate bi-directional connectivity. Messages are 'pushed' over a persistent 'streaming' connection server -> client
3. HTTP Long-Polling - also uses two connections. However, the server -> client is opened, held until either a new message is available or a timeout occurs. It's then closed and if any data has been set it is delivered in the response.
4. Standard HTTP polling - much less efficient and due to the large amount of potentially wasted requests. However, if the updates your app delivers don't happen all that frequently and it doesn't matter if data is 'out of date' for the time between polling requests, then this may be an acceptable solution. There is no 'push' here.

Options 1. and 2. can be achieved in numerous different ways depending on the web browser. This is what makes them 'hacks'. We now have WebSocket for bi-directional communication and EventSource (server-sent events) which is very similar to HTTP Streaming with the added benefit of it supporting auto-reconnection.

Is there a polyfill that can help?

Yes, see web-socket-js as previously mentioned.

For PHP your best choice is Ratchet. It doesn't run within Apache so it doesn't suffer from the same limitations - it wasn't built with the Request/Response paradigm in mind.

The most commonly used solutions I see right now are:

• Faye - node.js and ruby
• socket.io - node.js and ports available for various other languages
• SockJS - erlang, node.js, ruby
• SignalR - .NET
• XSockets - .NET

For other options - including hosted services like Pusher (who I work for at the time of writing) - take a look at this realtime web tech guide which I'm maintaining (and accepting contributions towards).