For proper interfacing between computer and telephone, the computer system and the telephone system need to know which operator is on which extension.

On each machine we currently keep the extension in c:extension.cfg. The ‘CTI’ program that forces the webpages to ‘pop’ uses this to know which extension it’s on and which extension to listen for on the main feed from the switchboard. It knows that if line 4000 gets answered on it’s workstation it needs to load http://ourserver/screenloader.aspx?line=4000

All nice and simple. However, with our new switch we need a bit more.

The telephone system needs to know which user is on which extension so that when the user clicks on ‘Dial 01234-567890’ the switchboard will know which extension to make that call from.

The computer system needs to know for stats and when the telephone system says "Ext 123 has picked up line 4000" the computer knows to pop the right screen on the right extension.

So our web based system needs to know which user is sat at which physical machine. There are a couple of simple ways we could do this:

1. Use the IP address to work out which extension is being used.
2. Make the user type it in after they login.
3. Make the CTI program the main login and have it pass the extension number over as part of the login data.
4. Something else.

Hmmm. Option 1 is all fine until you have a roaming user. Option 2 would be a disaster. Option 3 would work, so long as they remembered to login with the CTI program and not via the normal webpage.

So option 4 it is… get the data from c:extension.cfg into the database by using the normal webpage from IE/FF/Chrome. Right… should be easy….

Plain old Javascript was out as reading from the hard drive is a no no. ActiveX would do it, but IE only. There needed to be another way.

Fortunately there was. Our CTI program. That runs on every machine and knows the extension number. We just need to communicate with it. At first, I thought a quick and dirty bit of AJAX would suffice and I can make a call to http://localhost:1234/ where we’d have our CTI client listening on port 1234 waiting to respond. Sadly, browsers don’t like doing cross domain calls, and as far as it’s concerned, localhost is a different domain. Something more cunning was needed.

JQuery is our saviour here. More exactly, jQuery.getJSON is our saviour. We need to use JSONP which allows us to do cross site queries like you’d do into Flickr etc. All we need to do is to write a little server into the CTI app that returns some JSON data. Well, not quite. It’s JSONP. The difference is, the calling application, in this case JQuery passes a parameter that it expects as a call back.  You ask it to get you http://server/getextension.scc?user=abc&jsoncallback=?     and it replaces that 2nd ‘?’ with a random name. All you then need to do is use that as the method name for your JSON data.

 

        Dim RequestParts As String() = Split(httprequest, "?")
        Dim pagename As String = RequestParts(0)
        Dim params As New SortedList

        If RequestParts.Count > 1 Then
            Dim tmp_params() As String = Split(RequestParts(1), "&")
            For Each tmp_param In tmp_params
                If tmp_param.Contains("=") Then
                    Dim components() As String = Split(tmp_param, "=")
                    params.Add(components(0), components(1))
                End If
            Next
        End If



        Select pagename.ToLower
            Case "maintainlogin.scc"
                ComposeResponse = params("jsoncallback") & "({"
                ComposeResponse += """extension"":""" & extension & ""","
                ComposeResponse += """switchboard"":""JAM"""
                ComposeResponse += "})"
        End Select

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

 

So we call http://server:1234/getextension.scc?user=abc&datacallback=? which JSON changes to (for example) http://server/getextension.scc?user=abc&datacallback=JSONP123456789

Our ‘server’ app then responds with valid JSONP response of  JSONP1234567890({“extension”:”2345”,”switchboard”:”JAM”})

We then need to send that data back to the main webserver so it can be written into the database. Fortunately, this isn’t cross domain and is a piece of cake with a JQuery ‘load’ event. ‘Load’ just gives you the HTML from a page you request and inserts it wherever you like into the DOM. I created a page called ‘extlogin.aspx’ that you pass the extension and the usercode to. It returns some HTML to notify the user of success.

All in all, on the main webpage that is sent to the client we simply need to include the JQuery library and do this in the body:

    <div id="localcontent">
    </div>

    <script type="text/javascript">
  $(document).ready(function(){
    $.getJSON("http://127.0.0.1:1234/maintainlogin.scc?usercode=<%=UserCode %>&jsoncallback=?",
        function(data){
               $("#localcontent").load("extlogin.aspx?extension=" + data.extension + "&usercode=<%=UserCode %>");            
          });
        });
    </script>

That calls our local server on port 1234, parses the result and pushes it back to the main webserver. Easy!

Here’s a screenshot of it in action:

and ‘proof’ of it being written into the DB on the main server…

 

So from local text file, to DB on webserver in a few easy steps with the help of JQuery, JSON and some imagination. Easy!!