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
var
server
=
new
new
ElectroServer
.
Server
(
"server1"
);
var
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
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-
