HTML5 Canvas, 2nd Edition

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 by creating an instance of an ElectroServer server connection named server. We then configure 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 addAvailableConnection(). We will create all of this code inside our canvasApp() function:

var server = new ElectroServer.Server("server1");
var availableConnection = new ElectroServer.AvailableConnection
    ("localhost", 8989, ElectroServer.TransportType