HTML and CSS Reference
In-Depth Information
// Clear the chat window so it can be reused for another client
function resetClient(i) {
// Clear the client's name
var o=document.getElementById("client"+i);
// Remove the chat messages
var o2=document.getElementById("chat"+i);
while (o2.hasChildNodes()) {
Just like the earlier web page that you implemented, the onload event calls the connect() function,
which wires up the onopen , onmessage , and onclose event handlers. In this case, the onopen event handler
sends the agent sign-on message to the server. The onmessage event handler calls the displayMsg() function.
This has special logic to interpret the message. The server will send the client's name when the client is
assigned and will send a message when the client has disconnected. These special cases are processed by the
displayClientName() and resetClient() functions, respectively. For all other messages, the first character is
expected to be 1-4, indicating which window this is for. Using this, the appropriate div element is obtained and
the message is added to it. The message is prefixed with the “Client:” text.
The send() function that is called when the Send button is clicked takes a parameter that indicates which
window is sending the message. It uses this to get the appropriate input element and also to prefix the message
so the server will know which client this is for. It also displays the text in the div element after prefixing it with the
“Me:” text. This is done so the chat window contains both incoming and outgoing messages.
The resetClient() function changes the client name back to “unassigned”. It also iterates through the div ,
removing all of the p tags that were added.
Testing the Agent Application
Before you complete the development, let's test the form to make sure it looks OK. In the Solution Explorer,
right-click the Agent project and select the Debug “Start new instance” links. This should launch the Chrome
browser and display the home page. Click the Register link at the top of the page and enter your name, e-mail
address, and a password as shown in Figure 13-12 .
Search WWH ::

Custom Search