HTML and CSS Reference
In-Depth Information
Creating a Chat Application with ElectroServer
As an example, we are going to create a single chat application using the ElectroServer
JavaScript API. Users will submit a chat message through an HTML form, and the displayed
chat will be in HTML5 Canvas. We are also going to create and display some messages from
ElectroServer so that you can see the status of the connection to the server.
Establishing a connection to ElectroServer
First, a client application is written so that it includes the ElectroServer JavaScript API:
< script src = "ElectroServer-5-Client-JavaScript.js" >< /script>
The client application makes a connection to ElectroServer running on a server at a specific
URL, listening on a specific port, using a specific protocol. For our examples, this will be
localhost , 8989 , and BinaryHTTP , respectively.
We need to use these values to make a connection from the client to the server. We do this by
first creating an instance of the ElectroServer object and then calling its methods. We start
bycreatinganinstanceofanElectroServerserverconnectionnamed server .Wethenconfig-
ure a new variable named availableConnection with the previous properties we described,
and then we add it to the server variable with a call to the method addAvailableConnec-
tion() . We will create all of this code inside our canvasApp() function:
var server = new
new ElectroServer . Server ( "server1" );
var availableConnection = new
new ElectroServer . AvailableConnection
( "localhost" , 8989 , ElectroServer . TransportType . BinaryHTTP );
server . addAvailableConnection ( availableConnection );
Nowweneedtousethe server variablewejustconfiguredtoestablishaconnectionto Elec-
troServer .Wedothisbysettinganewvariable, es ,asaninstanceoftheclass ElectroServ-
er . 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
new ElectroServer ();
es . initialize ();
es . engine . addServer ( server );
We are almost ready to try to connect to ElectroServer. However, first 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: ConnectionRe-
Search WWH ::

Custom Search