nicolehe/index.html

## index.html
<html>

<head>
    <link href='https://fonts.googleapis.com/css?family=Arvo' rel='stylesheet' type='text/css'>
    <style>
    body {
        margin: 0;
        font-family: monospace;
        color: #413C58;
        font-size: 12pt;
        background-color: #1F0322;
    }

    h1 {
        margin: 0;
        font-family: monospace;
        color: #F0BCD4;
        font-size: 36pt;
        background-color: #1F0322;
    }

    #me {
        margin: 0;
        font-family: monospace;
        color: #FFFFFF;
        font-size: 13pt;
        background-color: #992542;
    }

    #them {
        margin: 0;
        font-family: monospace;
        color: #FFFFFF;
        font-size: 13pt;
        background-color: #63175A;
    }

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

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

    div.yourText {
        color: #DA4167;
        font-size: 12pt;
        font-weight: normal;
        width: 50%;
        margin-left: 30px;
        margin-top: 10px;
        float: left;
    }

    div.theirText {
        color: #8A1C7C;
        font-size: 12pt;
        width: 50%;
        margin-left: 30px;
        margin-top: 10px;
        float: left;
    }

    textarea {
        width: 300px;
        height: 100px;
        font-size: 12pt;
        float: right;
    }
    </style>
    <script type="text/javascript" src="/socket.io/socket.io.js"></script>
    <script type="text/javascript">
    var socket = io.connect('http://162.243.91.198:8080/');
    //var socket = io.connect('http://localhost:8080/');
    var counter = 0;
    var incoming;

    socket.on('connect', function() {
        console.log("Connected");
        document.getElementById("connection").innerHTML = "Say something and see if anyone is listening."

    });

    // Receive from any event
    socket.on('chatmessage', function(data) {
        console.log(data);
        incoming = data;
        addReceived();
    });

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

    function submit() {
        addSent();
        sendmessage(document.getElementById('message').value);
        document.getElementById("message").value = "";
    }

    function addSent() {
        counter++;
        var div = document.createElement('div');
        div.className = 'yourText';
        div.id = "line " + counter;

        document.getElementsByTagName('body')[0].appendChild(div);
        document.getElementById(div.id).innerHTML = "<span id = 'me'>You</span>: " + document.getElementById('message').value;
    }

    function addReceived() {
        counter++;
        var div = document.createElement('div');
        div.className = 'theirText';
        div.id = "line " + counter;

        document.getElementsByTagName('body')[0].appendChild(div);
        document.getElementById(div.id).innerHTML = "<span id = 'them'>Them</span>: " + incoming;
    }

    function checkSubmit(e) {
        if (e && e.keyCode == 13) {
            console.log("yes");
            submit();
        }
    }
    </script>
</head>

<body>
    <div id="intro" class="header">
        <h1>dispel your loneliness</h1>
    </div>
    <div id="connection" class="header">
    </div>
    <div id="textBox" class="box" onKeyPress="return checkSubmit(event)">
        <p align="center">
            <textarea id="message" name="message" class="textarea">Press enter to submit.</textarea>
        </p>
    </div>
</body>

</html>

## server.js
// HTTP Portion
var http = require('http');
var fs = require('fs'); // Using the filesystem module
var httpServer = http.createServer(requestHandler);
httpServer.listen(8080);

function requestHandler(req, res) {
	// Read index.html
	fs.readFile(__dirname + '/index.html',
		// Callback function for reading
		function (err, data) {
			// if there is an error
			if (err) {
				res.writeHead(500);
				return res.end('Error loading canvas_socket.html');
			}
			// Otherwise, send the data, the contents of the file
			res.writeHead(200);
			res.end(data);
  		}
  	);
}


