Skip to content

Instantly share code, notes, and snippets.

@eightlines

eightlines/client.js

Created May 15, 2016 03:03
Show Gist options
  • Save eightlines/a5f57f7a61731a913cb3c0ff33081085 to your computer and use it in GitHub Desktop.
Save eightlines/a5f57f7a61731a913cb3c0ff33081085 to your computer and use it in GitHub Desktop.
Download ZIP
ofxSocketIO Communication Bug
Raw
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);
}
Raw
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>
Raw
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"
}
}
Raw
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;
}
Raw
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});
}
});
});
Raw
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();
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment