Asterisk HTML5 Node.js a World of Endless Possibilities

so I’m going to take you through briefly what I’m going to talk about so there’s the introductions about holiday extras and myself I’m going to go briefly through some of the perks of using html5 and how we can use it to leverage great apps then I’ll talk a little bit about nodejs and how we’ve used a holiday extras and then we’ll get to the exciting bit the demo I’ll take you through building a really simple app that connects to the ami using the module I’ve open sourced so who am i I’m primarily a senior web developer and I’ve been in the web industry for around four years now I’ve been working with asterisk for around two in total and I’m the author and maintainer of the asterisk my module on NPM MPM is the node package manager so I work for a company called holiday extras does anyone know what we do yes I’m glad so we like prawns hill do you guys have ones who are in the u.s. no so pretty much the they do DIY products but they their products say exactly what they do on the tin we do exactly that we sell extras for holidays and vacations in in the u.s. yeah we don’t do extras for Christmas and Thanksgiving we sell airport parking hotels lounges as our core business but we also sell travel insurance and railway tickets to the airport as well we work with some of the biggest names in the UK travel industry and including easyJet British Airways we partner up with an awful lot of travel agents as well and like Thomas Cook and then we’ve also got a secondary part to our business we provide short break stays at London theatres and theme parks and one of them being Legoland Alton Towers that there’s quite a few others as well so we’re based in the UK and we believe holidays should be hassle-free we’re a 29 year old startup it sounds crazy doesn’t it how can you be a 29 year old startup it’s the pace we move that our methodologies that we work with and so we try something new if it doesn’t work then we just scrap it and and move on to the next thing we are the market leaders in the UK and our contact centre took over 800,000 calls last year operating with around 100 staff we’ve been using asterisk in production since around April it took us around a year with a few peaks and troughs to move from our 25 year old Avaya index system that was fun it come and talk to me afterwards if you migrating there’s lots of lessons to be learnt but since moving to asterisk we’ve taken around five hundred and sixteen thousand calls on our void platform and will be hopefully moving asterisk to our Germany offices soon as well but I guess you’re all saying get on with it I don’t care about your company so what about the fun stuff html5 nodejs and asterisk so what’s so great about html5 I’m guessing you all know why html5 is yeah so there’s no need for extra plugins nowadays the latest web browsers you don’t need to have flash or Java you can start doing some really cool things directly within the browser takes less time to launch launch an app now most of the time using html5 and off those apps that you launch and you can make just as full of features as you would a native app there’s millions of web developers out there so generally it’s faster to iterate your app as well the web is very real time whereas developing and deploying a native app just takes longer an amazing statistic over 60% of people that are in that are internet enabled have some thought that have have a browser that’s somehow allowing html5 I’m guessing here guessing everyone here in the room has a browser in their pocket

probably so html5 is ever growing this has been some real improvements in the past few weeks alone when you compare some of the features of html5 to native apps you start asking what’s really the difference between a native app now and a browser there’s actually very little now if you spend the time doing it so you’ve got web workers databases caches access to media like webcams and real-time communication using WebSockets asterisk 11 has WebRTC support for sip meaning you can now have a fully featured sip browser sip sip phone in your browser this is the key to what we’re going to do today two-way real-time communication between the browser and asterisk using the AMI this can’t be done easily without the help of node.js so does anyone know what nodejs is what’s no Jess yes so it’s javascript in the server is essentially yes well yeah you can use node for web servers you can use it for an awful lot of other things as well it’s a great prototyping tool so I’ve taken this directly from the node.js website and I think it explains exactly why we used it with with Voigt nodejs uses an event-driven non-blocking i/o model that makes it lightweight and efficient perfect for data intensive real time applications that run across distributed devices with Voigt if you don’t deal with your data there and then it becomes useless you’ve got to deal with it when it happens so node node is single threaded and you can only do one thing at one time with Voigt you need to act on it there and then so it’s a great match so what we done with it we’ve placed the call directly within our custom CRM system the contact center agents now have everything within their browser almost leaving them to give the most hassle-free experience for our customer no Jess allowed us to move fast and react quickly to new situations so much so that we’re now on our third iteration of the system we’ve made our system more stable over the course of the past few months and we’re now in a pretty good place where I don’t have to touch it at all last time we started restarted the server wasn’t ninety five days ago and I haven’t touched it since and I think that restart was just because of some network issues it just sorts itself out but there’s so much more that we can do at holiday extras so how does it all fit together well you’ve got your asterisk server now you can’t really see it very well on the on the screen but you’ve got your asterisk server you’ve got you know drea server they’re going to talk to one another over the AMI asterisk is going to talk to your soft phone or your hard phone over sip and the node.js server is going to talk to your browser via WebSockets so let’s take a look at the demo so I’m presuming you’ve already got node installed it’s really simple to do now and you just go to no gesture org and download it for your OS and it’s available for Windows Macs and Linux next you need to install the asterisk my module from MPN NPM comes with node now so you don’t have to worry about that either so go to the command line CD into your chosen directory for your project and type NPM type NPM install asterisk ami so it’s as simple as that that thing goes and gets the the package from github or wherever wherever the source code is so let’s take a look at creating a basic node.js server that uses the asterisk and wine module to talk to talk to asterisk so before I go through the demo let’s take a look at how simple the code is so the top there you’re requiring asterisk ami then you’re instantiating it with a load of parameters so you give it the host and you the username and the password for the ami connection then you set up an event listener so the asterisk a my module emits an event called a.m. i underscore data and it gives you that data so the my module takes care of parsing the ami for you and it just gives you back a nice JavaScript object

this example logs it out to the console so it looks out a my data and then gives you the data within a string then we’ve got a connect event well it’s not really an event you’ve got a connect function so we’re connecting and we’re giving it a callback on that callback that callback happens when it’s finally connected so we’re logging out to the console connected to the AMI and then we’re setting up an interval to send a ping request every two seconds so what’s going to happen is we’re setting up our listener and then we’re connecting and then we’re saying right every two seconds send this ping the the listeners then going to get pong pong pong pong pong every two seconds then the bottom bits just dealing with when we close down the the server to disconnect from the AMI and then and then close itself so let’s take a look at that running so running your server is as simple as node and then you file can everyone see that yeah so you can see we’re connected to the ami and then we’re getting back data so you can see we got back a yeah and if I make that full screen you can see that we got back a fully booted and then we’re getting a pong pong pong response I’ve got a phone registered to it so it’s saying here’s a peer status and you’re just going to get every single event that asterisk is chucking out via the AMI and each one of these is a JavaScript object within within node so you can directly access it so let’s close down that so you can see what’s that 20 lines of code you’re talking to asterisk and you can deal with the data that’s coming back it’s really simple so it’s simple but pretty boring the talks about html5 and using that to leverage great apps so let’s output all those console logs to a web page so as someone said earlier making a web server in node is it it’s what an awful lot of people are doing with it node has so many great modules out there and it’s really easy to to leverage WebSockets and I’m using a module called now-now j/s which uses socket IO underneath it so if we take if we go through this example we’ve still got our asterisk and my module we’re requiring now we’re requiring nodes filesystem that’s a core module we’re requiring express expresses a web server module and then we’re requiring the core HTTP module as well you can see that lines exactly the same instantiating the AMI we’re instantiating Express we’re making that listen on localhost 8080 and then we set up Express so we tell it everything that’s within assets just serve up aesthetic assets then we’re setting up a path so everything that goes in on localhost 8080 we’re saying well go and read web page to HTML and and serve that up then we’re setting up now j/s no js’ is the key to WebSockets in this example you tell now a gesture to bond to the express server and and then the bit underneath it is exactly the same we’re taking the the am i underscore data event that gets emitted but instead of consult logging it we’re saying well if there’s a function on the browser so sorry now Jess allows you to share functions between the browser and the server it’s pretty cool so echo a stress data is actually a function on the on the client and we’re calling it directly from the server so this is one of the cool things about WebSockets so we’re saying if echo asterisk data exists call that with the data that came back if we then take a look so that this is exactly the same exactly the same so this is webpage HTML obviously there’s a load of HTML that goes along with it but this is the JavaScript that deals with with what we’ve just outputted from the server so we’re requiring a ojs the client library and then we’re we’re then making a