// 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);

		// When this user emits, client side: socket.emit('otherevent',some data);
		socket.on('chatmessage', function(data) {
			// Data comes in as whatever was sent, including objects
			console.log("Received: 'chatmessage' " + data);

			// Send it to all of the clients
			socket.broadcast.emit('chatmessage', data);
		});


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

	<head>
	<link href='https://fonts.googleapis.com/css?family=Arvo' rel='stylesheet' type='text/css'>
	<style>
	body {
	margin: 0;
	font-family: monospace;
	color: #413C58;
	font-size: 12pt;
	background-color: #1F0322;
	}

	h1 {
	margin: 0;
	font-family: monospace;
	color: #F0BCD4;
	font-size: 36pt;
	background-color: #1F0322;
	}

	#me {
	margin: 0;
	font-family: monospace;
	color: #FFFFFF;
	font-size: 13pt;
	background-color: #992542;
	}

	#them {
	margin: 0;
	font-family: monospace;
	color: #FFFFFF;
	font-size: 13pt;
	background-color: #63175A;
	}

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

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

	div.yourText {
	color: #DA4167;
	font-size: 12pt;
	font-weight: normal;
	width: 50%;
	margin-left: 30px;
	margin-top: 10px;
	float: left;
	}

	div.theirText {
	color: #8A1C7C;
	font-size: 12pt;
	width: 50%;
	margin-left: 30px;
	margin-top: 10px;
	float: left;
	}

	textarea {
	width: 300px;
	height: 100px;
	font-size: 12pt;
	float: right;
	}
	</style>
	<script type="text/javascript" src="/socket.io/socket.io.js"></script>
	<script type="text/javascript">
	var socket = io.connect('http://162.243.91.198:8080/');
	//var socket = io.connect('http://localhost:8080/');
	var counter = 0;
	var incoming;

	socket.on('connect', function() {
	console.log("Connected");
	document.getElementById("connection").innerHTML = "Say something and see if anyone is listening."

	});

	// Receive from any event
	socket.on('chatmessage', function(data) {
	console.log(data);
	incoming = data;
	addReceived();
	});

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

	function submit() {
	addSent();
	sendmessage(document.getElementById('message').value);
	document.getElementById("message").value = "";
	}

	function addSent() {
	counter++;
	var div = document.createElement('div');
	div.className = 'yourText';
	div.id = "line " + counter;

	document.getElementsByTagName('body')[0].appendChild(div);
	document.getElementById(div.id).innerHTML = "<span id = 'me'>You</span>: " + document.getElementById('message').value;
	}

	function addReceived() {
	counter++;
	var div = document.createElement('div');
	div.className = 'theirText';
	div.id = "line " + counter;

	document.getElementsByTagName('body')[0].appendChild(div);
	document.getElementById(div.id).innerHTML = "<span id = 'them'>Them</span>: " + incoming;
	}

	function checkSubmit(e) {
	if (e && e.keyCode == 13) {
	console.log("yes");
	submit();
	}
	}
	</script>
	</head>

	<body>
	<div id="intro" class="header">
	<h1>dispel your loneliness</h1>
	</div>
	<div id="connection" class="header">
	</div>
	<div id="textBox" class="box" onKeyPress="return checkSubmit(event)">
	<p align="center">
	<textarea id="message" name="message" class="textarea">Press enter to submit.</textarea>
	</p>
	</div>
	</body>

	</html>
	// HTTP Portion
	var http = require('http');
	var fs = require('fs'); // Using the filesystem module
	var httpServer = http.createServer(requestHandler);
	httpServer.listen(8080);

	function requestHandler(req, res) {
	// Read index.html
	fs.readFile(__dirname + '/index.html',
	// Callback function for reading
	function (err, data) {
	// if there is an error
	if (err) {
	res.writeHead(500);
	return res.end('Error loading canvas_socket.html');
	}
	// Otherwise, send the data, the contents of the file
	res.writeHead(200);
	res.end(data);
	}
	);
	}


	// 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);

	// When this user emits, client side: socket.emit('otherevent',some data);
	socket.on('chatmessage', function(data) {
	// Data comes in as whatever was sent, including objects
	console.log("Received: 'chatmessage' " + data);

	// Send it to all of the clients
	socket.broadcast.emit('chatmessage', data);
	});


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