HTML and CSS Reference
In-Depth Information
After the socket server processes the chat message, it is broadcast out to all the users in the
room. All the users must create an event handler for a
PublicMessageEvent
so that they can
receive and process the message; we have created the
onPublicMessageEvent
handler for
thispurpose.Thisfunctionisverysimple.Itchecksthe
type EsObject
variablewesettosee
whether it is a
chatmessage
. If so, it pushes a string that includes the user who submitted the
message (
event.userName
) and the message itself (
esob.getString("message")
) into the
chatMessages
array. This is what will be displayed on the canvas:
function
function
onPublicMessageEvent
(
event
) {
var
var
esob
=
event
.
esObject
;
statusMessages
.
push
(
"message received"
);
iif
(
esob
.
getString
(
"type"
)
==
"chatmessage"
) {
chatMessages
.
push
(
event
.
userName
+
":"
+
esob
.
getString
(
"message"
));
}
}
Now all that remains is to display the messages that we have collected. We do this (where
else?)in
drawScreen()
.Forboththe
statusMessages
and
chatMessages
arrays,weneedto
displaythe“current”
22
messages(ifwehave
22
)andstartthematthe
y
positionof
15
pixels.
Wedisplay onlythelast
22
messages sothat boththechat andthestatus messages will appear
to scroll up the screen as more chatting and status messages are generated:
var
var
starty
=
15
;
var
var
maxMessages
=
22
;
Ifthearrayislargerthan
maxMessages
,wedisplay onlythelatest
22
.Tofindthosemessages,
we set a new variable named
starti
to the length of the
statusMessages
array, subtracted
by the value in
maxMessages
. This gives us the index into the array of the first message we
want to display. We do the exact same thing for the
chatMessages
array:
//status box
context
.
strokeStyle
=
'#000000'
;
context
.
strokeRect
(
345
,
10
,
145
,
285
);
var
var
starti
=
0
;
iif
(
statusMessages
.
length
>
maxMessages
) {
starti
=
(
statusMessages
.
length
)
-
maxMessages
;
}
for
for
(
var
var
i
=
starti
;
i
<
statusMessages
.
length
;
i
++
) {
context
.
fillText
(
statusMessages
[
i
],
350
,
starty
);
starty
+=
12
;
