Further Explorations - HTML5 Canvas - page 898

sponse , LoginResponse , JoinRoomEvent , JoinZoneEvent , ConnectionAttemptResponse ,
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, when we have everything ready, we call the connect method of the ElectroServer
object and wait for events to be handled by the event listener functions we have just estab-
lished:

es . engine . connect ();

When the ElectroServer API object tries to connect to an ElectroServer server, a Con-
nectionAttemptResponse event will be fired back to the client from the server. We handle
thateventwiththe onConnectionAttemptResponse() eventhandler.Forourapplication,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 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. When the connection is estab-
lished, 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 mes-
sages to ElectroServer from this point forward:

function function onConnectionResponse ( event ) {

statusMessages . push ( "Connect Successful?: " + event . successful );
var var r = new new LoginRequest ();

r . userName = "CanvasUser_" + Math . floor ( Math . random () * 1000 );