nicolehe/face-chat.html

## face-chat.html
<html>

<head>
    <link href='https://fonts.googleapis.com/css?family=Droid+Sans+Mono' rel='stylesheet' type='text/css'>
    <style>
    body {
        margin: 0;
        font-family: 'Droid Sans Mono';
        color: #ffffff;
        font-size: 12pt;
        background-color: #1D2D44;
    }

    h1 {
        margin: 0;
        font-family: 'Droid Sans Mono';
        color: #BC242C;
        font-size: 36pt;
    }

    div.header {
        margin-left: auto;
        margin-right: auto;
        padding: 10px;
        text-align: center;
    }

    div.block {
        padding: 10px;
        width: 1000px;
        float: left;
    }

    div.box {
        color: #8A1C7C;
        margin-left: auto;
        margin-right: auto;
        font-size: 12pt;
        width: 100%;
        position: absolute;
        bottom: 30;
    }

    div.video {
        margin-left: auto;
        margin-right: auto;
        margin-top: 10px;
        padding: 10px;
        float: right;
    }

    div.yourText {
        color: #DF6955;
        font-size: 12pt;
        font-weight: normal;
        width: 200px;
        padding: 10px;
        float: left;
    }

    div.theirText {
        color: #3D8C7D;
        font-size: 12pt;
        width: 200px;
        padding: 10px;
        float: left;
    }

    textarea {
        width: 300px;
        height: 100px;
        font-size: 12pt;
        font-family: 'Droid Sans Mono';
        float: center;
    }

    video {
        margin-left: auto;
        margin-right: auto;
        margin-top: 10px;
        padding: 10px;
        width: 200px;
        float: right;
    }
    </style>
    <script type="text/javascript" src="/socket.io/socket.io.js"></script>
    <script type="text/javascript">
    var socket = io.connect('https://nyh206.itp.io:8081/');
    //var socket = io.connect('http://localhost:8000/');
    var counter = 0;
    var incoming, photoIncoming, video, i;
    socket.on('connect', function() {
        console.log("Connected");
        document.getElementById("connection").innerHTML = "say it to my face";
    });

    //receive chats
    socket.on('chatmessage', function(data) {
        incoming = data;
        addReceived();
    });

    //receive images
    socket.on('photo', function(data) {
        console.log("got images");
        document.getElementById('photo ' + counter).src = data;
        //addReceived();
    });

    var sendmessage = function(message) {
        console.log("chatmessage: " + message);
        socket.emit('chatmessage', message);
    };

    var sendphoto = function(photo) {
        console.log("photo: " + photo);
        document.getElementById('canvas ' + counter).src = data;
        socket.emit('photo', photo);
    };


    function init() {
        // These help with cross-browser functionality (shim)
        window.URL = window.URL || window.webkitURL || window.mozURL || window.msURL;
        navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;

        // The video element on the page to display the webcam
        video = document.getElementById('thevideo');


        // if we have the method
        if (navigator.getUserMedia) {
            navigator.getUserMedia({
                video: true
            }, function(stream) {
                video.src = window.URL.createObjectURL(stream) || stream;
                video.play();

            }, function(error) {
                alert("Failure " + error.code);
            });
        }
    }

    function submit() {
        addSent();
        sendmessage(document.getElementById('message').value);
        document.getElementById("message").value = "";
        //sendphoto(document.getElementById('canvas' + counter).src);

    }

    function addSent() {
        counter++;

        //make a div
        var div = document.createElement('div');
        div.className = 'yourText';
        div.id = "line " + counter;

        //append this div to the content div
        document.getElementById('content').appendChild(div);

        //add what you sent in the text box
        document.getElementById(div.id).innerHTML = document.getElementById('message').value;

        //make a canvas
        var canvas = document.createElement("canvas");
        var context = canvas.getContext('2d');
        canvas.id = "canvas " + counter;
        div.appendChild(canvas);

        //draw the picture in the video
        context.drawImage(video, 0, 0, 200, 150);

        //convert the image to numbers
        var dataUrl = canvas.toDataURL();
        socket.emit('photo', dataUrl);

        if (counter > 7) {
            clearPage();
        }
    }

    function addReceived() {
        counter++;

        //make a div
        var div = document.createElement('div');
        div.className = 'theirText';
        div.id = "line " + counter;

        //append this div to the content div
        document.getElementById('content').appendChild(div);

        //add the received text
        document.getElementById(div.id).innerHTML = incoming;

        //make an image
        var photo = document.createElement('img');
        photo.id = "photo " + counter;

        div.appendChild(photo);


        if (counter > 7) {
            clearPage();
        }
    }


    function checkSubmit(e) {
        if (e && e.keyCode == 13) {
            submit();
        }
    }

    function clearContents(element) {
        element.value = '';
    }

    function clearPage() {

        //for the life of me i can't get the syntax in my for loop to work. so this is just done manually for now :(

        document.getElementById("content").removeChild(document.getElementById("line 1"));
        document.getElementById("content").removeChild(document.getElementById("line 2"));
        document.getElementById("content").removeChild(document.getElementById("line 3"));
        document.getElementById("content").removeChild(document.getElementById("line 4"));
        document.getElementById("content").removeChild(document.getElementById("line 5"));
        document.getElementById("content").removeChild(document.getElementById("line 6"));
        document.getElementById("content").removeChild(document.getElementById("line 7"));
        document.getElementById("content").removeChild(document.getElementById("line 8"));

        counter = 0;

        // for (i = 0; i < 8; i++) {
        //     console.log(i);
        //     console.log("line " + [i]);
        //     document.getElementById("content").removeChild(document.getElementById("'line ' + [i]"));
        // }
        // counter = 0;
    }

    window.addEventListener('load', init);
    </script>
