hhayley/bokehServer.js

## bokehServer.js
/*
	Bokeh light Node Server
  Original Code : https://github.com/arduino-libraries/ArduinoHttpClient/blob/master/examples/node_test_server/getPostPutDelete.js
	by Hayeon Hwang
*/

var express = require('express');			// include express.js
var app = express();						// a local instance of it
var bodyParser = require('body-parser');	// include body-parser
var WebSocketServer = require('ws').Server	// include Web Socket server
var inputData;
var extractedColors;

const path = require('path')
const getColors = require('get-image-colors')

getColors(path.join(__dirname, 'sea.jpg')).then(colors => {
  // `colors` is an array of color objects
  console.log(colors.map(color => color.hex()));
  extractedColors = colors.map(color => color.hex());
})

app.set('view engine','ejs');

// you need a  body parser:
app.use(bodyParser.urlencoded({extended: false})); // for application/x-www-form-urlencoded

// this runs after the server successfully starts:
function serverStart() {
	var port = server.address().port;
	console.log('Server listening on port '+ port);
}

// this is the POST handler:
app.all('/*', function (request, response) {
	// console.log('Got a ' + request.method + ' request');

	// the parameters of a GET request are passed in
	// request.body. Pass that to formatResponse()
	// for formatting:

	// console.log(request.headers);
	if (request.method == 'GET') {
		// console.log(request.query);
	} else {
		console.log(request.body.msg);
		inputData = request.body.msg;
	}

	response.render("index.ejs");  // views/index.ejs
	response.end();
});

// start the server:
var server = app.listen(8080, serverStart);

// create a WebSocket server and attach it to the server
var wss = new WebSocketServer({server: server});

wss.on('connection', function connection(ws) {
	// new connection, add message listener
	ws.on('message', function incoming(message) {

		ws.send(extractedColors[0]+","+extractedColors[1]+","+extractedColors[2]+","+extractedColors[3]+","+extractedColors[4]);

	});
});

app.use(express.static('public'));

## index.ejs
<html>
  <head>
    <title>Bokeh Light</title>
    <link rel="stylesheet" href="styles.css" type="text/css">
    <script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>
  </head>

  <body>

  <div class="container">
    <input type="text" id="inputMsg"/>
    <button id="sendBtn">Sent</button>
    </br>
    <button id="offBtn">Off</button>
    <button id="onBtn">On</button>
  </div>

<script type="text/javascript">
  $("#sendBtn").click(function() {
    var msg = $("#inputMsg").val();

    $.ajax({
      url: "/ajax/test",
      method: "post",
      data: {msg: msg},
      success: function(data) {
        // console.log("return data : " + data);
      }
    });

  })

 $("#onBtn").click(function() {

    $.ajax({
      url: "/ajax/on",
      method: "post",
      data: {msg: "on"},
      success: function(data) {
        // console.log("return data : " + data);
      }
    });

  })

  $("#offBtn").click(function() {

    $.ajax({
      url: "/ajax/off",
      method: "post",
      data: {msg: "off"},
      success: function(data) {
        // console.log("return data : " + data);
      }
    });

  })


</script>

</body>
</html>
	/*
	Bokeh light Node Server
	Original Code : https://github.com/arduino-libraries/ArduinoHttpClient/blob/master/examples/node_test_server/getPostPutDelete.js
	by Hayeon Hwang
	*/

	var express = require('express'); // include express.js
	var app = express(); // a local instance of it
	var bodyParser = require('body-parser'); // include body-parser
	var WebSocketServer = require('ws').Server // include Web Socket server
	var inputData;
	var extractedColors;

	const path = require('path')
	const getColors = require('get-image-colors')

	getColors(path.join(__dirname, 'sea.jpg')).then(colors => {
	// `colors` is an array of color objects
	console.log(colors.map(color => color.hex()));
	extractedColors = colors.map(color => color.hex());
	})

	app.set('view engine','ejs');

	// you need a body parser:
	app.use(bodyParser.urlencoded({extended: false})); // for application/x-www-form-urlencoded

	// this runs after the server successfully starts:
	function serverStart() {
	var port = server.address().port;
	console.log('Server listening on port '+ port);
	}

	// this is the POST handler:
	app.all('/*', function (request, response) {
	// console.log('Got a ' + request.method + ' request');

	// the parameters of a GET request are passed in
	// request.body. Pass that to formatResponse()
	// for formatting:

	// console.log(request.headers);
	if (request.method == 'GET') {
	// console.log(request.query);
	} else {
	console.log(request.body.msg);
	inputData = request.body.msg;
	}

	response.render("index.ejs"); // views/index.ejs
	response.end();
	});

	// start the server:
	var server = app.listen(8080, serverStart);

	// create a WebSocket server and attach it to the server
	var wss = new WebSocketServer({server: server});

	wss.on('connection', function connection(ws) {
	// new connection, add message listener
	ws.on('message', function incoming(message) {

	ws.send(extractedColors[0]+","+extractedColors[1]+","+extractedColors[2]+","+extractedColors[3]+","+extractedColors[4]);

	});
	});

	app.use(express.static('public'));
	<html>
	<head>
	<title>Bokeh Light</title>
	<link rel="stylesheet" href="styles.css" type="text/css">
	<script
	src="https://code.jquery.com/jquery-3.2.1.min.js"
	integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
	crossorigin="anonymous"></script>
	</head>

	<body>

	<div class="container">
	<input type="text" id="inputMsg"/>
	<button id="sendBtn">Sent</button>
	</br>
	<button id="offBtn">Off</button>
	<button id="onBtn">On</button>
	</div>

	<script type="text/javascript">
	$("#sendBtn").click(function() {
	var msg = $("#inputMsg").val();

	$.ajax({
	url: "/ajax/test",
	method: "post",
	data: {msg: msg},
	success: function(data) {
	// console.log("return data : " + data);
	}
	});

	})

	$("#onBtn").click(function() {

	$.ajax({
	url: "/ajax/on",
	method: "post",
	data: {msg: "on"},
	success: function(data) {
	// console.log("return data : " + data);
	}
	});

	})

	$("#offBtn").click(function() {

	$.ajax({
	url: "/ajax/off",
	method: "post",
	data: {msg: "off"},
	success: function(data) {
	// console.log("return data : " + data);
	}
	});

	})


	</script>

	</body>
	</html>