HTML and CSS Reference
In-Depth Information
may send all sorts of messages and need a way to identify what they are so you can
process them.
Once we have configured our
PublicMessageEvent
with the
roomId
, the
zoneId
, and the
EsObject
, we call
es.engine.send(pmr)
to send it to the rest of the room:
function sendMessage(event) {
var formElement = document.getElementById("textBox");
var pmr = new PublicMessageRequest();
pmr.message = "";
pmr.roomId = _room.id;
pmr.zoneId = _room.zoneId;
var esob = new ElectroServer.EsObject();
esob.setString("message", formElement.value);
esob.setString("type","chatmessage");
pmr.esObject = esob;
es.engine.send(pmr);
statusMessages.push("message sent")
}
Notice that we did not print the user's chat message to the canvas when it was sub-
mitted. Instead, we will wait for the
PublicMessageEvent
to return from
Electro
Server
, and then handle it like all the other chats. This keeps the interface clean, while
preserving a create event/handle event processing model across the entire application.
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
they can receive and process the message; we have created the
onPublicMessageEvent
handler for this purpose. This function is very simple. It checks the
type EsObject
variable we set to see 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.get
String("message")
) into the
chatMessages
array. This is what will be displayed on the
canvas:
function onPublicMessageEvent(event) {
var esob = event.esObject;
statusMessages.push("message received")
if (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()
. For both the
statusMessages
and
chatMessages
arrays,
we need to display the “current”
22
messages (if we have
22
), and start them at the
y
position of
15
pixels. We only display the last
22
messages so both the chat and the
status messages will appear to scroll up the screen as more chatting and status messages
are generated:
