django-tornado-websockets-client

django-tornado-websockets-client

JavaScript's WebSocket wrapper for django-tornado-websockets project, used as a submodule.

Installation

$ git clone https://github.com/Kocal/dtws-client.git
$ npm i
# npm -g gulp

Running examples

Even if a non-ES6 version is available, examples are made with ES6 version of the project. So please, use a modern browser.

python -m httpserver

Open your browser at http://localhost:8000/examples and profit.

Running unit tests

The unit tests use a django-tornado-websocket application hosted on my own server, so if some tests about events behavior are failing, it's perfectly fine!

• Test ES6 version: $ USE_ES6=true npm test
• Test non-ES6 version: $ npm test

How to use

Universal Module Definition

The JavaScript class TornadoWebSocket and its modules are wrapped into the UMD, by using the returnExports.js template.

That's mean that you can use AMD, CommonJS, or browser globals.

Usage with RequireJS

public
├── index.html
└── js
    ├── main.js
    ├── require.js
    └── tws
        ├── modules -> ../../../dist/modules
        ├── tornadowebsocket-es6.js -> ../../../dist/tornadowebsocket-es6.js
        └── tornadowebsocket.js -> ../../../dist/tornadowebsocket.js

index.html

<script src="js/require.js" data-main="js/main"></script>

js/main.js

function main(TornadoWebSocket) {
    var tws = new TornadoWebSocket(/* ... */)
}

// To load ES6 version
require(['tws/tornadowebsocket-es6'], main)
// To load non-ES6 version
require(['tws/tornadowebsocket'], main)

Usage with browser globals

public
├── index.html
└── js
    ├── main.js
    └── tws
        ├── modules -> ../../../dist/modules
        ├── tornadowebsocket-es6.js -> ../../../dist/tornadowebsocket-es6.js
        └── tornadowebsocket.js -> ../../../dist/tornadowebsocket.js

index.html

<script src="js/tws/tornadowebsocket-es6.js"></script>
<!-- or -->
<script src="js/tws/tornadowebsocket.js"></script>
<script src="js/main.js"></script>

js/main.js

var tws = new TornadoWebSocket(/* ... */)

Using DTWS-client's Modules

As said just before, this project comes with its own modules.

{@link ModuleProgressBar}

This module helps to:

• Communicate with the Progress Bar server-side module,
• Handle the behavior of a progress bar (init, update, done events),
• Render a progress bar by using HTML5 or Bootstrap rendering.

index.html

<!-- With RequireJS -->
<script src="js/require.js" data-main="js/main"></script>

<!-- With browser globals -->
<script src="js/tws/tornadowebsocket-es6.js"></script>
<script src="js/tws/modules/progress_bar-es6.js"></script>
<script src="js/main.js"></script>

js/main.js

function main(TornadoWebSocket, ModuleProgressBar) {
    var tws = new TornadoWebSocket(/* ... */)
    var progress = new ModuleProgressBar(/* ... */)
    
    tws.bind(progress)
}

// With RequireJS (ES6 version)
require(['tws/tornadowebsocket-es6', 'tws/modules/progress_bar-es6'], main)
// With RequireJS (non-ES6 version)
require(['tws/tornadowebsocket', 'tws/modules/progress_bar'], main)

// With browser globals
main(window.TornadoWebSocket, window.ModuleProgressBar)

npm scripts

doc

Generate the API documentation with JSDoc.

test

Run unit tests by using Karma and Jasmine.

gulp tasks

default

Watch ES6 source files and run the scripts task.

scripts

• Glob ES6 source files,
• Use ESLint on them,
• Distribute a ES6 version,
• Run Babel on them and generate a non-ES6 version.