HTML and CSS Reference
In-Depth Information
First, let's talk a bit about a few more variables we have created in our canvasApp()
function, which we must scope to the rest of the chat application. The status
Messages array will hold a set of messages that we want to keep about the connection
to ElectroServer . We will display these in a box on the right side of the canvas. The
chatMessages array holds all the messages users have sent into the chat room. The
username variable holds the name of the user who is running the Canvas application,
and _room is a reference to the room object that user has joined:
var statusMessages = new Array();
var chatMessages = new Array();
var username;
var _room;
The HTML page holds a <form> that we will use to collect the chat messages from the
user. It contains a text box for the user to type into (the id of textBox ), and a button
with the id of sendChat . This is the same form that was invisible until we received the
JoinRoomEvent event:
<input id="textBox" placeholder="your text" />
<input type="button" id ="sendChat" value="Send"/>
In canvasApp() , we set up an event listener for when the user clicks the sendChat button.
When a click event occurs, the function sendMessage handles the event:
var formElement = document.getElementById("sendChat");
formElement.addEventListener('click', sendMessage, false);
The sendMessage() function is one of the most important functions in this application.
This is where we create a couple very critical objects for communicating with Electro-
Server. The first is a PublicMessageRequest , which is one of several types we can
make to the ElectroServer socket server. Others include a PrivateMessageRequest and
a PluginMessageRequest . A PublicMessageRequest is a message that will be sent to ev-
eryone in the room. We send that data using an EsObject , which is native to the Elec-
troServer API. It allows you to create and access ad hoc data elements for any type of
information you want to send to other users in the same room.
For a full discussion of EsObject and ElectroServer events, see the
ElectroServer documentation. It is installed with the server on your local
machine in [your install folder] //documentation/html/index.html * .
For this simple chat example, we want to send the chat message the user typed and
submitted. To do this, we will use the setString() method of EsObject . This method
takes two parameters: the text you want to send, and an identifier you can use to access
the text. We also set another element named type , which will tell us what kind of
message we are sending. We do this because in a more complicated application, you
Search WWH ::

Custom Search