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_" + cls + ""><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
Google recently released nearly $70M worth of opensource code to the world, in order to help improve real-time communications (RTC) over the Internet; they call it WebRTC. 
RSS Feed