Skip to main content

By clicking Submit, you agree to the developerWorks terms of use.

The first time you sign into developerWorks, a profile is created for you. Select information in your developerWorks profile is displayed to the public, but you may edit the information at any time. Your first name, last name (unless you choose to hide them), and display name will accompany the content that you post.

All information submitted is secure.

  • Close [x]

The first time you sign in to developerWorks, a profile is created for you, so you need to choose a display name. Your display name accompanies the content you post on developerworks.

Please choose a display name between 3-31 characters. Your display name must be unique in the developerWorks community and should not be your email address for privacy reasons.

By clicking Submit, you agree to the developerWorks terms of use.

All information submitted is secure.

  • Close [x]

Select a language:

  • Close [x]
  • Close [x]

Create an Ajax-based IM client

Turn IM traffic into Web traffic using Jabber and a Web page

Nicholas Chase (ibmquestions@nicholaschase.com), Freelance Writer
Nicholas Chase has been involved in Web site development for companies such as Lucent Technologies, Sun Microsystems, Oracle, and the Tampa Bay Buccaneers. Nick has been a high school physics teacher, a low-level radioactive waste facility manager, an online science fiction magazine editor, a multimedia engineer, an Oracle instructor, and the Chief Technology Officer of an interactive communications company. He is the author of several books, including XML Primer Plus (Sams). He is also a partner in InterSection Unlimited, which specializes in creating Second Life content and applications. You can find him in-world as Chase Marellan.

Summary:  The ability to instant message (IM) co-workers and friends is a great convenience, but some environments prohibit the use of instant messaging clients in the workplace due to security concerns. The exercise in this tutorial resolves any security concerns by showing you how to use Ajax to create a Web-based IM client that turns IM traffic into plain Web traffic by creating an instant messaging "bot" and a corresponding Web application. While it's not a production application, it demonstrates several nifty Ajax techniques, such as how to use Prototype to do easier DOM manipulation and how to easily update sections of a Web page, either once or repeatedly.

Date:  29 Apr 2008
Level:  Intermediate
PDF:  A4 and Letter (785 KB | 42 pages)Get Adobe® Reader®

Activity:  24252 views
Comments:  

Before you start

This tutorial shows you how to use Ajax to create a Web-based IM client. It is for developers who want to learn how to use Ajax to create a functional application and for those who want to learn more about creating instant messaging applications. This tutorial uses the Prototype JavaScript library and a Jabber instant messaging server. You should be familiar with Javascript, HTML, and Java™ programming. If you need a refresher, see the Resources section.

About this tutorial

In this tutorial, you create a Web-based instant messaging client using the Prototype Javascript library and a Jabber server. When it's complete, you will be able to choose among users who are on your buddy list and send and receive messages through the Web page to users on traditional IM clients.

In the course of this tutorial, you will learn:

  • How to install a complete instant messaging solution
  • How to create an instant messaging "bot"
  • How to send and receive instant messages using Java code
  • How to use the Jabber "roster"
  • How to create an auto-updating Ajax-based Web page

All of this gives you an application that turns instant messaging traffic into plain old HTTP, so you won't run into firewall problems.

Back to top

Prerequisites

This tutorial uses the following tools, all of which are set up in the first section:

  • Openfire: An instant messaging service to communicate with. Openfire is an open source Jabber server that runs on the Windows® operating system, MacOs, or Linux®.
  • Spark: An instant messaging client so you can see what's going on. Spark is an open source Jabber client from the people who bring you Openfire.
  • Smack: A way to communicate with the Jabber server. The Smack Java API provides all of the functionality you'll need.
  • Prototype: The Prototype JavaScript library that creates and manages the Ajax application.
  • Apache Tomcat: A Java Web application server capable of running servlets in order to run this application.
  • Eclipse or another Java environment: You build Java applications in this tutorial, so you'll be well served by using a Java IDE such as Eclipse, which lets you develop right on an application server for convenience. Alternatively, download the Java SDK from http://java.sun.com.

1 of 11 | Next

Comments

Back to top

Close [x]

Help: Update or add to My dW interests

What's this?

This little timesaver lets you update your My developerWorks profile with just one click! The general subject of this content (AIX and UNIX, Information Management, Lotus, Rational, Tivoli, WebSphere, Java, Linux, Open source, SOA and Web services, Web development, or XML) will be added to the interests section of your profile, if it's not there already. You only need to be logged in to My developerWorks.

And what's the point of adding your interests to your profile? That's how you find other users with the same interests as yours, and see what they're reading and contributing to the community. Your interests also help us recommend relevant developerWorks content to you.

View your My developerWorks profile

Return from help

Close [x]

Help: Remove from My dW interests

What's this?

Removing this interest does not alter your profile, but rather removes this piece of content from a list of all content for which you've indicated interest. In a future enhancement to My developerWorks, you'll be able to see a record of that content.

View your My developerWorks profile

Return from help

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=1
Zone=Web development, XML
ArticleID=304125
TutorialTitle=Create an Ajax-based IM client
publish-date=04292008
author1-email=ibmquestions@nicholaschase.com
author1-email-cc=

Table of contents

1 of 11 | Next

Next steps from IBM

Create rich Internet applications using WebSphere Portal Express Web 2.0 technologies.

Tags

Help
Use the search field to find all types of content in My developerWorks with that tag.

Use the slider bar to see more or fewer tags.

Popular tags shows the top tags for this particular content zone (for example, Java technology, Linux, WebSphere).

My tags shows your tags for this particular content zone (for example, Java technology, Linux, WebSphere).

Use the search field to find all types of content in My developerWorks with that tag. Popular tags shows the top tags for this particular content zone (for example, Java technology, Linux, WebSphere). My tags shows your tags for this particular content zone (for example, Java technology, Linux, WebSphere).

 

Dig deeper into Web development on developerWorks

Try IBM PureSystems. No charge.

IBM PureSystems on a kaleideoscope background

Experience today!

Get started with the cloud-based trial and pattern development kit.

Share this page:

  • Close [x]

Follow developerWorks:

  • Close [x]