BeagleBone Black Switches Updating HTML with Socket.io

Hello, I am working on a project that will read in two switches and then update a website with the status of the switches. I am new to working with boards such as the BeagleBone Black, node.js, and socket.io. Before I get that far I first have been trying to follow a not-so-simple tutorial that has been full of a number of errors. I have managed to fix quite a few of them and add some of my own code. Currently this example should blink a led on a breadboard but also change the background color of an html page. I have been stuck on this for a while since and have not been able to get any further for a couple days. My problems with my js file: 1)when first running the file after “Server running at…” I receive a line that says “undefined” then once I press the switch it only shows 1 or 0 as it should, I don’t know why I am getting undefined. 2)When pressing the switch the led lights the way it is supposed to but the html page does not update and I cannot figure out what I am doing incorrectly to make the background change when the switch is pressed. I would greatly appreciate any feedback on what is being done incorrectly or shown corrects.

This is what my button.js file looks like:

var app = require(‘http’).createServer(handler);
var io = require(‘socket.io’).listen(app);
var fs = require(‘fs’);
var url = require(‘url’);
var path = require(‘path’);

// runs only on beaglebone!
var b = require(‘bonescript’);
var inputPin = “P8_19”; //switch is located on this pin
var ledPin = “P8_15”; //breadboard led is located on this pin

app.listen(2509); //listen on port 2509

console.log(‘Server running at http://beaglebone.local:2509/’);

io.sockets.on(‘connection’, function(socket) {
b.attachInterrupt(inputPin, true, b.CHANGE, function(inputPin, value) {
socket.emit(‘button_event’, ((b.value == b.HIGH) ? ‘white’ : ‘red’) );
socket.broadcast.emit(‘button_event’, ((b.alue == b.HIGH) ? ‘white’ : ‘red’) );
});
});

b.pinMode(ledPin, b.OUTPUT);
b.pinMode(inputPin, b.INPUT);

b.attachInterrupt(inputPin, true, b.CHANGE, buttonChange);

function buttonChange(button) {
if(button.value == b.HIGH)
state = b.HIGH;
else
state = b.LOW;
b.digitalWrite(ledPin, state);
console.log(button.value);
}

function handler(req, res) {
var uri = url.parse(req.url).pathname;
var subdir = path.join(process.cwd(), ‘button’);
if (uri == ‘/’) {
loadFile(‘index.html’, subdir, res, “text/html”);
} else {
if (uri.match(/.js$/i)) {
loadFile(uri, subdir, res, “application/javascript”);
} else if (uri.match(/.css$/i)) {
loadFile(uri, subdir, res, “text/css”);
} else if (uri.match(/.htm(.)$/i)) {
loadFile(uri, subdir, res, “text/html”);
} else if (uri.match(/.(jpg|png|ico|gif)$/i)) {
loadFile(uri, subdir, res, “binary”);
} else {
loadFile(uri, subdir, res, “text/plain”);
}
}
};

function loadFile(uri, subdir, res, type) {
var filename = path.join(subdir, uri);
fs.exists(filename, function(exists) {
if (!exists) {
res.writeHead(404, {
“Content-Type”: “text/plain”
});
res.write(“Error 404: '” + uri + “’ Not Found\n”);
res.end();
}else if (type == “binary”) {
fs.readFile(
filename, “binary”, function(err, file) {
if (err) {
res.writeHead(500, {
“Content-Type”: “text/plain”
});
res.write(err + “\n”);
res.end();
return;
}
res.writeHead(200);
res.write(file, “binary”);
res.end();
});
} else {
fs.readFile(
filename, encoding = ‘utf8’, function(err, file) {
if (err) {
//res.writeHead(500, {
// “Content-Type”: “text/plain”
//});
res.write(err + “\n”);
res.end();
return;
}
res.writeHead(200, {
“Content-Type”: type
});
res.write("" + file);
res.end();
});
}
});
};

This is what my index.html file looks like:

Press the button, the page will become red!

I am also aware that this “socket.broadcast.emit(‘button_event’, ((b.alue == b.HIGH) ? ‘white’ : ‘red’) );” has a spelling error, the missing v in value is not my problem that was just an error when I was trying to fix a problem and missed a letter and has since been corrected.

Mark,

I am having exactly the same problem, using socket.io to update status of the switch back to the website. Communication via socket.io from the browser to server is working fine, but for some reason I can’t get the feedback from the server working. Have you resolved your issue?
In my case I can see websocket writing back to the browser, but immediately after that there is “transport end” message. Please see the log output below.

info - socket.io started
debug - served static content /socket.io.js
debug - client authorized
info - handshake authorized 1517478271825090374
debug - served static content /socket.io.js
debug - setting request GET /socket.io/1/websocket/1517478271825090374
debug - set heartbeat interval for client 1517478271825090374
debug - client authorized for
debug - websocket writing 1::
new onConnect request ### my debug message
got connection from browser ### my debug message
Switch number:sw1 value:1 ### my debug message
debug - websocket writing 5:::{“name”:“sw1Status”,“args”:["{“switch”:“sw1”, “value”:1}"]} ### this is message back to the browser
info - transport end
debug - set close timeout for client 1517478271825090374
debug - cleared close timeout for client 1517478271825090374
debug - cleared heartbeat interval for client 1517478271825090374
debug - discarding transport

My scripts for server and client are very similar to the examples from book "Programming the BeagleBone Black" by Simon Monk.