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).

Answer 2

Faye is amazing, i love Pusher but I wanted something free and easy to implement that I can manage on my own server. Which after starting to learn Node.js I was really impressed with Faye. It provides great support for websockets, http, but I like that you can use the Bayeux protocol.

http://faye.jcoglan.com/node.html

Answer 3

As pointed out by NullPoiиteя and Orangepill, you could look at caniuse and html5please. So that was your first point/

Your second and third point are more for a fallback option. Well you could use polling. (see this answer for more info).

Well this is not in you question but a point you should consider (because you tagged it under php). Websockets have an active connection as long as the user is active. PHP is not ment for this, your server will flood into the connection and also a person with bad meaning could easily make sure the server is flooded.

This is because if you want it you need to set the time out limit on 0 (so never). So your server will stack up the requests until it is full. (how it acts as an connection dies I don't know).

If you wan't to use websockets and PHP you should look at pusher. I used this service for my own chat thingy. It works like magic and takes all the difficult things away from you.

I hope the info helps you develop a nive app

Answer 4

if you wont to build it for the sake of learning you can use node.js it's a good place to start also you can find a much of resources leading you to start from scratch.

But for me i prefer to use PHP web socket server for comunication and javascript for clent-side with a help of official PHP site you can start build your web socket server.

Answer 5

We have done such thing and it is quite a taks to build a stable php socket server in connection with html5 web sockets.

A few information on our FAQ: http://www.livesupportrhino.com/faq/c/4/rhino-websocket