A Graphical Client for the Chat Server


The client is graphical in the sense that when the user enter a room, a picture of it is displayed, along with the occupants and their names. Have a look at a visit to the 'tv-room' (10K in size; resolution reduced). A clearer version of the same picture is available but it is 25K in size.

When a person speaks, a speech bubble appears above their head in the picture (although the actual text appears in another window). A user can change their body form (e.g. become a 'hacker', 'dandy', 'woof') and their mood (ok, happy, sad), and these changes are reflected in the picture.

The graphical component supplements the textual output (11K) from the client program, which accepts user input and prints the server's responses.

This client was developed in four stages.


Stage One

The first stage involved the writing of a basic client program (7K), which allowed us to concentrate on networking features without considering too many Chat-specific issues.


Stage Two

The next stage augmented the Chat server (50K) to output visualisation information. This information is not in the form of graphics, which would take too long to send over a network, especially when the images are changing so frequently. Instead, the textual output from Chat was extended.


Stage Three

The third stage modified the client of stage 1 to recognise the visualisation cues coming from the server. The new client (18K) stores these in suitable room and visitor data structures. However, the software does not display the information graphically, in order to simplify the coding task.


Stage Four

The final stage added the necessary graphical features to the client (30K), which were coded with the gd graphics library. Whenever some aspect of the room changes, these functions rebuild a GIF file holding the room picture. For example, when a person enters or leaves the room, the file is regenerated to mirror the new situation. Central to this approach is the UNIX-based xv image display tool, which can be set to automatically reload an image when its file is updated.

The graphical chat client uses 7 rooms: foyer, garden, road, beach, mountain, tv-room, and bedroom. It knows 7 body forms (newbie, dandy, hacker, manager, bobbie, woof, and grad), each with three moods (ok, happy, sad). The code is designed to accept other rooms, forms, and moods easily. A tarred, gzipped directory of all of these images (and a speech bubble) is available, but it is about 140K in size.

My thanks to Sureerat Parnrong who designed and drew the woof (3K) and grad (3K) figures, and the tv-room (11K) and bedroom (11K). The other images were taken from the clip art library of Microsoft Powerpoint. For that reason, they should not be used as part of any commercial product without the agreement of the owners.

If you plan to draw your own figures, then you may want a copy of gtrans.c (1K). It makes any yellow in a specified GIF file transparent. This can be used to make the yellow background of a chat figure transparent.


Back to Web Programming