Posted on and Updated on

Live Web ⁄ Class 2 ⁄ Node + Socket.io Chat

Live url TBA, DigitalOcean locked my account immediately after registration and haven’t got back to me yet.

html & css:

<html>
	<head>
		<title>CH4T</title>
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
		<script type="text/javascript" src="/socket.io/socket.io.js"></script>
		<script type="text/javascript" src="chat.js"></script>
		<script type="text/javascript">			
		</script>
	</head>
 <body id="body">
	 <div id=main>
		 <input type="text" id="message" name="message">
		 <input type="submit" value=">" onclick="sendmessage(document.getElementById('message').value);">
		 <div id="messages"></div>
		 </div>

		 <style>
			 #main {
			 	/*margin:50px;*/
			 }
			 .newBg{
			 	position:absolute;
			 	top:0;
			 	right:0;
			 	z-index: -1;
			 	width:100vw;
			 	height:90vh;
			 }
			 input {
			 	/*width:100%;*/
			 	border-radius: 2px;
			 }
			 button {
			 	border-radius: 2px;
			 }
			.msgBox {
				position:relative;
				float:left;
				display:block;
				width:100%;
				padding:5px;
				margin:5px 10px 0 0; 
				background:rgba(0,0,0,0.05);
				border-radius: 2px;
			}
		</style>
 </body>
</html>

js:

var socket = io.connect();

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

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

    //colors
    var colors = ["red", "orange", "yellow", "green", "blue", "purple", "pink", "brown", "black", "white"];
    for (var i = 0; i < colors.length; i++) {
        if (data == colors[i]) {
            var body = document.getElementById("body");
            body.style.background = colors[i];
        }
    }

    //bg images
    if (data == "zoom") {
        // document.body.style.backgroundImage = "url('img/zoom.gif')";
        var newBg = document.createElement("newBg");
        newBg.className = "newBg";
        newBg.style.backgroundImage = "url('img/zoom.gif')";
        document.body.appendChild(newBg);
    }
    if (data == "blood") {
        // document.body.style.backgroundImage = "url('img/zoom.gif')";
        var newBg = document.createElement("newBg");
        newBg.className = "newBg";
        newBg.style.backgroundImage = "url('img/blood.gif')";
        document.body.appendChild(newBg);
    }
    if (data == "cat") {
        // document.body.style.backgroundImage = "url('img/zoom.gif')";
        var newBg = document.createElement("newBg");
        newBg.className = "newBg";
        newBg.style.backgroundImage = "url('img/cat.gif')";
        document.body.appendChild(newBg);
    }
    if (data == "explode") {
        // document.body.style.backgroundImage = "url('img/zoom.gif')";
        var newBg = document.createElement("newBg");
        newBg.className = "newBg";
        newBg.style.backgroundImage = "url('img/explode.gif')";
        document.body.appendChild(newBg);
    }
    if (data == "kirby") {
        // document.body.style.backgroundImage = "url('img/zoom.gif')";
        var newBg = document.createElement("newBg");
        newBg.className = "newBg";
        newBg.style.backgroundImage = "url('img/kirby.gif')";
        document.body.appendChild(newBg);
    }
    if (data == "pizza") {
        // document.body.style.backgroundImage = "url('img/zoom.gif')";
        var newBg = document.createElement("newBg");
        newBg.className = "newBg";
        newBg.style.backgroundImage = "url('img/pizza.gif')";
        document.body.appendChild(newBg);
    }
    if (data == "werq") {
        // document.body.style.backgroundImage = "url('img/zoom.gif')";
        var newBg = document.createElement("newBg");
        newBg.className = "newBg";
        newBg.style.backgroundImage = "url('img/professional.gif')";
        document.body.appendChild(newBg);
    }
    if (data == "rain") {
        // document.body.style.backgroundImage = "url('img/zoom.gif')";
        var newBg = document.createElement("newBg");
        newBg.className = "newBg";
        newBg.style.backgroundImage = "url('img/rain.gif')";
        document.body.appendChild(newBg);
    }
    if (data == "snow") {
        // document.body.style.backgroundImage = "url('img/zoom.gif')";
        var newBg = document.createElement("newBg");
        newBg.className = "newBg";
        newBg.style.backgroundImage = "url('img/snow.gif')";
        document.body.appendChild(newBg);
    }
    if (data == "sparkle") {
        // document.body.style.backgroundImage = "url('img/zoom.gif')";
        var newBg = document.createElement("newBg");
        newBg.className = "newBg";
        newBg.style.backgroundImage = "url('img/sparkle.gif')";
        document.body.appendChild(newBg);
    }
    if (data == "water") {
        // document.body.style.backgroundImage = "url('img/zoom.gif')";
        var newBg = document.createElement("newBg");
        newBg.className = "newBg";
        newBg.style.backgroundImage = "url('img/water.gif')";
        document.body.appendChild(newBg);
    }
    if (data == "wizard") {
        // document.body.style.backgroundImage = "url('img/zoom.gif')";
        var newBg = document.createElement("newBg");
        newBg.className = "newBg";
        newBg.style.backgroundImage = "url('img/wizard.gif')";
        document.body.appendChild(newBg);
    }

    if (data == "nothing") {
        var thisBg = document.getElementsByClassName("newBg");
        document.body.removeChild(thisBg);
    }

    var msgBox = document.createElement("msgBox");
    msgBox.className = "msgBox";
    msgBox.innerHTML = data;

    document.getElementById("messages").appendChild(msgBox);
});

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

Leave a Reply

Your email address will not be published. Required fields are marked *