Try Swap Chat here.
For my midterm, I made a chat room that takes a picture of somebody else in the room whenever you submit a message. I built it off of the Face Chat from the other week.
One of the first things I added was a thing to tell you how many other people are currently in the room. I kept track of the client count in a variable in the server-side code, and added to it every time a new person joined the room. Once they disconnected, I removed a number, and I sent this updating number over to the client-side, which shows it on the page.
In order to take a picture of a different person in the room, I made an array of all the clients’ socket IDs, and added someone’s ID once they joined, and then removed them once they left.
I knew I had to pick a random ID from the ID array in order to take a picture of that person, but I didn’t want the user getting themselves, so I made another array called notMe[] of all the IDs in the room except for the user’s own ID on the client side. Then sending a message looked like this:
function sendmessage(message, randoPicked) {
//pick a random person each time
randoPicked = notMe[Math.floor(Math.random() * notMe.length)];
socket.emit(‘chatmessage’, message, randoPicked);
}
From there, I executed the picture-taking code, and added that photo to the text that the original user sent.
There were a couple other extra things I added in order to make the chat experience a little better, like the floating text box, and the auto-scrolling to the bottom of the page once new data is added.
There are still a lot of CSS related things I’d want to change so that it looks better, but getting all my divs lined up properly is a task beyond me right now. I also want to add something that prevents people who don’t allow a camera on the page to not be able to access the content.
I’ve only tested it myself with two cameras, so we’ll see what happens once more users try it……
See Swap Chat here.
https://gist.github.com/nicolehe/7e1851098f751d7a1609.js