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:
<form>
<input id="textBox" placeholder="your text" />
<input type="button" id ="sendChat" value="Send"/>
</form>
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
