Implement program flow - Programming in HTML5 with JavaScript and CSS3 - page 161

TABLE 2-9 Possible values of the WebSocket readyState

Value Description

OPEN The connection is open.

CONNECTING The connection is in the process of connecting and not ready for use yet. This is the

default value.

CLOSING The connection is in the process of being closed.

CLOSED The connection is closed.

After confirming that the connection is in the appropriate state for sending a message, the
send method is called with the text that the user entered into the chat application. Also, so
that each user can see that his/her message is indeed part of the chat, the message is added
to the chat window.
When other users of the chat application send messages into the system, the server calls
the event handler specified in onmessage . The onmessage event receives a message parame-
ter with the data property that contains the message. This message is extracted and displayed
in the chat window for users to see.
When finished with a chat session, a user should be able to exit cleanly. This is accom-
plished by calling the close method of the WebSocket object. The close method can be called
with no parameters. It also allows the use of two optional parameters. A numerical code and a
reason can be provided but isn't mandatory. In this example, the connection is closed with no
parameters. When a connection is closed, the onclose event handler is raised:

disconnectButton.onclick = function () {
wsConnection.close();
}
wsConnection.onclose = function () {
//write the connection has been closed.
NewLine();
chatBox.value = chatBox.value + "System: Connection has been closed.";
}

When the user clicks the close button, the close method is called. Then, the subsequent
call to the onclose event handler is implemented so that a message can be provided to the
user that the connection has indeed been closed.

Making webpages dynamic with jQuery and AJAX
So far throughout the topic, you've seen some great ways to make webpages dynamic by
using JavaScript. JavaScript is the language that the webpage browser understands. In some
cases, using plain JavaScript or the standard JavaScript library available in the browser can be
cumbersome. This is where jQuery can be helpful. jQuery is a JavaScript library that special-
izes in working with the DOM to make webpages dynamic.