HTML5 Canvas [222]
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 submitted. Instead, we will wait for the PublicMessageEvent to return from ElectroServer, 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.getString("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:
var starty = 15;
var maxMessages = 22;
If the array is larger than maxMessages, we display only the latest 22. To find those messages, we set a new variable named starti to the length of the statusMessages array, subtracted by the value in maxMessages. This gives us the index into the array of the first message we want to display. We do the exact same thing for the chatMessages array:
//status box
context.strokeStyle = '#000000';
context.strokeRect(345, 10, 145, 285);
var starti = 0;
if (statusMessages.length > maxMessages) {
starti = (statusMessages.length) - maxMessages;
}
for (var i = starti;i< statusMessages.length;i++) {
context.fillText (statusMessages[i], 350, starty );
starty+=12;
//chat box
context.strokeStyle = '#000000';
context.strokeRect(10, 10, 335, 285);
starti = 0;
lastMessage = chatMessages.length-1;
if (chatMessages.length > maxMessages) {
starti = (chatMessages.length) - maxMessages;
}
starty = 15;
for (var i = starti;i< chatMessages.length;i++) {
context.fillText (chatMessages[i], 10, starty );
starty+=12;
}
}
That’s it! We’ve finished developing our multiuser chat application.
Testing the Application in Google Chrome
To test the current ElectroServer JavaScript API, you need to start Google Chrome with web security disabled. The method of doing this varies by OS, but on Mac OS X, you can open a Terminal session and execute the following command (which will open Chrome if you have it in your Applications folder):
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --disable-web-security
On a Windows PC, input a command similar to this from a command prompt or from a .bat file:
"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe"