eightlines/client.js

## client.js
var socket = io.connect();
var connected = false;
var connectionId = '';

socket.on('init', function (data) {
  if (data.status == 'ready') {
    connected = true;
    connectionId = data.clientId;
    document.getElementById('debug').innerHTML = 'Connected: ID ' + connectionId;

    socket.on('disconnect', function () {
      connected = false;
      connectionId = '';
      console.log('Disconnected');
      document.getElementById('debug').innerHTML = 'Disconnected';
    });
  }
});

document.getElementById('cursor').addEventListener('touchmove', touchHandler, false);
document.getElementById('cursor').addEventListener('touchend', touchHandler, false);

function touchHandler(e) {
  e.preventDefault();
  var debug = '';

  var data = {
    connectionId:connectionId,
    touches:[]
  };

  for (var touchIndex = 0; touchIndex < 1; touchIndex ++) { //e.touches.length - only using single touch
    var touch = e.changedTouches[touchIndex];
    data.touches.push({
      touchId:touchIndex,
      type:e.type,
      x:(touch.pageX / window.innerWidth),
      y:(touch.pageY / window.innerHeight)
    });
  }

  document.getElementById('debug').innerHTML = JSON.stringify(data);
  if (connected) socket.emit('position', data);
}

## index.html
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>Test Position</title>
    <script src="/socket.io/socket.io.js"></script>
    <link rel="stylesheet" type="text/css" href="/scripts/screen.css" />
  </head>
<body>
  <div id="debug"></div>
  <div id="cursor"></div>
  <script src="/scripts/client.js"></script>
</body>
</html>

## package.json
{
    "name": "Test Position",
    "version": "1.0.0",
    "description": "Test Position",
    "main": "server.js",
    "scripts": {
        "start": "forever start -w -a --uid server --watchIgnore scripts --watchIgnore index.html --minUptime 500 --spinSleepTime 1000 main.js"
    },
    "author": "Brent Marshall",
    "license": "MIT",
    "dependencies": {
        "express": "^4.13.4",
        "socket.io": "^1.4.5"
    }
}

## screen.css
body {
  background-color: black;
  color: white;
  font-family: sans-serif;
  margin:0;
  padding:10px;
}

#cursor {
  position:absolute;
  width:100%;
  height:100%;
}

#debug {
  position: absolute;
}

## server.js
const express = require('express');
const app = express();
const server = require('http').Server(app);
const io = require('socket.io')(server);
var clients = [];

server.listen(80);
console.log("Server Init on Port 80");

app.use('/scripts', express.static(__dirname + '/scripts'));
app.get('/', function (req, res) {
  res.sendFile(__dirname + '/index.html');
});

io.on('connection', function (socket) {
  clients.push(socket);
  var id = socket.id;
  console.log('Client (' + id + ') Connected');
  socket.emit('init', {status:'ready', clientId:socket.id});

  socket.on('position', function (data) {
    for (var i = 0; i < clients.length; i++) {
      clients[i].emit('position', {
        "c":data.connectionId,
        "x":data.touches[0].x,
        "y":data.touches[0].y,
        "t":data.touches[0].type
      });
    }

    var ss = '';
    ss += 'id: ' + data.connectionId + ' ';
    ss += 'x: ' + data.touches[0].x + ' ';
    ss += 'y: ' + data.touches[0].y + ' ';
    ss += 'type: ' + data.touches[0].type + ' ';
    ss += 'clients: ' + clients.length;
    console.log(ss);
  });

  socket.on('disconnect', function () {
    var index = clients.indexOf(socket);
    clients.splice(index, 1);
    for (var i = 0; i < clients.length; i++) {
      console.log(id + " Disconnected");
      clients[i].emit('disconnect', {"c":id});
    }
  });
});

## test.cpp
#include "ofApp.h"

void ofApp::setup() {
  ofBackground(255);
  ofEnableSmoothing();
  ofSetFrameRate(60);
  ofHideCursor();

  icon.load("icon.png"); // Cursor image

  isConnected = false;
  string address = "http://127.0.0.1:80";
  socketIO.setup(address);
  ofAddListener(socketIO.connectionEvent, this, &ofApp::onConnection);
  ofAddListener(socketIO.notifyEvent, this, &ofApp::gotEvent);

  // Cursor
  float scale = .1;
  fboIcon.allocate(icon.getWidth() * scale, icon.getHeight() * scale, GL_RGBA);
  fboIcon.begin();
  ofClear(255, 0);
  ofSetColor(255, 255);
  ofScale(scale, scale);
  icon.draw(0, 0);
  fboIcon.end();
}

void ofApp::onConnection() {
  isConnected = true;

  string initEventName = "init";
  socketIO.bindEvent(initEvent, initEventName);
  ofAddListener(initEvent, this, &ofApp::onInitEvent);

  string clientIdEventName = "clientId";
  socketIO.bindEvent(clientEvent, clientIdEventName);
  ofAddListener(clientEvent, this, &ofApp::onClientEvent);

  string positionEventName = "position";
  socketIO.bindEvent(positionEvent, positionEventName);
  ofAddListener(positionEvent, this, &ofApp::onPositionEvent);

  string disconnectEventName = "disconnect";
  socketIO.bindEvent(disconnectEvent, disconnectEventName);
  ofAddListener(disconnectEvent, this, &ofApp::onDisconnectEvent);
}

void ofApp::onInitEvent(ofxSocketIOData &data) {
  status = data.getStringValue("status");
  cout << "Init Event" << endl;
}

void ofApp::onClientEvent(ofxSocketIOData &data) {
  stringstream ss;
  ss << "Client ";
  ss << data.getStringValue("clientId");
  ss << " connected";
  status = ss.str();
  cout << "onClientEvent " << data.getStringValue("clientId") << endl;
}

void ofApp::onPositionEvent(ofxSocketIOData &data) {
  Touch t;
  t.clientId = data.getStringValue("c");
  t.x = data.getFloatValue("x");
  t.y = data.getFloatValue("y");
  t.type = data.getStringValue("t");

  stringstream ss;
  ss << "connectionId: " << t.clientId << "\n";
  ss << "touch x: " << t.x << "\n";
  ss << "touch y: " << t.y << "\n";
  ss << "touch type: " << t.type << "\n";
  if (debug) {
    cout << ss.str() << endl;
  }

  for (unsigned int idx = 0; idx < touchPoints.size(); idx ++) {
    string id = touchPoints[idx].clientId;
    if (id == t.clientId) {
      touchPoints.erase(touchPoints.begin() + idx);
    }
  }

  if (t.type == "touchend") { // Fill poly with colour
  } else {
    touchPoints.push_back(t);
  }
}

void ofApp::onDisconnectEvent(ofxSocketIOData &data) {
  status = "Disconnect Event";
  cout << "Disconnect Event" << endl;
}

void ofApp::gotEvent(string &name) {
  status = name;
}

void ofApp::update() {

}

void ofApp::draw() {
  for (auto &t : touchPoints) {
    drawCursor(t.clientId, t.x, t.y);
  }
  stringstream ss;
  ss << "FPS " << ofToString(ofGetFrameRate()) << "\n";
  ss << "CONNECTED " << ((isConnected) ? "TRUE" : "FALSE") << "\n";
  ss << "ACTIVE CLIENTS " << ofToString(touchPoints.size()) << "\n";
  ss << "DEBUG " << ((debug) ? "TRUE" : "FALSE") << "\n";
  ofDrawBitmapStringHighlight(ss.str(), 20, 20);
}

void ofApp::drawCursor(string cid, float x, float y) {
  ofPushMatrix();
  ofPushStyle();
  ofTranslate((x * ofGetWidth()) - (fboIcon.getWidth() / 2), (y * ofGetHeight()) - (fboIcon.getHeight() / 2));
  ofSetColor(ofColor::fromHex("0xFF0000"));
  fboIcon.draw(0, 0);
  // ofDrawBitmapString(cid, 10, 10);
  ofPopStyle();
  ofPopMatrix();
}

void ofApp::keyReleased(int key) {
  if (key == 'd') debug = !debug;
  if (key == 'w') {
    windowSize = (windowSize.width == 1920) ? ofRectangle(0, 0, 500, 500) : ofRectangle(0, 0, 1920, 1080);
    ofSetWindowShape(windowSize.width, windowSize.height);
  }
}

