HTML5 Canvas [220]
Now, we need to use the server variable we just configured to establish a connection to ElectroServer. We do this by setting a new variable, es, as an instance of the class ElectroServer. We then call its initialize() method and add the server we just configured to the es object by calling the addServer() method of the ElectroServer server engine property:
var es = new ElectroServer();
es.initialize();
es.engine.addServer(server);
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, 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, once 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 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 application, 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);
}
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 already 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