Update (2017): This post is outdated and shite. Please look elsewhere for better examples of similar apps. If you insist on seeing the naive code I wrote for the demo, there is a github link in the post.
(Open the chat in two or more browser windows/computers and check how fast the realtime updation is!)
Gmail chat, Facebook chat etc were implemented using a technique – rather a hack – called long polling[1]. It is the technique where the client initiates a request to the server. The server rather than returning the client with a response, keeps the connection open for a longer time. The server only returns to the client with a response when it (server) has something new for the client. The advantage of long polling over normal polling are reduced latency and saving from the overhead of sending too many short http requests.
Still, long polling is the same old request-response http transfer mechanism. It wasn’t created for realtime communication.
Then came WebSockets. WebSocket is a technology that enables full duplex communication between two nodes. At the beginning of the communication, the client makes a handshake with the server and opens a connection with the server. Once the socket connection is opened between the server and the client, both the server and client can send data to each other freely without further solicitation. Doesn’t it sound awesome?
The WebSocket spec is still in draft state as of writing this post, but most of the browser vendors have already started adding support for websockets.
See a chat app I made with WebSocket & NodeJS. You can checkout the source code on Github.
In the demo, WebSocket is used for opening socket communication with the server.
And NodeJS with websocket module is installed to support evented communication and websocket protocol support in the server.
PS: The above demo is running in my test server. So I might be down at times when I’m frying the server 😉
Resources
It seems that the link for “source code on Github” has been changed.
You might need to edit the link to “https://github.com/riverspirit/Springle-Chat”.
Thanks Chris, I’ve updated the link.
What do?
Warning: Native modules not compiled. XOR performance will be de
Warning: Native modules not compiled. UTF-8 validation disabled.
The chat system will work with this warning also. Failing compilation of native extensions won’t cause issues in most cases.
Hi, thanks for your nice tutorial,
I install it, but when inter a room like ‘public’ the page locked and just displayed this picture. please help me.
hi mahdi, are you sure you have installed the server side code and the app server is running in the background? Can you share a screenshot of Google chrome’s network panel when you are getting this page?
hiii jsx i have been facing the same problem on the server ..http://indialeaks.org/c6/ please tell how can i fix it…
Hi anil, I checked the link you posted. It looks like your chat installation is still pointing to my server (sky.rebugged.com:8805). So open your chat_client.js file and edit the variable
‘server_url’ to match your installation’s web socket URL.
Then you need to open your server.js file and edit the array ‘allowed_origins’ to include your server path.
And finally, you might also want to edit your chat_client.js file and change the variable ‘enable_ssl’ to false.
This assumes you have started the chat server by typing ‘node js/server.js’ in your server’s terminal. Hope this helps.