HTML and CSS Reference
In-Depth Information
function
function
onJoinRoomEvent
(
event
) {
statusMessages
.
push
(
"joined a room"
);
_room
=
es
.
managerHelper
.
zoneManager
.
zoneById
(
event
.
zoneId
).
roomById
(
event
.
roomId
);
var
var
formElement
=
document
.
getElementById
(
"inputForm"
);
formElement
.
setAttribute
(
"style"
,
"display:true"
);
}
Creating the chat functionality
NowthatwehaveestablishedaconnectiontoElectroServerandjoinedazoneandaroom,the
chat application can start.
First,let'stalkabitaboutafewmorevariableswehavecreatedinour
canvasApp()
function,
which we must scope to the rest of the chat application. The
statusMessages
array will hold
a set of messages that we want to keep about the connection to
ElectroServer
. We will dis-
playtheseinaboxontherightsideofthecanvas.The
chatMessages
arrayholdsallthemes-
sages 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
var
statusMessages
=
new
new
Array
();
var
var
chatMessages
=
new
new
Array
();
var
var
username
;
var
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>
<form>
<input
<input id=
"textBox"
placeholder=
"your text"
//>
<input
<input type=
"button"
id =
"sendChat"
value=
"Send"
//>
</form>
</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
var
formElement
=
document
.
getElementById
(
"sendChat"
);
formElement
.
addEventListener
(
'click'
,
sendMessage
,
false
false
);
The
sendMessage()
functionisoneofthemostimportantfunctionsinthisapplication.Thisis
wherewecreateacoupleverycriticalobjectsforcommunicatingwithElectroServer.Thefirst
is a
PublicMessageRequest
, which is one of several types we can make to the ElectroServer