HTML5 Canvas [218]
There is a nifty admin tool for ElectroServer that allows you to view and modify all the supported protocols and ports, as well as many other cool features of the socket server. In the /admin directory of the install folder, you should find both an installer for an Adobe AIR admin tool (named something like es5-airadmin-5.0.0.air), and a /webadmin directory with an HTML file named webadmin.html. Either one will work for this exercise.
NOTE
In order for the admin console to display properly, the server needs to be started.
When you launch the admin tool, you will be asked to supply a username and password. The default is administrator and password, unless you changed them upon installation.
Once you log in, click the Server Management button on the top menu, and then the Gateways option from the side menu. You should see a screen that looks similar to Figure 11-4.
Figure 11-4. ElectroServer ports and protocols
This screen shows you the port settings for each protocol that ElectroServer supports. For the JavaScript API, we are most interested in the BinaryHTTP setting, which you can see is set to port 8989.
The JavaScript API
Besides starting ElectroServer, you will also need the JavaScript API so you can begin building Canvas apps that connect to the server. You should be able to find the JavaScript API in the /apis/client/javascript directory of the folder in which you installed ElectroServer (this name might change in the final version). The API should be named ElectroServer-5-Client-JavaScript.js.
The Basic Architecture of a Socket-Server Application
Now that you have ElectroServer ready to go, and you have the JavaScript API, it is time to learn a bit about how socket-server-based multiplayer/multiuser applications are designed. Using a socket server means you are creating an application that relies on a client for input from a user, as well as relying on a server to distribute that input to other users who are connected to the first user.
A good example of this is a chat application. Most chat applications require a user to enter a room (a logical space in which people are “chatting,” i.e., exchanging messages), where that user can see the messages of other people in the same virtual space. In that room, the client is “connected” to those other users. However, it is usually not a direct connection (e.g., peer-to-peer), but instead a connection through a port to a socket server.
The socket server acts as the traffic cop for the chat messages. It listens on a port (in our case, 8989) for messages coming in from the clients. Those messages need to be formatted in a way that the server can understand so it can process them. The JavaScript API we will use performs this formatting for our client applications.
When the socket server receives a message from the client, it routes the various text messages sent by each client back out to the other clients in the room. However, it can also do much more by using server-side processing, such as hold the list of current messages, so people entering the room while the chat is ongoing can see what has been said previously, scan chat messages for swear words, award points to users for their input, or anything else you can dream up.
When the server finally processes the message and sends it back, the client then processes that message. In the case of the chat, that processing usually involves displaying the message on the canvas.
The Basic Architecture of an ElectroServer Application
ElectroServer acts very much like the socket-server application we described in the previous section. It listens on specified ports for different protocols; when messages arrive, they are routed back to the connected clients.
However, ElectroServer has some specific features that we should discuss. Some of these exist on other socket-server platforms, while some don’t. However, much of this discussion will still be applicable to other socket servers once they make JavaScript APIs available.
Client
The client for an ElectroServer application