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.

First, let’s talk a bit about a few more variables we have created in our canvasApp() function, which we must scope to the rest of the chat application. The statusMessages array will hold a set of messages that we want to keep about the connection to ElectroServer. We will display these in a box on the right side of the canvas. The chatMessages array holds all the messages users have sent into the chat room. The username variable holds the name of the user who is running the Canvas application, and _room is a reference to the room object that user has joined:

var statusMessages = new Array();

var chatMessages = new Array();

var username;

var _room;

The HTML page holds a

In canvasApp(), we set up an event listener for when the user clicks the sendChat button. When a click event occurs, the function sendMessage handles the event:

var formElement = document.getElementById("sendChat");

formElement.addEventListener('click', sendMessage, false);

The sendMessage() function is one of the most important functions in this application. This is where we create a couple very critical objects for communicating with ElectroServer. The first is a PublicMessageRequest, which is one of several types we can make to the ElectroServer socket server. Others include a PrivateMessageRequest and a PluginMessageRequest. A PublicMessageRequest is a message that will be sent to everyone in the room. We send that data using an EsObject, which is native to the ElectroServer API. It allows you to create and access ad hoc data elements for any type of information you want to send to other users in the same room.

NOTE

For a full discussion of EsObject and ElectroServer events, see the ElectroServer documentation. It is installed with the server on your local machine in [your install folder]//documentation/html/index.html *.

For this simple chat example, we want to send the chat message the user typed and submitted. To do this, we will use the setString() method of EsObject. This method takes two parameters: the text you want to send, and an identifier you can use to access the text. We also set another element named type, which will tell us what kind