Websocket and Asterisk

Hey all!

I am developing an application where people can call from their browser and see the status of the different extensions. Something like this:

Extension Status
101 On hook
102 Calling with 06 *******
103 On hook

I already got a phonebook (in the browser) which is able to make calls. But what i still need is the page where I can see the status of the extensions.
Now i would like this to be done realtime. Which is able through websockets but I have no clue how to do that.

When i monitor with WireShark when calling, i see different events showing up like this:
Event: Dial
Privilege: call,hud,all
SubEvent: Begin
Channel: SIP/988-0000001d
Destination: SIP/988-0000001e
CallerIDNum:
CallerIDName:
UniqueID: 1383219624.30
DestUniqueID: 1383219628.31

Event: NewCallerid
Privilege: call,all
Channel: SIP/988-0000001e
CallerIDNum: 988
CallerIDName:
Uniqueid: 1383219628.31
CID-CallingPres: 0 (Presentation Allowed, Not Screened)

So,a websocket should be able to capture these events and place right? And put the info it contains, like the channel and destination, on my webpage, realtime?

I really hope someone can help me!

In advance thanks!