void ofApp::exit() {
  if (isConnected) {
    socketIO.closeConnection();
  }
}
	var socket = io.connect();
	var connected = false;
	var connectionId = '';

	socket.on('init', function (data) {
	if (data.status == 'ready') {
	connected = true;
	connectionId = data.clientId;
	document.getElementById('debug').innerHTML = 'Connected: ID ' + connectionId;

	socket.on('disconnect', function () {
	connected = false;
	connectionId = '';
	console.log('Disconnected');
	document.getElementById('debug').innerHTML = 'Disconnected';
	});
	}
	});

	document.getElementById('cursor').addEventListener('touchmove', touchHandler, false);
	document.getElementById('cursor').addEventListener('touchend', touchHandler, false);

	function touchHandler(e) {
	e.preventDefault();
	var debug = '';

	var data = {
	connectionId:connectionId,
	touches:[]
	};

	for (var touchIndex = 0; touchIndex < 1; touchIndex ++) { //e.touches.length - only using single touch
	var touch = e.changedTouches[touchIndex];
	data.touches.push({
	touchId:touchIndex,
	type:e.type,
	x:(touch.pageX / window.innerWidth),
	y:(touch.pageY / window.innerHeight)
	});
	}

	document.getElementById('debug').innerHTML = JSON.stringify(data);
	if (connected) socket.emit('position', data);
	}
	<html>
	<head>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
	<title>Test Position</title>
	<script src="/socket.io/socket.io.js"></script>
	<link rel="stylesheet" type="text/css" href="/scripts/screen.css" />
	</head>
	<body>
	<div id="debug"></div>
	<div id="cursor"></div>
	<script src="/scripts/client.js"></script>
	</body>
	</html>
	{
	"name": "Test Position",
	"version": "1.0.0",
	"description": "Test Position",
	"main": "server.js",
	"scripts": {
	"start": "forever start -w -a --uid server --watchIgnore scripts --watchIgnore index.html --minUptime 500 --spinSleepTime 1000 main.js"
	},
	"author": "Brent Marshall",
	"license": "MIT",
	"dependencies": {
	"express": "^4.13.4",
	"socket.io": "^1.4.5"
	}
	}
	body {
	background-color: black;
	color: white;
	font-family: sans-serif;
	margin:0;
	padding:10px;
	}

	#cursor {
	position:absolute;
	width:100%;
	height:100%;
	}

	#debug {
	position: absolute;
	}
	const express = require('express');
	const app = express();
	const server = require('http').Server(app);
	const io = require('socket.io')(server);
	var clients = [];

	server.listen(80);
	console.log("Server Init on Port 80");

	app.use('/scripts', express.static(__dirname + '/scripts'));
	app.get('/', function (req, res) {
	res.sendFile(__dirname + '/index.html');
	});

	io.on('connection', function (socket) {
	clients.push(socket);
	var id = socket.id;
	console.log('Client (' + id + ') Connected');
	socket.emit('init', {status:'ready', clientId:socket.id});

	socket.on('position', function (data) {
	for (var i = 0; i < clients.length; i++) {
	clients[i].emit('position', {
	"c":data.connectionId,
	"x":data.touches[0].x,
	"y":data.touches[0].y,
	"t":data.touches[0].type
	});
	}

	var ss = '';
	ss += 'id: ' + data.connectionId + ' ';
	ss += 'x: ' + data.touches[0].x + ' ';
	ss += 'y: ' + data.touches[0].y + ' ';
	ss += 'type: ' + data.touches[0].type + ' ';
	ss += 'clients: ' + clients.length;
	console.log(ss);
	});

	socket.on('disconnect', function () {
	var index = clients.indexOf(socket);
	clients.splice(index, 1);
	for (var i = 0; i < clients.length; i++) {
	console.log(id + " Disconnected");
	clients[i].emit('disconnect', {"c":id});
	}
	});
	});
	#include "ofApp.h"

	void ofApp::setup() {
	ofBackground(255);
	ofEnableSmoothing();
	ofSetFrameRate(60);
	ofHideCursor();

	icon.load("icon.png"); // Cursor image

	isConnected = false;
	string address = "http://127.0.0.1:80";
	socketIO.setup(address);
	ofAddListener(socketIO.connectionEvent, this, &ofApp::onConnection);
	ofAddListener(socketIO.notifyEvent, this, &ofApp::gotEvent);

	// Cursor
	float scale = .1;
	fboIcon.allocate(icon.getWidth() * scale, icon.getHeight() * scale, GL_RGBA);
	fboIcon.begin();
	ofClear(255, 0);
	ofSetColor(255, 255);
	ofScale(scale, scale);
	icon.draw(0, 0);
	fboIcon.end();
	}

	void ofApp::onConnection() {
	isConnected = true;

	string initEventName = "init";
	socketIO.bindEvent(initEvent, initEventName);
	ofAddListener(initEvent, this, &ofApp::onInitEvent);

	string clientIdEventName = "clientId";
	socketIO.bindEvent(clientEvent, clientIdEventName);
	ofAddListener(clientEvent, this, &ofApp::onClientEvent);

	string positionEventName = "position";
	socketIO.bindEvent(positionEvent, positionEventName);
	ofAddListener(positionEvent, this, &ofApp::onPositionEvent);

	string disconnectEventName = "disconnect";
	socketIO.bindEvent(disconnectEvent, disconnectEventName);
	ofAddListener(disconnectEvent, this, &ofApp::onDisconnectEvent);
	}

	void ofApp::onInitEvent(ofxSocketIOData &data) {
	status = data.getStringValue("status");
	cout << "Init Event" << endl;
	}

	void ofApp::onClientEvent(ofxSocketIOData &data) {
	stringstream ss;
	ss << "Client ";
	ss << data.getStringValue("clientId");
	ss << " connected";
	status = ss.str();
	cout << "onClientEvent " << data.getStringValue("clientId") << endl;
	}

	void ofApp::onPositionEvent(ofxSocketIOData &data) {
	Touch t;
	t.clientId = data.getStringValue("c");
	t.x = data.getFloatValue("x");
	t.y = data.getFloatValue("y");
	t.type = data.getStringValue("t");

	stringstream ss;
	ss << "connectionId: " << t.clientId << "\n";
	ss << "touch x: " << t.x << "\n";
	ss << "touch y: " << t.y << "\n";
	ss << "touch type: " << t.type << "\n";
	if (debug) {
	cout << ss.str() << endl;
	}

	for (unsigned int idx = 0; idx < touchPoints.size(); idx ++) {
	string id = touchPoints[idx].clientId;
	if (id == t.clientId) {
	touchPoints.erase(touchPoints.begin() + idx);
	}
	}

	if (t.type == "touchend") { // Fill poly with colour
	} else {
	touchPoints.push_back(t);
	}
	}

	void ofApp::onDisconnectEvent(ofxSocketIOData &data) {
	status = "Disconnect Event";
	cout << "Disconnect Event" << endl;
	}

	void ofApp::gotEvent(string &name) {
	status = name;
	}

	void ofApp::update() {

	}

	void ofApp::draw() {
	for (auto &t : touchPoints) {
	drawCursor(t.clientId, t.x, t.y);
	}
	stringstream ss;
	ss << "FPS " << ofToString(ofGetFrameRate()) << "\n";
	ss << "CONNECTED " << ((isConnected) ? "TRUE" : "FALSE") << "\n";
	ss << "ACTIVE CLIENTS " << ofToString(touchPoints.size()) << "\n";
	ss << "DEBUG " << ((debug) ? "TRUE" : "FALSE") << "\n";
	ofDrawBitmapStringHighlight(ss.str(), 20, 20);
	}

	void ofApp::drawCursor(string cid, float x, float y) {
	ofPushMatrix();
	ofPushStyle();
	ofTranslate((x * ofGetWidth()) - (fboIcon.getWidth() / 2), (y * ofGetHeight()) - (fboIcon.getHeight() / 2));
	ofSetColor(ofColor::fromHex("0xFF0000"));
	fboIcon.draw(0, 0);
	// ofDrawBitmapString(cid, 10, 10);
	ofPopStyle();
	ofPopMatrix();
	}

	void ofApp::keyReleased(int key) {
	if (key == 'd') debug = !debug;
	if (key == 'w') {
	windowSize = (windowSize.width == 1920) ? ofRectangle(0, 0, 500, 500) : ofRectangle(0, 0, 1920, 1080);
	ofSetWindowShape(windowSize.width, windowSize.height);
	}
	}

	void ofApp::exit() {
	if (isConnected) {
	socketIO.closeConnection();
	}
	}