function called output so far output and then it’s saying get everything that’s within a div and append the data that’s just come in to that div so we should essentially see lots of information being added into into an element within the HTML now to echo asturias data so that’s adding echo Astro state of a function to the now object so that it’s available between the client and the server and then now that ready is just saying we’re ready now let’s say output to that div and say connected Navion ljs so if we take a look at that so exactly the same node server Jess and then you can see at the bottom there we’re listening on localhost 8080 and we’re connected to the AMI it doesn’t give us all those console logs that we just had so now if we refresh this browser you can see we were connected via now j/s and now we’ve got a response well of pom pom pom pom pom I’d expect to now start seeing some peer status stuff Big Eight peer status so that’s my soft phone registered I’m a bit worried because there should be two there we’re just going to mess up my demo in a minute but now we’re connected by our WebSockets so that that’s the most basic example of connecting asterisk to your browser with very little code at all so if we we stopped that running so you see that stopped getting anything from from the server now so that’s cool but doesn’t really do anything does it it’s not really two-way we’re just sending down these events to the browser so let’s step it up a notch from a web page via WebSockets let’s get Bria a soft phone talking to another soft phone I’m not going to answer the call because then I’ll get horrendous feedback but you’ll see it happening so on the server everything remains the same except for what four lines so now we’ve added send data to asterisk function to the now object and that means that the client can now call send data to asterisk which then with some data which then part passes that data to ami send a midol send is sending it to asterisk by the a.m. on it it’s as simple as that you obviously in production you’d want to put some more checks around that you wouldn’t just want anyone with access to your client and to be able to send whatever they wanted to to the server to your to your server you’d want to put some authentication and and say well this person’s only allowed to do this but for sake of argument that that’s as simple as it can be and then web page HTML stays exactly the same apart from now we’ve I’ve added in a load of buttons as HTML and then using javascript jquery I’ve said on a click event on a class of button do these things so on a click event get the event find out whether or not find out what class the button has and do something based on that so you can see if the button has a class of help then we want to send lists come on to via vmi if the buttons got reload then we want to send a reload action if it’s login then I’m going to add extension sip 2000 sif extension 2002 q10 with a penalty of one and in a paused state then we’re um then we’ve got a button to unpause so we’re saying interface sip mm in q10 unpause that then we’re going to that there’s there’s a dial button which says make an originate action between sip

extension 1002 extension 10 extension 10 is the key in context from external from internal priority is one do it asynchronously and give it a caller ID then we’ve got a log out log out is just queue remove if you’re interested in to why we’re not using the agent channel within asterisk come and talk to me afterwards we had real issues with it so this this is pretty much how we do our stuff at Holiday extras we lock them into queues as extensions and then at the bottom there you can see it’s then calling now send data to asterisk with the object that I’ve just made so it’s just a JavaScript object and then e dot prevent default is just saying right stop here don’t do a default so if we go back and do moot move over to check out advanced webpage and just run node server again it’s doing exactly the same thing as you’d expect so again let’s refresh this and now you can see the buttons that I’ve added in so we’ve got help reload etc etc so let’s make this a little bit bigger so I press help that goes off to the ami and comes back with this JavaScript object which gets string if I’d for use on the webpage so we got a response a success response we got an action ID the the module automatically assigns a action ID if you didn’t give it one and then it tells you all of the all of the things that you’d expect to come from if you did a manager show commands on the CLI it would give you exactly the same thing so you can see and then you can see that a weight event needs certain privileges as well so that they’re all of the events that you can and all the commands that you can call then I’m going to reload so you can see I reloaded and here we’ll get all of the events that came back so you can see var set so when asterisk reloads it resets a load of variables and then it tells you it gives you an event of channel reload to say yep we’ve reloaded sip because that’s the only thing that’s actually being used at the moment so this is the interesting bit where I’m probably going to fail we’ll see so we’re gonna log extension 2000 so here’s extension 2000 and here’s extension 1000 neither of which are complaining so hopefully this is going to work so long extension 2000 into q10 in pause state so you can see at the top there we then got a cue member added event that came back you need an agent or all privilege against the ami user and that you’re currently using and then we’re saying log them into q10 here’s the location SEP 2009 is 60,000 and the membership is dynamic so these are all in fact this is all information that’s come back from asterisk calls taken 0 obviously because they haven’t taken any calls yet but they’re in a poor state so let’s unpause them so we’ve got back an interface unpause successfully and then we’ve got another humour so we’ve got Hugh member paused event this time with here’s the cue here’s the here’s the extension and they’re in not in a poor state anymore so this is the bit that hopefully won’t go wrong dial q10 farm extension 1000 so we’ve got extension 2000 in this queue hopefully this is gonna generate a call using originate – to generate a call into that queue so in a call center environment you’d have like auto answer turned on but in this one we don’t so I’m expecting yeah so I’ve got a cool so I’ve accepted that and I’m now in that queue I’m waiting in that queue

