PubSub Chat Using HTML5 Web Socket and em-websocket

It’s 5 in the morning and i am tired and its a possibility that i may be writing a long post, Last night i asked my self what is it that i have learned in the las t couple of months and out of nothingness i rememberd a VIDEO CHAT APPLICATION which my friend Viren and I worked on. I thought it might be useful for some of you.

When we started, we didnt have enough knowledge where to begin with and had time constraints.We came across solutions like Red5,ErlyVideo.
Now out problem was that out client had to be in flash or java applet, we we tried lots of things and the mother solutions of all problems was yet released, HTML5.

When we started, we didnt have enough knowledge where to begin with and had time constraints to meet. We came across solutions like Red5,ErlyVideo. Now our problem was that our client had to be in flash or java applet. So we tried working around many solutions. HTML5 was months away from its release.

we are looking into other HTML5 Features and we get awesome HTML5 web socket support so we thought let’s get some hands on it.

So we think let’s build pubsub chat application, after Googling we got couple of solution.but we want to build own i have choice between nodejs and EventMachine.we have choose EM to quick start.

So we are ready,
We go through HTML5 Web Socket API,and tutorial so basically it’s a technique for two-way communication over one (TCP) socket, a type of PUSH technology.
So it has mainly three events

  1. onopen: When a socket has opened
  2. onmessage: When a message has been received
  3. onclose: When a socket has been closed

More info regarding HTML5 Web Socket you can visit Nettuts, HTML5Demo.
lya Grigorik has written awesome library,and article on it so i don’t go in much detail.

Steps we are following

  • When User is connected onopen event is fired and  we create one default connection and add to pool of channels,it’s used for mainly notification purpose
  • When User A wants to chat with other User B we pass user id of both user and we create channel on that.
    So basically User A is subscribe to individual channel for simplicity i have taken user id for creating uniq channel.I can use session or other stuff currently i am not worry about security.
  • When User A start sending messages to User B,it fires onmessage event,it first populate into EM Queue,right now i don’t want to use any dependency,this can be done with easily with redis also.
  • After sending messages User B will receive notification via default channel which is created when it’s connected.
  • Now User B is wants to chat with User A it check whether channel is present or not if not it creates channel and subscribe onto it
  • If channel is present then whatever messages in en queue it will be pop out and display messages.
  • If suppose anyone disconnect from then onclose event is fire it checks whether default channel is present then unsubscribe from channel and remove socket from channel,and decrease uid by one
  • If any  channel is present then unsubscribe from channel and remove socket from channel,and decrease uid by one.
  • Now user is again connected it will just subscribe channel.

Now I haven’t written code for removing dead channel it will be done easily.Code or Idea is may or may not  fully applicable,there are various solutions are available and respective opensource library is also present.

Now same concept can be easily applicabale redis pubsub also.

Code is present on github,although code is not so furnish but  you can checkout and have some fun

Please feel free to share and comment on it.

At last i am awake it’s around 6.30 o’clock ;).

2 comments On PubSub Chat Using HTML5 Web Socket and em-websocket

Leave a reply:

Your email address will not be published.

Site Footer