A New Interface Between Smart Device and Web using HTML5 WebSocket and QR-Code

Ikwhan Chang Department of Computer Science and Engineering

Chung-Ang University Seoul, South Korea

Ikwhan.chang@gmail.com

Abstract—In the era of smart device, there are only few interactions between smart device and Web on desktop. For Web browsing, the action of smart device is more diverse than original interface of the desktop. For example, we can touch or swipe via mobile device, which are not allowed by keyboard and mouse. The main thesis question of original computer-Web interface is why we only use keyboard and mouse for Web browsing. In this thesis, I propose a new way to interface between smart device and Web on desktop, studying a HTML5 WebSocket and the optimization of back-end , making a simple remote game demo, providing a new tools for remote Web controlling via QR-Code and smart device.

I. INTRODUCTION In Sep 2014, Apple announced Apple iWatch [1], a smart

watch that can run application for check health status and more functions do. Likewise, Samsung, a massive world’s well-known mobile device manufacturing company, was also showed the newest mobile device such as Galaxy S5, Galaxy Gear Fit. Especially, Galaxy Gear Fit is focused on health-care society, collecting the owner’s information: Heartbeat or Walk Steps and of course the owner can check their mobile information like SMS, Phone, Calendar even though they cannot open their host device (in this case, iPhone). Moreover, many companies will join that competitive markets kind of wearable smart device.

In the era of high technology, most of IT companies focus on new technologies such as Cloud Computing or N-Screen, which means most of people has two or more smart devices and they do not want to make their data repeatedly for sharing in their devices so they want to OSMU (one-source multi-use) their personal data.

I focused on these new technologies. In particular, the Cloud Computing and N-Screen, especially Hybrid Application, is the optimal venue for us to accomplish my research on human-centered interface and its applications.

While I took a class since freshman, the coursework of my department carry me to study on two related skills:

1) Java Application on Socket Server 2) Android and Mobile Web Application To achieve these study goals, I first made some server-

sided Java application such as messenger or online game. So, I

was already familiar with the communication between client and server. Secondly, I made Android application based on Apache Cordova, which can be used by developing Hybrid Application. Thus, I knew how to implement mobile web as well as what is consist of HTML such as Tags, DOM, Script or CSS.

While I made my own server, I knew that there are a lot of server-sided technologies such as Apache Tomcat [2], NginX [3], Node.js [4] or Netty [5]. Since I learned Java Language, I already was familiar with Tomcat and Netty. In course of Java Programming, I tried to make web server. In my case, I made online game with Facebook OAuth login [6]. For his game, he should implement Java socket server, which provide the channel of packet between client and server. Since he spent at least two months for implementing server, I have the technology of server-sided and then I just want to make some practical case by his server-sided skills. Thus, I decided to make the I/O server using some minor server-sided technology such as NginX or NodeJS.

Currently, there is some issue about the communication between human and device. It called Human-centered Computing. At the Fluid Lab, MIT MediaLab, they conducted the ‘THAW’ projects, a novel interaction system that allows a collocated large display and small handheld devices to seamlessly work together [7]. The smartphone acts both as a physical interface and as an additional graphics layer for near-surface interaction on a computer screen.

In this thesis, I propose a new way to interface between smart device and Web. By proposing, I will demonstrate a simple soccer game that will be based on these trends. This game will be remote controlled using user’s own smart devices such as Galaxy or iPhone and they can see their game play view through web pages in their laptop or PC.

II. BACKGROUND I was worked as software engineer for ten years. Since I

have handled HTML5, JavaScript and jQuery, I decide to use these skills for frontend, as well as I want to handle the packet that included the behavior of user. By utilize the packet, I want to provide some entertaining application and thus I decide to

make remote soccer game. The game is based on HTML/JavaScript and customized Javascript Library.

I used ‘Socket.io’ [8] because Socket.io provide

WebSocket protocol to push/notification between client and server. Nowaday, the performance of websocket is very well because most of web browser provides that technology in the web standard for push/notification. Moreover, it is much faster than Polling method. [9] Also, there are just few packets since the game has just two players.

The most important thing, however, is user can REMOTE

control their game using their smart devices for playing game that will be played in web pages. The pushing notification between server and client was implemented by ‘Socket.io’, a web-socket technology of web. ‘Node.js’ is main web server. Also, the remote controller was ran on any kind of smart device (Android or iOS) since I made web page using HTML5’s Canvas and jQuery mobile, QR-Code library for jQuery. Controller is actually not a app, but mobile web.

At first time, the operating system of my bear-wearer

server(customized server) was Windows 2013 Server Enterpriser R2. But I found that there was some slow performance if I use that O/S because the performance of Socket.io and Node.js is resonated in Linux-based O/S. Since I already installed all of the server-sided software such as Nginx and MariaDB, there were huge jobs to move from Windows to Linux.

Plus, since the developer of KineticJS [10] was disappeared,

KineticJS has no more update. So, I have to use pure-HTML5 Canvas Animation rather than use KineticJS.

Server & Client Specification is as below. A. Server

• Socket.io: for push notification • NginX • Node.js + Express.js [11] : for web template • JSON [12] : data format

B. Client

• Adobe Dreamweaver CC • Adobe Edge for HTML5 web app[13] • KineticJS for Graphic Library • jQuery

C. Cooperation System

• Jenkins : Continuous Integration [14] • Github : Repository • JIRA : Issue tracker, sharing TODO [15]

D. Tools

• IntelliJ IDEA [16] • Adobe Edge

• Adobe Photoshop: for UI E. Etc

• Ngxqrctl.js: This is the NGX QR Controller, Javascript Library (jQuery Plugin). [17]

• NGXRCS (NGX Remote Control Server)

III. BODY OF PROJECT A. WebSocket [18]

Since the communication between server and client was mainly made by HTML5 WebSocket, separating parts of application such as webserver, game and controller is based on HTML5 WebSocket.

The HTML5 WebSockets specification defines an API that enables web pages to use the WebSockets protocol for two-way communication with a remote host. It introduces the WebSocket interface and defines a full-duplex communication channel that operates through a single socket over the Web. HTML5 WebSockets provide an enormous reduction in unnecessary network traffic and latency compared to the unscalable polling and long-polling solutions that were used to simulate a full-duplex connection by maintaining two connections.

HTML5 WebSockets account for network hazards such as proxies and firewalls, making streaming possible over any connection, and with the ability to support upstream and downstream communications over a single connection, HTML5 WebSockets-based applications place less burden on servers, allowing existing machines to support more concurrent connections. The following figure shows a basic WebSocket-based architecture in which browsers use a WebSocket connection for full-duplex, direct communication with remote hosts.

One of the more unique features WebSockets provide is its ability to traverse firewalls and proxies, a problem area for many applications. Comet-style applications typically employ long-polling as a rudimentary line of defense against firewalls and proxies. The technique is effective, but is not well suited for applications that have sub-500 millisecond latency or high throughput requirements. Plugin-based technologies such as Adobe Flash, also provide some level of socket support, but have long been burdened with the very proxy and firewall traversal problems that WebSockets now resolve.

A WebSocket detects the presence of a proxy server and automatically sets up a tunnel to pass through the proxy. The tunnel is established by issuing an HTTP CONNECT statement to the proxy server, which requests for the proxy server to open a TCP/IP connection to a specific host and port. Once the tunnel is set up, communication can flow unimpeded through the proxy. Since HTTP/S works in a similar fashion, secure WebSockets over SSL can leverage the same HTTP CONNECT technique. Note that WebSockets are just beginning to be supported by modern browsers (Chrome now supports WebSockets natively). However, backward-

compatible implementations that enable today's browsers to take advantage of this emerging technology are available.

WebSockets—like other pieces of the HTML5 effort such as Local Storage and Geolocation—was originally part of the HTML5 specification, but was moved to a separate standards document to keep the specification focused. WebSockets has been submitted to the Internet Engineering Task Force (IETF) by its creators, the Web Hypertext Application Technology Working Group (WHATWG) [19]. Authors, evangelists, and companies involved in the standardization still refer to the original set of features, including WebSockets, as "HTML5."

Fig.1 The flow of WebSockets

Fig. 2 Main technology

B. Protocol

The WebSocket protocol was designed to work well with the existing Web infrastructure. As part of this design principle, the protocol specification defines that the WebSocket connection starts its life as an HTTP connection, guaranteeing full backwards compatibility with the pre-WebSocket world. The protocol switch from HTTP to WebSocket is referred to as the WebSocket handshake.

C. Game Rule

The remote soccer game has several rules that I set up from the first. Two players can play this game using one ball and each player has their own goal post. The ball only can move inside the rectangle area. Whenever the ball collide with users or wall (rectangle area), they move on the law of reflection.

It is similar logic with billiard. Users and ball are moving on the any coordinated by x-y. If the ball goes into the opposite's goalpost during the game, the user who got the goal earns a single point. The game keeps going on after 3 minutes.

Therefore, I used the time function and server-client system, which can make users play at the same time on the ground.

D. Architecture

There are four separated parts of implementation. 1) Soccer Game (HTML5 Canvas View) 2) Controller (HTML5 Canvas + jQuery Mobile) 3) Server (NginX + NodeJS + WebSocket) 4) QR-Controller Library

Since ‘Socket.io’ is main library, all parts of the project loaded the library socket.io into their raw source code. This library uses of the communication between server and client. Moreover, since socket.io is a part of NodeJS, I can easily make the socket.io web application using JavaScript.

Fig.3 System environment

IV. IMPLEMENTATION & EVALUATION A. Web Application Server

First, I mainly strive to make web server. At first time, the operating system of server was Windows 2012 R2. However, I have changed my server since there are several issues such as worm virus or the speed of server. Finally, the server was changed from Windows to CentOS.

The web routing server is ‘NginX’. In reality, I was familiar with ‘Apache Tomcat’ or ‘Netty’. However, since I want to know some latest technology of web, we decide to use ‘NginX’ for routing, as well as ‘NodeJS’ for the web application server.

var app = require('express')(); var http = require('http').Server(app); var io = require('socket.io')(http); app.set('view engine', 'jade'); app.get('/c/:siteID', function(req, res){ res.render('controller', { siteID: req.params.siteID}); }); var devices = []; var sites = []; var clients = []; io.on('connection', function(client) { client.on("join", function(type,siteID) {

if(type == "site"){ sites.push(client); client.emit('join ok',client.id); console.log(client.id); } if(type == "device") { for(var i in sites){ if(sites[i].id == siteID){ var tdevice = {"site":sites[i], "client":client}; devices.push(tdevice); break; } } } }); client.on("exit", function(type,siteID) { if(type == "site"){ sites.push(client); for(var i in sites) { if(siteID == sites[i].id){ sites.splice(i, i); break; } } } if(type == "device") { for(var i in devices){ if(devices[i].client.id == client.id){ devices.splice(i, i); break; } } } }); // Simple Moving client.on('move control', function(event) { for(var i in devices) { if(devices[i].client.id == client.id){ devices[i].site.emit('move', event); } } }); // Button Down client.on('button down', function(event) { for(var i in devices) { if(devices[i].client.id == client.id){ console.log(event); devices[i].site.emit('btnDown', event); } } }); // SWipe Left

client.on('swipeleft', function() { console.log("swipeleft"); for(var i in devices) { if(devices[i].client.id == client.id){ devices[i].site.emit('swipeleft'); } } }); // SWipe Right client.on('swiperight', function() { console.log("swiperight"); for(var i in devices) { if(devices[i].client.id == client.id){ devices[i].site.emit('swiperight'); } } }); // SWipe Up client.on('swipeup', function() { console.log("swipeup"); for(var i in devices) { if(devices[i].client.id == client.id){ devices[i].site.emit('swipeup'); } } }); // SWipe Down client.on('swipedown', function() { console.log("swipedown"); for(var i in devices) { if(devices[i].client.id == client.id){ devices[i].site.emit('swipedown'); } } }); http.listen(3000, function() { console.log('listening on *:3000'); });

Fig. 4 Source code of NodeJS

B. Controller For control the ball of player, I need to move the character

remotely using ‘Socket.io’ as well as user-friendly design. Therefore, I decide to use jQuery Mobile, which provide to easily make mobile web.

Moreover, I used ‘Express.js’, which is a part of NodeJS and I can use that kind of template engine with easily install. For Example, if some user installed NodeJS in order to web application server, there is several options for endpoints. Although most of user use the normal HTML, I use ‘Express.js’ since I want to template engine for remove duplicated HTML. The final result of the controller is as follow:

doctype html

html head title NGX Controller meta(charset="utf-8") meta(name="viewport",width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=0) script(type='text/javascript',src='//code.jquery.com/jquery-1.11.1.min.js') link(rel="stylesheet",href='http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.css') script(type='text/javascript',src='//code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js') style include style.css body div(data-role="page",id="ngxSwipeDiv") div(data-role="header",data-theme="b") h1 The NGX Controller a(href="#popupDialog" data-rel="popup" data-position-to="window" id="showMenu",ui-btn-right ui-btn ui-btn-b ui-btn-inline ui-mini ui-corner-all ui-btn-icon-right ui-icon-check) Help div(data-role="popup" id="popupDialog" data-overlay-theme="b" data-theme="b" data-dismissible="false" style="max-width:400px;") div(data-role="header" data-theme="a") h1 Help div(role="main" class="ui-content") h3 Swipe p Swipe is simple swipe function. a(href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b" data-rel="back") Close div(data-role="main",class="ui-content",data-theme="b") canvas(class="ngxCtlPanel",id="ngxSwipePanel",style="border: 1px solid #4d4d4d;text-align:center;") div(data-role="footer") div(data-role="navbar" data-iconpos="bottom") ul li a(href="#ngxSwipeDiv",data-icon="grid",class="ui-btn-active") Swipe li a(href="#ngxMoveXyDiv",data-icon="star") Move XY li a(href="#ngxWsadDiv",data-icon="gear") WSAD div(data-role="page",id="ngxMoveXyDiv") div(data-role="header",data-theme="b") h1 The NGX Controller a(href="#popupDialog" data-rel="popup" data-position-to="window" id="showMenu",ui-btn-right ui-btn ui-btn-b ui-btn-inline ui-mini ui-corner-all ui-btn-icon-right ui-icon-check) Help div(data-role="main",class="ui-content",data-theme="b") canvas(class="ngxCtlPanel",id="ngxWsadPanel",style="border: 1px solid #4d4d4d;text-align:center;") div(data-role="footer") div(data-role="navbar" data-iconpos="bottom") ul li a(href="#ngxSwipeDiv",data-icon="grid") Swipe li a(href="#ngxMoveXyDiv",data-icon="star",class="ui-btn-

active") Move XY li a(href="#ngxWsadDiv",data-icon="gear") WSAD div(data-role="page",id="ngxWsadDiv") div(data-role="header",data-theme="b") h1 The NGX Controller a(href="#popupDialog" data-rel="popup" data-position-to="window" id="showMenu",ui-btn-right ui-btn ui-btn-b ui-btn-inline ui-mini ui-corner-all ui-btn-icon-right ui-icon-check) Help div(data-role="main",class="ui-content",data-theme="b") div(id="divButtons") input(type="button",data-inline="true",value="") input(type="button",data-inline="true",value="W",class="btnWsad") br input(type="button",data-inline="true",value="A",class="btnWsad") input(type="button",data-inline="true",value="S",class="btnWsad") input(type="button",data-inline="true",value="D",class="btnWsad") div(data-role="footer") div(data-role="navbar" data-iconpos="bottom") ul li a(href="#ngxSwipeDiv",data-icon="grid") Swipe li a(href="#ngxMoveXyDiv",data-icon="star") Move XY li a(href="#ngxWsadDiv",data-icon="gear",class="ui-btn-active") WSAD script(src='/socket.io/socket.io.js') script(type='text/javascript'). var socket = io(); socket.emit('join', 'device', '#{siteID}'); $(window).unload(function() { socket.emit('exit', 'device', '#{siteID}'); }); script include script.js

Fig. 5 Controller implemented by Express.js C. QR-Code Library

For using the remote soccer game, user need to connect via QR-Code for make their smartphone. For make that function, I first using the ‘Coffeescript[20]’, a little language that compiles into JavaScript, for make jQuery library.

# # 2014 Matthew LAB Product # NullPointException QR Controller # Programming by Matthew, Chang(matthew.chang@me.com) # If you have any sort of question, let me know my email address # # # =============== Program Usage =============== # This Coffeescript script is based on jQuery Plugin # and it will send user's data for customized server url # user need to setting initialize variables(position, surl, debug)

# the default value of surl is : http://ngx.matthewlab.com # ============================================= # # Getting a familiar reference to jQuery $ = jQuery # An abstract class that provide jQuery plugin setup functionalities. class jQueryPlugIn # Redefine this dictionary to specify default options @defaultOptions: {} # The default constructor calls the initialize method and set the jQuery element. # Remember to call super in subclasses if you want to maintain this behaviour. constructor: (@element, options) -> @initialize options # Method to initialize the plugin instance with the given options # This method could be called initialize: (@options) -> # Install a class as a jQuery plugin. Assuming that myClass extends jQueryPlugIn it can than be installed with: # myClass.installAsjQueryPlugIn() @installAsjQueryPlugIn: (pluginName = @name) -> pluginClass = @ $.fn[pluginName] = (options, args...) -> options = $.extend pluginClass.defaultOptions, options or {} if $.type(options) is "object" return @each () -> $this = $(this) instance = $this.data pluginName if instance? if $.type(options) is "string" instance[options].apply instance, args else if instance.initialize? instance.initialize.apply instance, [options].concat args else plugin = new pluginClass $this, options, args... $this.data pluginName, plugin $this.addClass pluginName $this.bind "destroyed.#{pluginName}", () -> $this.removeData pluginName $this.removeClass pluginName $this.unbind pluginName plugin.destructor() plugin # NPE QR Control Class class npeQrCtl extends jQueryPlugIn Socket=0 @defaultOptions: position: 'bottom' width:50 height:50 color:"#3a3" background:"#fff" surl: 'http://ngx.matthewlab.com/' debug: false

constructor: (@element, options) -> super @element, options ext = this #Init Socket $.getScript @options.surl+"socket.io/socket.io.js", (data, textStatus, jqxhr) -> #Setting Socket.io functions Socket = io.connect(options.surl) Socket.emit('join','site'); Socket.on 'join ok', (siteID) -> #Create QR-Code ext.element.qrcode({ "render": "div", "width": ext.options.width, "height": ext.options.height, "color": ext.options.color, "background":ext.options.background, "text": "http://ngx.matthewlab.com/c/"+encodeURIComponent(siteID) }); return Socket.on 'move', (event) -> #ext.moveCircle event ext.element.trigger('move',event) return #Socket.on 'gyro move', (event) -> #ext.moveCircle event # ext.element.trigger('gyro_move',event) # return Socket.on 'btnDown', (event) -> ext.element.trigger('btnDown',event) return Socket.on 'swipeleft', () -> ext.element.trigger('swipeleft') return Socket.on 'swiperight', () -> ext.element.trigger('swiperight') return Socket.on 'swipeup', () -> ext.element.trigger('swipeup') return Socket.on 'swipedown', () -> ext.element.trigger('swipedown') return return initialize: (@options) -> super @options return # Installing the plugin as 'SimpleTabs' npeQrCtl.installAsjQueryPlugIn()

Fig.6 Npe-qrctl.coffee

For use this library for remote controlling via their smartphone, web developer need to allocate some HTML document object models such as DIV layer or tags. Afterward, user need to initialize the function of ‘npe-qrctl’ and then user need to bind some action of library such as move, swipe or button down. Fig.7 is shown how developer can initialize library and Fig.8 is shown how developer can handle the behavior of user’s touch move. Table.1 shows the list of remote event.

$( "#npe_area" ).npeQrCtl({ 'position':'top', 'width':10, 'height':10 });

Fig.7 Initialize to npe-qrctl.js

$('#npe_area').bind('move',function(event,x,y){ $.moveCircle(x,y); });

Fig.8 Example code of the event of move action

Event Name Argument Description move e=(x,y) User's touching X,Y

coordinate btnDown e=('W' or 'S' or 'A'

or 'D') WSAD Button

swipeleft Null Is left swiped swiperight Null

Table.1 List of user’s action D. Game Intro and Join

For game intro, I used Adobe Edge Animation, a tool for HTML5 and CSS3 transitions. Therefore, user can see some animation when they run the ‘index.html’ file of game.

Moreover, for the connection of user via QR-Code, I attached the npe-qrctl.js into two DIV tags. Fig.10 is shown in game intro. Player can use his own device via QR-Code. Fig.11 is shown the change of QR-code after user connected.

Finally, if there are two users, it is necessary to set the score of game from any users. Fig.12 is shown how can user set the score of game via NPE Controller. After set the score, if user touch the start button, game will be started automatically.

Fig. 9 Adobe Edge Animation for game intro

Fig.10 The intro view of game

Fig.11 Changed color of QR-code after user connected

Fig.12 How can user set the score of game via QR-

Controller

E. Game Main There is one HTML5 canvas tag for drawing game. For

implementation the main views of game, I first add the background SVG [21], an XML-based vector image format for two-dimensional graphics with support for interactivity and animation, and then loaded SVG files of two character of players and finally loaded SVG file of ball.

In reality, most of my game logic is controlled by HTML5 animation status. Fig.13 shows that how can I rendered game resources into the HTML5 canvas. By animate, the logic of game is handled in animation function such as the movement of user. Fig.14 shows the game main.

$.animate = function (startTime) { // update var time = (new Date()).getTime(); if (pause[0] == 0 || pause[1] == 0) { var timeDiff = time - startTime;

readyTime -= timeDiff;

if (player1_score >= scorePerGame) { if (readyTime > 0) { $.drawResult('WIN', 'LOSE'); } } else if (player2_score >= scorePerGame) { if (readyTime > 0) { $.drawResult('LOSE', 'WIN'); } } else if (isStart == 0) { if (readyTime > 2000) { $.drawAll_s('3'); } else if (readyTime > 1000) { $.drawAll_s('2'); } else if (readyTime > 0) { $.drawAll_s('1'); } else if (readyTime > -500) { $.drawAll_s('Start!'); } else { isStart = 1; $.drawAll(); } } else{ $.collision(); $.collision_wall(); // pixels / second circle_x[2] += puckSpeed_x * timeDiff / 1000; circle_y[2] += puckSpeed_y * timeDiff / 1000;

$.drawAll(); } } // request new frame requestAnimFrame(function () { $.animate(time); });

} Fig.13 HTML5 Animation loop

Fig.14 Game main

F. End of Game

After game is finished, score will be appeared upper the screen and finally, there is appeared in the game screen about win or lose the game. Fig.14 is shown how score is appeared after some player got the score.

Fig.14 After right player get the score

V. DISCUSSION The game has a lot of advantages because of using HTML5.

That makes game's responsive speed fast and can use diverse platform. Especially, I was using the QR-code that any website have recently.

However, the project that I made also has some possible

problem. At first, the start resume is unstable and the function that zoom in/out sometimes can make errors. Mostly, the program is very light and simple. It means this program barely makes the soft error.

I have planned to implement multi-play. But it took a lot of time building server and client. That's why I only implemented double play game. If I want to make the game more fun, then I can add users who can enjoy the game together. For example, the game view is divided by four section and each sections are used by each users. After then, some two players can be a one team and the rest can be one. In addition, it is possible to add other functions such as item, magic and character system. Each user can select their character or avatar and each has their own magic (skill) and item that can get from the field and use. Even they can use two balls and play with computer if I use artificial intelligence technique

VI. CONCLUSION By implement the soccer game, I needed to optimize the

channel between server and client. The most important thing that I learned is that if I want to change the interface of computer infrastructure, I need more complete research before I conduct to make the project.

REFERENCES [1] Apple Watch release date, price and specs: Apple Watch Edition

could cost more than £3,000, TechAdvisor, http://www.pcadvisor.co.uk/buying-advice/apple/3443668/apple-iwatch-release-date-rumours-specs-uk-price-features-spring/

[2] http://tomcat.apache.org [3] http://nginx.org [4] http://nodejs.org [5] http://netty.io

[6] https://developers.facebook.com/docs/reference/dialogs/oauth/ [7] http://tangible.media.mit.edu/project/thaw/ [8] http://socket.io [9] http://www.websocket.org/quantum.html [10] http://kineticjs.com [11] http://expressjs.com [12] http://www.json.org [13] https://creative.adobe.com/products/animate [14] http://jenkins-ci.org

[15] https://www.atlassian.com/software/jira [16] https://www.jetbrains.com/idea/whatsnew/ [17] http://git.matthewlab.com/root/remote-web-

airhockey/tree/master [18] W3C: The WebSocket API, http://www.w3.org/TR/2009/WD-

websockets-20091222/ [19] https://whatwg.org [20] http://coffeescript.org [21] http://en.wikipedia.org/wiki/Scalable_Vector_Graphics