</head>

<body>
    <div id="intro" class="header">
        <h1>face chat</h1>
    </div>
    <div id="connection" class="header">
    </div>
    <div id="div" class="video">
        <video id="thevideo" class="video">
        </video>
    </div>
    <div id="content" class="block">
    </div>
    <div id="textBox" class="box" onKeyPress="return checkSubmit(event)">
        <p align="center">
            <textarea id="message" name="message" class="textarea" onfocus="clearContents(this);">Press enter to submit.</textarea>
        </p>
    </div>
</body>

</html>

## server.js
var https = require('https');
var fs = require('fs'); // Using the filesystem module
var url = require('url');

var options = {
    key: fs.readFileSync('my-key.pem'),
    cert: fs.readFileSync('my-cert.pem')
};

function handleIt(req, res) {
    var parsedUrl = url.parse(req.url);

    var path = parsedUrl.pathname;
    if (path == "/") {
        path = "index.html";
    }

    fs.readFile(__dirname + path,

        // Callback function for reading
        function(err, fileContents) {
            // if there is an error
            if (err) {
                res.writeHead(500);
                return res.end('Error loading ' + req.url);
            }
            // Otherwise, send the data, the contents of the file
            res.writeHead(200);
            res.end(fileContents);
        }
    );

    // Send a log message to the console
    console.log("Got a request " + req.url);
}

var httpServer = https.createServer(options, handleIt);
httpServer.listen(8081);

// WebSocket Portion
// WebSockets work with the HTTP server
var io = require('socket.io').listen(httpServer);

