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). mcgredo@nps.edu

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

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.

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.

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

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?

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

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”

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

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

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, ….

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)};

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

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 https://github.com/mcgredonps/JSONWebsocketRepeater Open project in Netbeans, run. It starts a web server on port 8282, serves files from the “content” directory

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

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?

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

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

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

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);

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