How To Create Your Chat Client

This page shows you how to create your own asynchronous chat client. When you see code below, the pink shows what you should not change, the yellow shows what you may change, and the green shows what you should definitely change.

Technical Information

To enable the girls to create a chat feature on their websites, you will have to set up a Chat client.

What you need:

This website http://www.php.net provides useful information about PHP and how to install it.

PHP

To make your chat client work, you will use a web technology called PHP. PHP is a Hypertext Preprocessor, a server-side program that changes web pages according to instructions in the code before sending them to your browser. This allows your web page to be different each time you refresh, showing what others write into their own chat clients. This is unlike a regular HTML page, which is the same each time you refresh.

You don't need to worry too much about PHP or exactly how it works. Engineers at SRI International have written several functions in PHP for you. Having parts of your code written by other engineers is a common practice in engineering. Yes, you are doing work that engineers do!

To make the PHP work on your page, you need to do two things.

  1. Name your file so it ends with .php. Our example file is test_client.php.
  2. Add the line below to the very top of your page. Just copy and paste it just as it appears here.
    Technical Note: This expects the chat client to be at a particular folder level on the server. If it is not, this will not work unless you change the path below appropriately.)

    <?php require_once('../../async_chat/chat_utils_inc.php'); ?>

Chat Client Parts

The chat client has two main parts: the chat display and the input form.

Chat Display

The chat display itself has two pieces: 1) the chat lines that girls in the class have already said and 2) the "Refresh" button. Clicking the "Refresh" button updates the lines of the chat to show you the most recent things that other girls have said. Remember that an HTML page usually does not change unless you click something, such as "Reload" or a new link. Example of Chat Display

Melissa: hi
Zaz: hello, melissa
Melissa: my name is blue!
Zaz: mine was red but now it is purple
Melissa: i am still blue
 
To make the chat lines and the "Refresh" button work, they will have to be inside an html form. This form points to your own chat page (ours is called test_client.php). The name of your "Refresh" button should be "refresh". Finally, to make your chat lines display, you will call a PHP function called print_chat. You will need to tell this function how many lines you want to show at once, which must be at least 1. Our example uses 5. Code for Chat Display

<form method="post" action="test_client.php">
  <?php print_chat(5); ?>
  <input type="submit" name="refresh" value="Refresh">
</form>

Input Form

The input form has four parts:
  1. the "name" text field, which tells the chat what your name is
  2. the "color" text field, which tells the chat what color to make your name
  3. the "text" text field, which is where you type what you want to say
  4. the "Say" button, which you click when you are ready to send what you want to say to everyone else
 Example of Input Form

Name:
Color:
 
All of the parts listed above are also going to be in a form that is just like the one you made for chat display. The PHP functions you see in the name and color text fields let the page remember the name and color you entered last time. Code for Input Form

<form method="post" action="test_client.php">
  <strong>Name:</strong>
  <input type="text" name="name" <?php print_value('name') ?>><br />
  <strong>Color:</strong>
  <input type="text" name="color" <?php print_value('color') ?>><br />
  <input type="text" name="text" size="60">
  <input type="submit" name="say" value="Say">
</form>

A Few Special Rules

There are a few special rules you need to remember or your chat will not work:

  1. For the text (name, color, etc.) fields and the buttons ("Say", "Refresh") do not change the word after name=". (For example, name="Say").
  2. You must have two separate forms, one for chat display and one for the input form.

Making Your Page Special

As long as you follow the rules and use the pieces of code that appear above, you can make your page look however you like. Just be sure to not change anything pink and to read the instructions carefully. For example, you can change the background of your page to be a different color by changing <body> to <body bgcolor="lightblue">.