// Register a callback function to run when we have an individual connection
// This is run for each individual user that connects
io.sockets.on('connection',
    // We are given a websocket object in our function
    function(socket) {

        console.log("We have a new client: " + socket.id);

        socket.on('chatmessage', function(data) {
            console.log("Received: 'chatmessage' " + data);
            socket.broadcast.emit('chatmessage', data);
        });


        socket.on('photo', function(data) {
            console.log("Received: 'photo' " + data);
            socket.broadcast.emit('photo', data);
        });


        socket.on('disconnect', function() {
            console.log("Client has disconnected " + socket.id);
        });
    }
);
	<html>

	<head>
	<link href='https://fonts.googleapis.com/css?family=Droid+Sans+Mono' rel='stylesheet' type='text/css'>
	<style>
	body {
	margin: 0;
	font-family: 'Droid Sans Mono';
	color: #ffffff;
	font-size: 12pt;
	background-color: #1D2D44;
	}

	h1 {
	margin: 0;
	font-family: 'Droid Sans Mono';
	color: #BC242C;
	font-size: 36pt;
	}

	div.header {
	margin-left: auto;
	margin-right: auto;
	padding: 10px;
	text-align: center;
	}

	div.block {
	padding: 10px;
	width: 1000px;
	float: left;
	}

	div.box {
	color: #8A1C7C;
	margin-left: auto;
	margin-right: auto;
	font-size: 12pt;
	width: 100%;
	position: absolute;
	bottom: 30;
	}

	div.video {
	margin-left: auto;
	margin-right: auto;
	margin-top: 10px;
	padding: 10px;
	float: right;
	}

	div.yourText {
	color: #DF6955;
	font-size: 12pt;
	font-weight: normal;
	width: 200px;
	padding: 10px;
	float: left;
	}

	div.theirText {
	color: #3D8C7D;
	font-size: 12pt;
	width: 200px;
	padding: 10px;
	float: left;
	}

	textarea {
	width: 300px;
	height: 100px;
	font-size: 12pt;
	font-family: 'Droid Sans Mono';
	float: center;
	}

	video {
	margin-left: auto;
	margin-right: auto;
	margin-top: 10px;
	padding: 10px;
	width: 200px;
	float: right;
	}
	</style>
	<script type="text/javascript" src="/socket.io/socket.io.js"></script>
	<script type="text/javascript">
	var socket = io.connect('https://nyh206.itp.io:8081/');
	//var socket = io.connect('http://localhost:8000/');
	var counter = 0;
	var incoming, photoIncoming, video, i;
	socket.on('connect', function() {
	console.log("Connected");
	document.getElementById("connection").innerHTML = "say it to my face";
	});

	//receive chats
	socket.on('chatmessage', function(data) {
	incoming = data;
	addReceived();
	});

	//receive images
	socket.on('photo', function(data) {
	console.log("got images");
	document.getElementById('photo ' + counter).src = data;
	//addReceived();
	});

	var sendmessage = function(message) {
	console.log("chatmessage: " + message);
	socket.emit('chatmessage', message);
	};

	var sendphoto = function(photo) {
	console.log("photo: " + photo);
	document.getElementById('canvas ' + counter).src = data;
	socket.emit('photo', photo);
	};


	function init() {
	// These help with cross-browser functionality (shim)
	window.URL = window.URL \|\| window.webkitURL \|\| window.mozURL \|\| window.msURL;
	navigator.getUserMedia = navigator.getUserMedia \|\| navigator.webkitGetUserMedia \|\| navigator.mozGetUserMedia \|\| navigator.msGetUserMedia;

	// The video element on the page to display the webcam
	video = document.getElementById('thevideo');


	// if we have the method
	if (navigator.getUserMedia) {
	navigator.getUserMedia({
	video: true
	}, function(stream) {
	video.src = window.URL.createObjectURL(stream) \|\| stream;
	video.play();

	}, function(error) {
	alert("Failure " + error.code);
	});
	}
	}

	function submit() {
	addSent();
	sendmessage(document.getElementById('message').value);
	document.getElementById("message").value = "";
	//sendphoto(document.getElementById('canvas' + counter).src);

	}

	function addSent() {
	counter++;

	//make a div
	var div = document.createElement('div');
	div.className = 'yourText';
	div.id = "line " + counter;

	//append this div to the content div
	document.getElementById('content').appendChild(div);

	//add what you sent in the text box
	document.getElementById(div.id).innerHTML = document.getElementById('message').value;

	//make a canvas
	var canvas = document.createElement("canvas");
	var context = canvas.getContext('2d');
	canvas.id = "canvas " + counter;
	div.appendChild(canvas);

	//draw the picture in the video
	context.drawImage(video, 0, 0, 200, 150);

	//convert the image to numbers
	var dataUrl = canvas.toDataURL();
	socket.emit('photo', dataUrl);

	if (counter > 7) {
	clearPage();
	}
	}

	function addReceived() {
	counter++;

	//make a div
	var div = document.createElement('div');
	div.className = 'theirText';
	div.id = "line " + counter;

	//append this div to the content div
	document.getElementById('content').appendChild(div);

	//add the received text
	document.getElementById(div.id).innerHTML = incoming;

	//make an image
	var photo = document.createElement('img');
	photo.id = "photo " + counter;

	div.appendChild(photo);


	if (counter > 7) {
	clearPage();
	}
	}


	function checkSubmit(e) {
	if (e && e.keyCode == 13) {
	submit();
	}
	}

	function clearContents(element) {
	element.value = '';
	}

	function clearPage() {

	//for the life of me i can't get the syntax in my for loop to work. so this is just done manually for now :(

	document.getElementById("content").removeChild(document.getElementById("line 1"));
	document.getElementById("content").removeChild(document.getElementById("line 2"));
	document.getElementById("content").removeChild(document.getElementById("line 3"));
	document.getElementById("content").removeChild(document.getElementById("line 4"));
	document.getElementById("content").removeChild(document.getElementById("line 5"));
	document.getElementById("content").removeChild(document.getElementById("line 6"));
	document.getElementById("content").removeChild(document.getElementById("line 7"));
	document.getElementById("content").removeChild(document.getElementById("line 8"));

	counter = 0;

	// for (i = 0; i < 8; i++) {
	// console.log(i);
	// console.log("line " + [i]);
	// document.getElementById("content").removeChild(document.getElementById("'line ' + [i]"));
	// }
	// counter = 0;
	}

	window.addEventListener('load', init);
	</script>
	</head>

	<body>
	<div id="intro" class="header">
	<h1>face chat</h1>
	</div>
	<div id="connection" class="header">
	</div>
	<div id="div" class="video">
	<video id="thevideo" class="video">
	</video>
	</div>
	<div id="content" class="block">
	</div>
	<div id="textBox" class="box" onKeyPress="return checkSubmit(event)">
	<p align="center">
	<textarea id="message" name="message" class="textarea" onfocus="clearContents(this);">Press enter to submit.</textarea>
	</p>
	</div>
	</body>

	</html>
	var https = require('https');
	var fs = require('fs'); // Using the filesystem module
	var url = require('url');

	var options = {
	key: fs.readFileSync('my-key.pem'),
	cert: fs.readFileSync('my-cert.pem')
	};

	function handleIt(req, res) {
	var parsedUrl = url.parse(req.url);

	var path = parsedUrl.pathname;
	if (path == "/") {
	path = "index.html";
	}

	fs.readFile(__dirname + path,

	// Callback function for reading
	function(err, fileContents) {
	// if there is an error
	if (err) {
	res.writeHead(500);
	return res.end('Error loading ' + req.url);
	}
	// Otherwise, send the data, the contents of the file
	res.writeHead(200);
	res.end(fileContents);
	}
	);

	// Send a log message to the console
	console.log("Got a request " + req.url);
	}

	var httpServer = https.createServer(options, handleIt);
	httpServer.listen(8081);

	// WebSocket Portion
	// WebSockets work with the HTTP server
	var io = require('socket.io').listen(httpServer);

	// Register a callback function to run when we have an individual connection
	// This is run for each individual user that connects
	io.sockets.on('connection',
	// We are given a websocket object in our function
	function(socket) {

	console.log("We have a new client: " + socket.id);

	socket.on('chatmessage', function(data) {
	console.log("Received: 'chatmessage' " + data);
	socket.broadcast.emit('chatmessage', data);
	});


	socket.on('photo', function(data) {
	console.log("Received: 'photo' " + data);
	socket.broadcast.emit('photo', data);
	});


	socket.on('disconnect', function() {
	console.log("Client has disconnected " + socket.id);
	});
	}
	);