HTML and CSS Reference
In-Depth Information
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
chat application can start.
First,let'stalkabitaboutafewmorevariableswehavecreatedinour 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 dis-
playtheseinaboxontherightsideofthecanvas.The chatMessages arrayholdsallthemes-
sages 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
new Array ();
var chatMessages = new
new Array ();
var username ;
var _room ;
The HTML page holds a <form> that we will use to collect the chat messages from the user.
It contains a text box for the user to type into (the id of textBox ), and a button with the id
of sendChat . This is the same form that was invisible until we received the JoinRoomEvent
<input id= "textBox" placeholder= "your text" //>
<input type= "button" id = "sendChat" value= "Send" //>
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
false );
The sendMessage() functionisoneofthemostimportantfunctionsinthisapplication.Thisis
is a PublicMessageRequest , which is one of several types we can make to the ElectroServer
Search WWH ::

Custom Search