Simple AJAX (with JSON) Chat Application for ASP 3.0

This page is a mirrored copy of an article originally posted on the LShift blog; see the archive index here.

Tue, 11 October 2005

The code in this package (not only a snapshot, but also a darcs repository) was originally developed for two reasons: for use in teaching a course in Javascript as part of a guest lecture series for the University of Westminster, and as a consequence of my personal interest in experimenting with modern client-server programming techniques.

It’s a very, very simple chat application using XmlHttpRequest to communicate in an AJAX style with an ASP 3.0 server that processes JSON-RPC-like requests and manages a simple shared database.

The reason ASP 3.0 was chosen is because it was the server-side environment in place at the University laboratories for the course I was teaching. Programming in JavaScript on both the client- and server-sides simultaneously was a pleasant experience; modern environments such as Helma have a lot going for them.

If you take a look at the code, you’ll see that I use the term “AJAJ” often: the idea is to take the core elements of AJAX, but replace the unwieldy XML with something lighter-weight and better fitted to Javascript programming. In this case, the “X” for XML is replaced by “J” for JSON, which is a lightweight data language that is particularly convenient for working with Javascript.

Code overview

The application depends on a few third-party libraries that make programming in Javascript a little more pleasant. These are the parts of the application that I wrote:

simple-chat-client.html: Contains the HTML user-interface to the service, and the basic client-side Javascript code for driving the specifics of the chat service.
chat-server/simple-chat.asp: Contains the server-side code responsible for responding to the client’s RPC requests for chat-server functionality. Does not itself present any HTML at all: it only speaks AJAJ, accepting JSON requests and replying with JSON responses.
js/ajaj.js: Implements the client side of the AJAJ RPC library, building upon json.js.
chat-server/ajaj.asp: Implements the server side of the AJAJ RPC library, building also upon json.js (in the form of json.asp). The only part of this file not authored by LShift is the contained VBScript function BinaryToString, which was written by Antonin Foller and comes from http://www.pstruh.cz.
js/console.js: A reusable Javascript DHTML evaluator. Useful for debugging and interactive development of Javascript-bearing HTML pages.
js/util.js: A collection of utilities lending, among other things, a functional-programming flavour to Javascript.
chat-server/jsondb.asp: A simple (toy) transactional database driver for ASP 3.0 using the filesystem as a data store.

The following files are mostly library code from third parties:

js/json.js, chat-server/json.asp: Almost identical files - the only difference between them is that the .asp file contains the necessary boilerplate punctuation required to fit it into an ASP 3.0 environment. Both implement JSON serialization/deserialization. The only change made to the standard json.js distribution is LShift’s addition of the “@constructor …” syntax.
js/prototype-1.4.0_pre4.js, js/scriptaculous-js-1.5_pre4: a collection of convenient Javascript utilities for network and user-interface programming, from http://prototype.conio.net/ and http://script.aculo.us/ respectively.

Comments

On 20 December, 2005 at 10:18 pm, kais wrote:

Hi,

I want to look your “Simple AJAX (with JSON) Chat Application for ASP 3.0″ ,and i’m looking for a zip of this application.

Thanks,

On 6 January, 2006 at 5:45 pm, tonyg wrote:

I’ve built a snapshot which you can download from here: http://www.lshift.net/~tonyg/twd-example-20060106.zip

Cheers,
Tony

On 15 January, 2006 at 8:25 am, Mark Chipman wrote:

Interesting… I’m playing with it now. I like the fact that it uses JSON and XMLHTTPRequest.

I’m currently investigating the best ways to create a chat app like you’ve done here using JSON and AJAX… however, I’m planning on a bit more functionality. Some things that I’m planning on using may include AFLAX (www.aflax.org) and Taconite libraries (find it at Sourceforge). For fluff, I’m going to use moo.fx (http://moofx.mad4milk.net/tests.html) with scriptaculous as well.

A few things that I think are interesting but not workable for me are the use of a single file as the database… however, when someone new logs in, they shouldn’t be able to see all the prior conversations… however, the old ones “could” easily be jammed into an array quickly, sorted, and removed (filtered) from the array prior to sending off the the client. By doing so, it could be possible to even make “private” conversations only shown to the recipients…. now that would be very clever.

BTW, what method are you using for pulling the data?… is it merely a timer checking every few seconds?

Again, you’ve done an interesting and unique project here. Feel free to ask me anything you want for feedback.

-Mark Chipman

On 18 January, 2006 at 1:55 pm, tonyg wrote:

Yes, it’s a StoppablePeriodicalExecuter (see the bottom of ajaj.js), which is based on prototype.js’s PeriodicalExecuter, with the addition of a means of interrupting the otherwise endless timer loop.

On 24 August, 2006 at 10:50 pm, Lisandro Puzzolo wrote:

Hi Tony!
I was searching on the web if there was someone else working on JSON-RPC and ASP3.0 and it was a nice sourprice to find your site.

I’ve been developing a proxy to make function calls from the browser to the web server (also Asp3 with javascript). The main difference between yours and mine, is that I implemented an object that lets you export almost every function, or object from the server to the client.

For example, if you have on the server this object:

var DB = {
execute: function (sql) {
return myCn.execute(sql);
}
}

function foo(bar){
return bar;
}

you may then write this:

jsonbridge.registerObject(”DB”,DB);
jsonbridge.registerObject(”foo”,foo);

and then objects/functions are exposed to the client.
Then from the client I can call them this way:

serviceProxy.DB.execute(”SELECT * FROM tUsers”);

serviceProxy.foo (”hello world” , {onComplete:function(result) {alert(result) }} );

It allows me to call the functions syncronously (like the first example) or asyncronously (like the second one) , stop the calls, or allow one call per function, cache the results ( in a Response.expires similar way) , transform recordset results to JSON results, etc.

I’m developing it as long as I need functionalities, so I didn’t make any manual or demos. I’m using it on my current projects. ..But If you are interested I could manage some way to show you some examples.

Best regards (and sorry for my bad english)

On 29 October, 2009 at 5:22 pm, lundstudio wrote:

Curious if you have a running online example to test? Thanks.