1. WebSockets: TCP in Javascript
Don McGregor
Research Associate
MOVES Institute
Understanding global peace and conflict means understanding of human communities in the midst of and in response to change. US Joint Forces Command noted that “changes in the strategic landscape… new technologies, and the adaptation and creativity of our adversaries will alter….operations a great deal. Here too, the past can suggest much about the future – the nature of change, its impacts on human societies….”
This presentation provides an overview of the project and research methodology, progress to date and planned go-forward efforts.
2008. The Joint Operating Environment, United States Joint Forces Command Center for Joint Futures (J59).

2. Websockets
The problem: web pages were originally designed to be static and loaded once from the web server
Ask for an HTML file; receive it from the server; render the HTML in the web browser
State of the art for 1998
This doesn’t work well for highly interactive web pages. What if you’re using a web mail program, and new mail comes in? The only choice is to constantly hit the reload button

3. Interactive Web Applications
For a mail application we want live buttons and menus,
updates to the display when new mail comes in, and
other bling.

4. Economics of Web Apps
Write Javascript once, run mostly everywhere
Sort of. There are browser specific things, version issues, and so on. Welcome to the real world.
Mobile devices for “free”: tablets, phones
Simplified host deployment
Simplified upgrades, configuration management
Much faster product upgrade cycles
Deploy server side on cloud (private or public)
How many web apps do you use a day, vs how many installed desktop apps?
Facebook, webmail, calendaring, phone books, games
Still mostly use Office on desktop (though, Google Docs), and very complex apps
Maybe not Call of Duty yet, but maps, simple virtual (WebGL), constructive, etc.

5. Javascript
Javascript is a programming language that can run in a web browser page. It can add interactivity (buttons, menus) but is also a general programming language
Vendors are in an arms race for faster Javascript engines because of all the webapps using js

6. Websockets
We also want to receive updates from the server relevant to our application. (What data?)
There have been an enormous number of kludges to get around the basic design fact of web pages that are loaded from the server once
AJAX, Comet, long polling, …
They work, but they have long latency (on the order of a second or more) and are fairly complex
What’s “polling?”
Why not just have a javascript way to open a TCP socket to the server?

7. Websockets
Javascript in the web page establishes a connection to the web server, requests that a TCP socket be opened
After the connection is established, send & receive over the always-open socket
W3C handles the standard for the API, IETF for the underlying protocol negotiation
Avoid polling and resulting long latency

8. Websockets
Details: the web page starts out establishing a TCP socket to the web server to send HTTP
The web server recognizes the client is requesting an upgrade to a websocket, and repurposes it. Afterwards it’s used as a websocket
This means we need a server that recognizes this upgrade request. I’ve provided that for you
But in the end, it’s a TCP socket that can be seen with “netstat –an”

9. Architecture IE Page Firefox Page Safari Mobile Page
Websocket (full duplex,
bidirectional TCP socket
with Javascript API)
Web Server & Websocket Server

10. Architecture
A web page loads and then executes some javascript. The javascript opens a TCP socket to the server.
The page sends a message to the server, and the server repeats it to the other pages
The page receives the message and does something with it, such as update an entity location

11. Networked Virtual Environments
We also have WebGL, which you’ve seen in the graphics class
We have a programming language, 3D, and networking, so we can create a networked virtual environment entirely inside a web page
Can also use Google Maps, OpenStreetMap, Javascript 2D, mashup with other web applications, ….

12. Javascript
Javascript (in the web page): create a Websocket object, point it at the server, override the relevant methods
var websocket;
if(window.WebSocket)
websocket = new WebSocket(SERVER_URL);
else if (Window.MozWebSocket)
websocket = new MozWebSocket(SERVER_URL);
else alert(“This web browser does not support web sockets”);
// Attach functions to the the web socket for various events
websocket.onopen = function(evt){console.log("websocket onopen");};
websocket.onclose = function(evt){console.log("websocket close")};
websocket.onerror = function(evt){console.log("websocket error")};
websocket.onconnect = function(evt){console.log("websocket connect");};
websocket.onmessage = function(evt){console.log("Websocket message from server:", evt)};

13. Javascript In what format should we send messages?
JSON works, easy to use, not necessarily easy to be interoperable
Standardized binary messages can be sent, such as DIS (more on this later)
It’s entirely plausible to make up your own ad hoc protocol for class work and network any 3D scene you did in the graphics class

14. Server Side
How do we get this to work on the server side? We need a web server that can accept websocket requests (much like the ServerSocket in Java) and that can serve content
Provided for you. Java program that uses Jetty, a Java-based web server framework
See
Open project in Netbeans, run. It starts a web server on port 8282, serves files from the “content” directory

15. JSON Repeater Open Javascript Console to see output
index.html file in contents directory

16. Code Note one section of code
var SERVER_WEBSOCKET_URL = “ws://localhost:8282”
websocket = new WebSocket(SERVER_WEBSOCKET_URL);
What does “localhost” refer to? What happens when the HTML page is downloaded to your host and run? What host does it try to connect to?

17. Code: Async
websocket = new WebSocket(URL); and then calling send() in the next line will probably fail
After creation the websocket takes some time to finish creation. It’s not a finished object until the onconnect function fires.
You should probably use something like
window.setInterval(myFunction, timeInMs); to try to send after some period of time

18. Server The server is straightforward:
Accept connections from clients, maintain list of connections
Relay messages between clients
Act as a web server for html, javascript, image files
Potentially it can do a lot more, such as filtering on the server side

19. What Format for Messages?
Text is a good format for sending things back and forth. What should the text look like?
JSON is a popular format that makes it easy to convert from a text string to a Javascript object

20. Javascript Object var anObject = new Object(); // or = {}
anObject.myProperty = “This is my property”
anObject.value=17;
Created a Javascript object with two properties. We can convert the js
object to a string with
var jsonString = JSON.stringify(anObject);
And get back
‘{“myProperty”:”This is my property”, “value”:17}’
And use this value to send across a websocket. Likewise we can convert
It back to a js object with
var myJSObject = JSON.parse(jsonString);

21. Summary
We can do a close analog of TCP sockets in Javascript, using a hub-and-spoke architecture
This has significant implications for DoD M&S
Mobile devices
Simplified configuration control
Integration with other web applications
Still some problems. The technology is there, the implementation is not