Justin Dupree, Tropo’s Chief Technical Writer and Evangelist, asked me the other day if it would be possible to build a web application that could carry on a conversation over SMS with another user.  ”Of course it is!”, I said while scratching my head.

Armed with PhonoSDK, Tropo Scripting API, CouchDB, and Dominique Boucher’s blog post on building an IM client in the web browser, I set out to build a multi-modal communications application that basically bridges Instant Messaging networks and SMS networks with a few lines of Phono and Tropo code.

Here are the results of my brief hacking session. The source code is also provided below!

You can refer to the chat.html and im.css from Dominique’s blog post.  These files are basically the same except I added the following line to chat.html to capture the mobile number for the SMS message:

<input type="text" id="smsnumber" value="1">

Here is the new im.js file that I extended:

var myId = ''

var PHONO_OPTIONS = {
    apiKey: "your-phono-sdk-api-key",
    onReady: function() {
    $("#message")[0].disabled = false;
    $("#message").focus();
	myId = this.sessionId;
    },
    messaging: {
    onMessage: function(event) {
        addInteraction('SMS', event.message.body, 'server');
    }
    }
};

var phono = $.phono(PHONO_OPTIONS);

function processKey(event) {
  if (event.keyCode == 13) {
      sendMessage();
      return false;
  } else {
      return true;
  }
}

function sendMessage() {
    var msg = $('#message').val();
    if (msg == '') return;

	var sendmsg = myId   ':'   $('#smsnumber').val()   ':'   msg;

    $('#message').val("");
    phono.messaging.send('imsms@tropo.im', sendmsg);
    addInteraction('Me', msg, 'client');
}

function addInteraction(who, msg, cls) {
    var dialogDiv = $('#dialog');
    dialogDiv.append($("<div class='msg_"   cls   "'><b>"
                         who   ":</b> "   msg   "</div>"));
    dialogDiv[0].scrollTop = dialogDiv[0].scrollHeight;
}

You will need to activate a Jabber tropo.im username and publish your own address in line 35 above. More information on activating a Jabber account can be found in this blog post.

Here is the Ruby-based Tropo script that compliments the Phono client-side code. You will need to preface this script with the following Ruby-based CouchDB routines.  This Tropo script uses the Scripting API and is hosted on Tropo.com.

server = Couch::Server.new("yourserver.couchone.com", "80")

data = $currentCall.initialText.split(':')
jid = data[0]
smsnumber = data[1]
msg = data[2]

if jid.index("phono.com")
  res = server.get("/imsms/phonosdk")
  jsonresp = res.body
  dbdata = JSON.parse(jsonresp)
  res = server.put("/imsms/phonosdk", '{ "jid":"'   jid.to_s   '", "_rev":"'   dbdata["_rev"].to_s   '" }')
end

if msg
  message msg, {
     :to => "tel: "   smsnumber,
     :network => "SMS"}

else

  res = server.get("/imsms/phonosdk")
  jsonresp = res.body
  dbdata = JSON.parse(jsonresp)

  message $currentCall.initialText, {
     :to => dbdata["jid"],
     :network => "JABBER"}
end

If you wanted to take this application to the next level, you could assign each chat session a unique chat id and store that in couchdb along with the Jid’s to create a private IM to SMS chat. You could also attach multiple Jid’s to a chat session id to create a Group SMS party system with Web chat!

Better yet!  Add this code to the Create a Group SMS Service in 5 Lines of Code that we provided earlier this week and you’ll have more features than the current Group SMS startups on the market today!

Originally from Voxeo Blogs