Further Explorations - HTML5 Canvas - page 589

We are almost ready to try to connect to ElectroServer. First though, we need to create
some event handlers for ElectroServer events. Remember when we told you that
all the communication with ElectroServer is done through creating and listening
for events? This is where that process begins. We need to listen for the following events:
ConnectionResponse , LoginResponse , JoinRoomEvent , JoinZoneEvent , ConnectionAttemp
tResponse , and PublicMessageEvent :
es.engine.addEventListener(MessageType.ConnectionResponse, onConnectionResponse);
es.engine.addEventListener(MessageType.LoginResponse, onLoginResponse);
es.engine.addEventListener(MessageType.JoinRoomEvent, onJoinRoomEvent);
es.engine.addEventListener(MessageType.JoinZoneEvent, onJoinZoneEvent);
es.engine.addEventListener(MessageType.ConnectionAttemptResponse,
onConnectionAttemptResponse);
es.engine.addEventListener(MessageType.PublicMessageEvent, onPublicMessageEvent);
Finally, once we have everything ready, we call the connect method of the Electro
Server object, and wait for events to be handled by the event listener functions we have
just established:
es.engine.connect();
When the ElectroServer API object tries to connect to an ElectroServer server, a
ConnectionAttemptResponse event will be fired back to the client from the server. We
handle that event with the onConnectionAttemptResponse() event handler. For our ap-
plication, we don't do anything with this event, except create a status message for it
that we will display. The statusMessages variable is an array of messages that we keep
around to display back as debug information for our chat application. We will discuss
this briefly in the next section:
function onConnectionAttemptResponse(event) {
statusMessages.push("connection attempt response!!");
}
At this point, the client waits for a ConnectionResponse event to be sent back from the
ElectroServer server. When the client application receives a ConnectionResponse event,
it handles it with the onConnectionResponse() event handler. Once the connection is
established, the client then attempts to log on to the server. To make a logon attempt,
we need a username. We will create a random username, but it could come from an
account on a web server, a form field or cookie, Facebook Connect, or any other location
or service you might have available.
After we have a username, we create a LoginRequest() object, set the userName property,
and then call the send() method of the es.engine object. This is how we will send all
messages to ElectroServer from this point forward:
function onConnectionResponse(event) {
statusMessages.push("Connect Successful?: "+event.successful);
var r = new LoginRequest();
r.userName = "CanvasUser_" + Math.floor(Math.random() * 1000);
es.engine.send(r);
}