In a previous post, I explained how to monitor phone calls sent with the Twilio API in real time using call progress events. These allow you to set up a webhook url to receive a request whenever the status of your phone calls change.

The real time updates of call progress events provide us with a great opportunity to play around with websockets. In this post I am going to show you how to extend an already existing Express app to add real time communication between the client and server. We will be turning the Express server from my previous post into the backend of a dashboard for monitoring calls in real time using socket.io.

Setting everything up

You are going to need to have have Node.js and npm installed. At the time of writing this blog post, I have Node v4.0 and npm v2.10.1 installed.

You will also need to create a Twilio account and purchase a phone number with Voice capabilities. You can get through this post using a trial account, but you will have to verify each phone number that you make calls to with the API. Upgrading your account will allow you to make calls without verifying the phone number first.

If you did not follow through the previous blog post, you can get the code for the back end that we are adding websocket functionality to from this GitHub repository.

Set it up locally by entering the following commands into your terminal. You may have to enter your GitHub credentials: