A while back Dominique Boucher, the CTO of  Nu Echo, contributed to a guest post on our blog demonstrating how simple it was to create an IM (Instant Messaging) chat application using the PhonoSDK and Tropo.  Most people still think of Phono as a web phone, but it’s so much more!

At the core of the Phono SDK, it’s basically a powerful open standards, XMPP-based SDK wrapped in a simple jQuery API that makes sending and messaging IM messages and Jingle/SIP-powered phone calls with other Phono users or with Tropo applications or leveraging Tropo to access other IM networks such as GTalk, MSN, AIM, Yahoo!, Jabber, and other XMPP-based IM social networks.

Imagine for a minute what you can do with this technology!

1. You could create your very own browser-based IM platform that communicated with all of the other social networks like Meebo.

2. You could develop a public or enterprise chat application like Candy Chat or Hip Chat or add IM chat to your existing Web application.

3. You can use IM to pass instant messages bi-directionally between your Phono and Tropo applications to interact with the user on the Web page as well as the Voice application.  This is great for screenpop applications of when you need to update items on the web page based on the flow of the phone call.  You could even use this feature to deliver a true multi-modal browser and phone application to market where the state of the chat and voice applications are in sync!

As users begin to understand the flexibility and power of combining IM and Voice into a single application and as they they experiment with Phono’s easy IM features, we are getting requests for more IM examples to demonstrate the ease-of-use and interaction capabilities between Phono and Tropo.  I wrote this Group IM chat as an example for a Voxeo customer and wanted to share it with you.  It basically leverages most of the HTML, CSS, and Javascript code from Dominique’s blog post but I extended his javascript file to send a joined message as new users come into the chat as well as allowing support for the name of the chatroom and username to be passed into the URL at the start of the chat.  Here is the new IM.JS file to add to the previous project:

var myId = '';
var chatroom = getParameterByName('chatroom');
var username = getParameterByName('username');

var PHONO_OPTIONS = {
    apiKey: "6e442b984dfa26cd102423b7bc5aaebd",
    onReady: function() {
    $("#message")[0].disabled = false;
    $("#message").focus();
	myId = this.sessionId;

	// send hello message to register jid on tropo
	var sendmsg = myId + ':' + username + ':' + chatroom + ':joined';
	phono.messaging.send('jabber_id@tropo.im', sendmsg);
    addInteraction('Me', 'joined', 'client');

    },
    messaging: {
    onMessage: function(event) {
		var themsg = event.message.body;
		// message is colon delimited username:the message
		var thenewmsg = new Array();
		thenewmsg = themsg.split(':');
		if(thenewmsg[0] != username){
        	addInteraction(thenewmsg[0], thenewmsg[1], '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 + ':' + username + ':' + chatroom + ':' + msg;

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

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

function getParameterByName(name) {

    var match = RegExp('[?&]' + name + '=([^&]*)')
                    .exec(window.location.search);

    return match && decodeURIComponent(match[1].replace(/\+/g, ' '));

}

Here is the Tropo Scripting API Ruby script that I wrote which uses CouchDB hosted by IrisCouch to track all of the Jabber IDs in the chatroom.  The Tropo application simply loops through the Couch document and sends an XMPP IM message to each JID ignoring the one that originally sent the message.

require 'rubygems'
require 'net/http'
require 'json'

module Couch

  class Server
    def initialize(host, port, options = nil)
      @host = host
      @port = port
      @options = options
    end

    def delete(uri)
      request(Net::HTTP::Delete.new(uri))
    end

    def get(uri)
      request(Net::HTTP::Get.new(uri))
    end

    def put(uri, json)
      req = Net::HTTP::Put.new(uri)
      req["content-type"] = "application/json"
      req.body = json
      request(req)
    end

    def post(uri, json)
      req = Net::HTTP::Post.new(uri)
      req["content-type"] = "application/json"
      req.body = json
      request(req)
    end

    def request(req)
      res = Net::HTTP.start(@host, @port) { |http|http.request(req) }
      unless res.kind_of?(Net::HTTPSuccess)
        handle_error(req, res)
      end
      res
    end

    private

    def handle_error(req, res)
      e = RuntimeError.new("#{res.code}:#{res.message}\nMETHOD:#{req.method}\nURI:#{req.path}\n#{res.body}")
      raise e
    end
  end
end

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

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

if jid.index("phono.com")
  begin
    res = server.get("/couch_db_name/" + chatroom)
    jsonresp = res.body
    dbdata = JSON.parse(jsonresp)
    jids = dbdata["jids"].to_s
    if msg == "joined"
      jids = jids + "," + jid
      res = server.put("/couch_db_name/" + chatroom, '{ "jids":"' + jids.to_s + '", "_rev":"' + dbdata["_rev"].to_s + '" }')
    end
  rescue # not found
    jids = jid
    res = server.post("/couch_db_name", '{ "_id":"' + chatroom + '", "jids":"' + jids.to_s + '" }')
  end
end

if msg and jids

  jidsarray = jids.split(",");
  jidsarray.each do |client|

    message username + ":" + msg, {
       :to => client,
       :network => "JABBER"}

  end

end

That’s it!  If you are looking for the entire set of files in one place, feel free to grab them from my GitHub account: https://github.com/chrismatthieu/group-im-chat

No related posts.

Tags: group im, im, instant messaging, phono, social, tropo, xmpp

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.