Further Explorations - HTML5 Canvas - page 590

When ElectroServer responds from the LoginRequest , it is time to join a zone and a
room . Recall that any user connected to ElectroServer needs to belong to a room , and
every room belongs to a zone . Therefore, we need to make a user belong to one of each,
which we accomplish with a CreateRoomRequest() . We set the zoneName property to
TestZoneChat , and the roomName property to TestRoomChat . If either of these do not al-
ready exist, they will be created by the server. If they do exist, the user will be added
to them. We then send the message to ElectroServer:
function onLoginResponse(event) {
statusMessages.push("Login Successful?: "+event.successful);
username = event.userName;
var crr = new CreateRoomRequest();
crr.zoneName = "TestZoneChat";
crr.roomName = "TestRoomChat";
es.engine.send(crr);
}
We still need to wait for a couple responses from ElectroServer events that come back
through the API via port 8989. We know we have to join a zone , and we handle the
event with the function onJoinZoneEvent() , but we don't need to do anything with it:
function onJoinZoneEvent(event) {
statusMessages.push("joined a zone");
}
The most important event we are waiting to handle is JoinRoomEvent . When we receive
this event, we know that we have joined both a zone and a room , and the application is
ready to run. For the chat application, this means the user can start typing and sending
messages. First, we set the _room variable equal to the Room object, which was returned
by the event from ElectroServer . We will use this variable for our further communi-
cations with ElectroServer . The other thing we do in this function is set an HTML
<div> with the id of inputForm , which is made visible by changing its style. The inputForm
<div> is invisible when the page loads. We do this so the user won't send chat messages
before the connection to ElectroServer is established. Now that everything is ready to
go, we display the inputForm <div> so chatting can start:
function onJoinRoomEvent(event) {
statusMessages.push("joined a room");
_room = es.managerHelper.zoneManager.zoneById
(event.zoneId).roomById(event.roomId);
var formElement = document.getElementById("inputForm");
formElement.setAttribute("style", "display:true");
}
Creating the chat functionality
Now that we have established a connection to ElectroServer and joined a zone and a
room, the chat application can start.