Simple example walkthrough

Here we will go through creating simple example using wams library

Requirements

You will need to have these packages on your computer:

nodejs and npm, which should be included.
Download this repository with git clone https://github.com/scottbateman/wams.js.git or zip. If you downloaded zip, unpack it.
Download hammer.js repository with git clone https://github.com/EightMedia/hammer.js.git. Then checkout version 1.1.3 of hammer: cd hammer.js && git checkout 1.1.3

Setting environment

Create folder hello-world. We will have our example in here and we will be conducting all our commands from here. When we will need some files from wams.js repository, we will use something like ../wams.js as reference to the wams.js folder.

In our example we are going to have all .html, .css, and .js files in public folder, so these files will not mix up with server side code. Create folder public. We are using unix type of OS, so examples of commands are for unix console. You can use mkdir public.

For our next step, we are going to install dependencies. Note, that since our library is not published to npm registry, it cannot be installed using npm and it will be installed manually.

Install express: npm install express@4.
Copy wams.js-server. You should already have wams.js repository downloaded. Then copy server folder into node_modules folder. cp -rf ../wams.js/server node_modules/
Install wams.js-server dependencies. Go to folder node_modules/server and install dependencies with npm. cd node_modules/server && npm install && cd ../..
Copy wams.js-client. Copy file client/src/wams.js from our wams.js repository into public folder created earlier. cp ../wams.js/client/src/wams.js public/
Copy hammer.js client. Copy file hammer.js from hammer.js repository into public folder. cp ../hammer.js/hammer.js public/

Preparing project skeleton

And now, when we set up our folders and libraries, we can start with example.

First we will write server code. Start with creation of app.js file and add this starting code:

var http = require('http');
var express = require('express');

var app = express();

app.set('port', 3000);
app.use(express.static(__dirname + '/public'));

var server = http.createServer(app);
server.listen(app.get('port'), function() {
   console.log('Starting express server on port' + server.address().port);
});

In this piece we create express engine, show it where static .html, .css, and .js files are, we redirect request from / to index.html file, and we start server on port 3000. From this point we can simply start server with node app.js

Next we are going to create our index page. Start with creation of public/index.html file and add this content:

<!DOCTYPE html>
<html>
<head>
   <title>Hello world example</title>
   <meta charset='utf-8' />
   <link rel='stylesheet' href='/style.css' type='text/css' />
</head>
<body>
   <span id='name' class='me'></span>
   <ul id='clients'></ul>
   <script src='/helloWorld.js' type='text/javascript' charset='utf-8'></script>
</body>
</html>

And we add some styles in public/style.css:

body {
  padding: 20px;
  font: 14px "Lucida Grande", Helvetica, Arial sans-serif;
  background: white;
  color: black;
}

li {
  margin: 10px;
}

span.me {
  border: 1px solid black;
}

span.others {
  border: 1px dashed black;
}

Starting with example

And now we are ready to add wams.js based functionality.

On the server we need to connect our wams.js-server module and start it. Add line var wams = require('server') and then after we created http server, start wams to listen on events.

After all changes, file app.js becomes:

var http = require('http');
var express = require('express');
var wams = require('server');

var app = express();

app.set('port', 3000);
app.use(express.static(__dirname + '/public'));

var server = http.createServer(app);
server.listen(app.get('port'), function() {
   console.log('Starting express server on port' + server.address().port);
});

wams.listen(server);

Also add references to wams.js client, hammer.js and socket.io in index.html file. Add these lines before helloWorld.js

<script src='/socket.io/socket.io.js' type='text/javascript' charset='utf-8'></script>
<script src='/hammer.js' type='text/javascript' charset='utf-8'></script>
<script src='/wams.js' type='text/javascript' charset='utf-8'></script>

Working on helloWorld.js

This is the time when we finally start working with wams.js on client side.

As our first step, we need to create instance of WAMS on client, and it will automatically connect to server after creation. var wams = new WAMS({name: rndName, color: rndColor}); Here is the parameter for function is the description of client that is being created. In our case, rndName and rndColor are two random fields used for example.

At this point we are connected to server, and if more client connect, we will get list of clients updated each time there is new client connected or old client disconnected. All we need to do is to update list on page when new clients connect or old clients disconnect.

First of all, we are going to show our own name and colour on the page. We have already added span element on the page to hold our name. So in javascript file we just need to add these lines after we created wams element.

window.onload = function() {
   var myName = document.getElementById('name');

   myName.innerText = wams.description.name;
   myName.style.backgroundColor = wams.description.color;
}

For our next step we will show all clients that have already been connected to the server.

We start by adding event listener that will be listening for 'connection ok' event.

wams.on(WAMS.when.connction_ok, function(data) {

});

Inside callback function we receive object that has our id and list of all clients that already connected to the server. data object has this structure:

{
   otherClients: [
      {
         description: {
            color: "#c05217",
            name: "Nila"
         },
         position: 1,
         uuid: "b8b2559d-551f-4869-9cf4-dafc0947cfbe"
      }, {
         description: {
            color: "#e40d32",
            name: "Wes"
         },
         position: 2,
         uuid: "c3c54e90-42c3-4059-8bd8-4c15e2812768"
      }
   ],
   position: 0,
   uuid: "0f8e7455-d187-439b-ad99-5474d37ad700"
}

From this object position field is not important for us. All we need is the color, name and uuid.

With this in mind, we start writing our callback function.

var i, li, span,
   list = document.getElementById('clients');

for (i in data.otherClients) {
   if (data.otherClients.hasOwnProperty(i)) {
      addElement(list, data.otherClients[i]);
   }
}

Where function addElement is appending new li element to the list. Here is the addElement function:

function addElement(list, client) {
   var span, li;

   span = document.createElement('span');
   span.innerText = client.description.name;
   span.style.backgroundColor = client.description.color;
   span.classList.add('others');

   li = document.createElement('li');
   li.classList.add('others');
   li.id = client.uuid;
   li.appendChild(span);

   list.appendChild(li);
}

Now, that we have list of already connected clients, we need to update it whenever new clients connect and old ones disconnect.

We will have the same method to do this task: we will add listeners on events 'user_connected' and 'user_disconnected'.

wams.on(WAMS.when.user_connected, function(data) {

});

wams.on(WAMS.when.user_disconnected, function(data) {

});

When new user is connected, we want to add new element to the list, we will be using addElement() for this. So callback for our 'user_conncted' event listener will have this content:

var list = document.getElementById('clients');

addElement(list, data.client);

When user disconnects, we want to delete element that corresponds to this user. Callback for our 'user_disconnected' event listener will have this content:

var uuid = data.client,
   li = document.getElementById(uuid);

li.remove();

Hello world example - scottbateman/wams.js GitHub Wiki

Simple example walkthrough

Requirements

Setting environment

Preparing project skeleton

Starting with example

Working on helloWorld.js

⚠️ GitHub.com Fallback ⚠️

Hello world example - scottbateman/wams.js GitHub Wiki

Simple example walkthrough

Requirements

Setting environment

Preparing project skeleton

Starting with example

Working on helloWorld.js

⚠️ **GitHub.com Fallback** ⚠️

⚠️ GitHub.com Fallback ⚠️