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')
};

var clientCount = 0;
var clientList = [];

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(4000);

// 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(message, randoPicked) {
            console.log("Received: 'chatmessage' " + message);
            console.log("RANDO PICKED: " + randoPicked);
            io.to(randoPicked).emit('takePic');
            socket.broadcast.emit('chatmessage', message);
        });


        socket.on('photo', function(data) {
            socket.broadcast.emit('photo', data);
        });



        clientCount++; //when a user connects, add to the number of total users in the room
        clientList.push(socket.id); //push their ID to the list of client IDs
        console.log(clientList);

        //send each user their own ID
        io.to(socket.id).emit('myID', socket.id);

        //send the number of clients online to everyone
        io.sockets.emit('clientCounter', clientCount);

        //send the list of clients online to everyone
        io.sockets.emit('clientLister', clientList);


        socket.on('disconnect', function() {
            clientCount--;

            //remove them from the client list array
            var index = clientList.indexOf(socket.id);
            if (index > -1) {
                clientList.splice(index, 1);
            }

            console.log("Client has disconnected " + socket.id);
            io.sockets.emit('clientCounter', clientCount);
            console.log(clientCount);
            console.log(clientList);
        });

    }
);

style.css

body {
    margin: 0;
    font-family: 'Droid Sans Mono';
    color: #426A5A;
    font-size: 12pt;
    background-color: #ECE2D0;
}

b {
    color: #DE287D;
}

h1 {
    margin: 0;
    font-family: 'Droid Sans Mono';
    color: #F4F1DE;
    background-color: #7FD1B9;
    font-size: 36pt;
}

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


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

div.box {
    color: #8A1C7C;
    font-size: 12pt;
    width: 100%;
    position: fixed;
    bottom: 100;
    padding: 3px;
}

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

div.myMessage {
    margin-left: auto;
    margin-right: auto;
    color: #EF6F6C;
    font-size: 18pt;
    font-weight: normal;
    width: 80%;
    padding: 5px;
}

div.theirMessage {
    margin-left: auto;
    margin-right: auto;
    color: #EF6F6C;
    font-size: 18pt;
    font-weight: normal;
    width: 80%;
    padding: 5px;
}

div.pic {
    float: right;
    width: 200px;
}

div.participants {
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    padding: 10px;
    width: 290px;
    position: fixed;
    bottom: 180px;
    right: 50px;
}

textarea {
    width: 300px;
    padding: 10px;
    font-size: 12pt;
    font-family: 'Droid Sans Mono';
    position: fixed;
    bottom: 100px;
    right: 50px;
}

video {
    margin-left: auto;
    margin-right: auto;
    padding: 10px;
    width: 200px;
    position: fixed;
    bottom: 270px;
    right: 100px;
}

#cleared {
    clear: both;
}

#wrapper {
    margin-left: 10%;
    margin-right: 10%;
}

#content {
    overflow: scroll;
}

swap-chat.html

<html>

<head>
    <link href='https://fonts.googleapis.com/css?family=Droid+Sans+Mono' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script type="text/javascript" src="/socket.io/socket.io.js"></script>
    <script type="text/javascript">
    var socket = io.connect();
    var counter = 0;
    var clientCount = 0;
    var incoming, video;

    var notMe = [];

    socket.on('connect', function() {
        console.log("Connected");
    });

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

    //display the number of clients currently in the room
    socket.on('clientCounter', function(data) {
        clientCount = data;
        console.log(clientCount);
        if (clientCount == 1) {
            document.getElementById("peopleInHere").innerHTML = "you're the only one in this room";
        } else {
            document.getElementById("peopleInHere").innerHTML = "there are " + "<b>" + clientCount + "</b>" + " people in this room";
        }
    });

    //get my own id
    socket.on('myID', function(data) {
        myID = data;
        console.log("My ID is " + data);
    });

    //get the client list and make a list of everyone that is not me
    socket.on('clientLister', function(data) {
        notMe = data;
        var index = notMe.indexOf(myID);
        if (index > -1) {
            notMe.splice(index, 1);
        }
        console.log("Everyone else that's not me: " + notMe);

    });

    //todo
    socket.on('takePic', function(data) {
        takeMyPic();
    });

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


    function sendmessage(message, randoPicked) {
        console.log('chatmessage: ' + message);
        //pick a random person each time
        randoPicked = notMe[Math.floor(Math.random() * notMe.length)];
        console.log("RANDO PICKED: " + randoPicked);
        socket.emit('chatmessage', message, randoPicked);
    }

    function sendphoto(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);
            });
        } else {
            alert("Sorry, you have to enable your camera to participate. No Peeping Toms!!");
        }
    }

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

    }

    function takeMyPic() {
        window.scrollTo(0, document.body.scrollHeight);

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

        //make a div
        var div = document.createElement('div');
        div.className = 'myMessage';
        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 an image
        var photo = document.createElement('img');
        photo.id = "photo " + counter;

        div.appendChild(photo);


    }

    function addSent() {
        window.scrollTo(0, document.body.scrollHeight);

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

        counter++;

        //make a div
        var div = document.createElement('div');
        div.className = 'myMessage';
        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 = "<p>" + document.getElementById('message').value + "</p>";

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

        div.appendChild(photo);

    }

    function addReceived() {
        window.scrollTo(0, document.body.scrollHeight);

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

        counter++;

        //make a div
        var div = document.createElement('div');
        div.className = 'theirMessage';
        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 = "<p>" + incoming + "</p>";

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

        //draw the picture in the video
        context.drawImage(video, 0, 0, 320, 240);

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


    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++) {
        //     var lines = [];
        //     console.log('line  ' + lines[i]);
        //     //document.getElementById("content").removeChild(document.getElementById("'line  ' + lines[i]"));
        // }
        // counter = 0;
    }


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

<body>
    <div id="intro" class="header">
        <h1>swap chat swap chat swap 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);">Say something, then press enter to submit.</textarea>
        </p>
    </div>
    <div id="peopleInHere" class="participants">
    </div>
</body>

</html>