but I should have got something else what haven’t I done so I should have got a call on this let’s close down all active calls will be disconnected ah so so I’m hearing Allison talk to me so let’s let’s try that again so this time you can see I’ve got a call waiting so I’m getting lots of feedback but you can see that the I know so you can see that there’s a call between my telephone up here and umbria going on at the same time and that was all caused by the am I in in real life examples you wouldn’t quite do this and they’d be extensions on two different machines I wanted to use my phone and give someone my phone but the VM that I’m running won’t allow you to do that so but you can see there’s a call and if I close down that call then that one that one ends as well so that was a live call and while that was going on you could see everything that was happening on asterisk so you could see an RTC P received pack of event an RTC piece in the these are probably the two most common events that you’re going to get and if you don’t care about them turn them off in your manager comp they add so much load to your to your ami connection and if you don’t care about them turning off most people don’t care about them and then that that’s that’s pretty much it so when we then we can log out of that extension of that cube so you can see extensions 2000 has now been logged out of q10 key member removed and that’s that’s that if we go back to here and that’s it so has anyone got any questions ya know you’re talking about your server was running 490 some days freestanding um how long have we have you heard of Jake nodejs running a web server talking to AMI successfully I haven’t actually heard of anyone else I’ve seen a few modules out there that talk to the AMI fire node mine’s probably one of the most open allows you more control over the events that you get and the events you can send back but I’ve not actually heard of anyone using these modules but I can show you I can show you some stats in a minute but because no takes care of is running on v8 Google’s v8 engine node kind of just deals with memory for you and and everything else so if we didn’t have that Network issue 95 days ago then that node server could have been running 125 you could leave it running all year round and you wouldn’t have any issues it’s just other things that have impacts it like a network outage thanks a great talk what do you actually use this for in production on a day to day basis so we’ve got our custom CRM system for our call center allows them to navigate our websites and and to deal with customer issues and so at the beginning we use the agent proxy Channel in in asterisk and when you when you log into the agent Channel that’s it your information gone and you don’t know about the call the call just gets delivered to you and so we were originally using it because we were using the agent Channel and no information about the call was delivered to the user so we used it to give that that data to our call center it also allows them to go on rap-rap paused with

a reason we’re now no longer using the agent channel because it caused us a lot of issues so we’re now delivering calls directly to an extension and that extension also answers the call etc yep so I kind of came in Midway but if I understand correctly your browsers are connecting to ami directly so all your browser instances would have direct connections they know so you’ve got your one nodejs server and that’s connected to the MI and then your browser’s are connected to your node.js server we’ve got about 6 a.m. I connections open at any one time in our production instance because of the amount of data that that’s coming through the ami if you want to if you had a call coming in and you need that agent to know about that call straightaway and when we only had one open there was like a little bit of a delay and so we’ve got about six connections open via this node.js server but your browser’s don’t connect directly okay and it’s really a follow-up question is have you guys with no js’ how do you mean well I’m just kind of getting new into this this kind of whole nodejs JavaScript but I’ve seen some projects that will use a publishing server up sub for the actual ami events and then they’re using kind of the I guess a Native Client within nodejs to subscribe to those events no I I haven’t seen anything like that personally because to subscribe to events it’s a it is as simple as here’s my object that’s gonna emit this event and then you say on this event do this it’s really simple so I wouldn’t see the point in in something like that it’s not really a question Dan thank you for your presentation Hank you’ll be pleased to know that we’re running a little competition here at Astrakhan for the riskiest live demo and so far you’re winning great but probably not for very long because Tim Panton and Josh Cole becoming on his afternoon and knowing Tim is always extremely risky but at the moment you’re in the lead great I thought it was going to go wrong any other questions no so just for me to say thank you really this is my first Astrakhan I can blame David for that and he invited tea but if you need to get in contact with me i’m on twitter at dan underscore jenkins and there’s my email address have a read of our tech blog holiday extra hungry geek and then there are those two links for the asterisk a my module and all the codes the i used is on my github so github.com for slash Dan Jenkins you