Brandon Roots
  • INTERACTIVE
  • FILM
  • ABOUT
  • CONTACT
May 31, 2021

Chat with Web Sockets

broots ITP, Live Web

In Live Web this week we learned about Web Sockets, which are TCP sockets in a thin HTML wrapper. To demonstrate Web Sockets we were tasked with implementing a demo chat application then developing it further on our own.

First I setup a server on Digital Ocean, which was pretty similar to past experience setting up a virtual server with AWS.

Ask for name once

The sample code we worked together on added an input field for “name”. To push a user to write a name I added code to require a name before showing the message field. Also the name field cannot be changed after entering.

Sender visibility

In attempt to show both messages sent and received by the user I made one change to the server.js code, adding a socket.emit() below the socket.broadcast.emit() function.

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

Styling

For styling I attempted to segment the interface with CSS, giving separate backgrounds to the message and reply areas.

Enter Key and Focus

Some other helpful changes included bringing text fields automatically in focus for the keyboard, and listening for an enter key as a submit button.

Code below from my index.html document.

<html>
	<head>
		<script type="text/javascript" src="/socket.io/socket.io.js"></script>
		<script type="text/javascript">
		
			var socket = io.connect();

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

			// Receive from any event
			socket.on('chatmessage', function (data) {
				console.log(data);
				// 
 				document.getElementById('messages').innerHTML += data.name + ": " + data.message + "<br/>";
			});
			
			function sendmessage (message, name) {
				var dataToSend = new Object();


				// Use exisiting name if already set
				if(userName != ""){
					dataToSend.name = userName;
					
				} else {
					// Otherwise set name from name field and hide name input for message input
					userName = name;
					dataToSend.name = name;
					document.getElementById('name').style.display = "none";
					document.getElementById('nameLabel').style.display = "none";
					document.getElementById('message').style.display = "block";
					document.getElementById('message').focus();
					document.getElementById('messageLabel').style.display = "block";	
				}
				
				dataToSend.message = message;

				// Send message if not empty
				if(dataToSend.message != ""){
					console.log("chatmessage: " + dataToSend.message + ", from: " + dataToSend.name);
					socket.emit('chatmessage', dataToSend);	
				}

				// Erase message field after sending
				document.getElementById('message').value = "";
			};
	
		</script>
		<style>
			.center {
				position: fixed;
				top: 50%;
				left: 50%;
				/* bring your own prefixes */
				transform: translate(-50%, -50%);
			}

			.bottom {
				position: fixed;
				bottom: 0;
				left: 50%;
				/* bring your own prefixes */
				transform: translate(-50%, -50%);
				width: 100%;
			}

			#messages_wrapper {
				background-color: lightgrey;
				width: 100%;
				height: 100%;
				position: fixed;
				bottom: 30px;
				left: 50%;
				/* bring your own prefixes */
				transform: translate(-50%, -30px);
			}
			#messages {
				position: fixed;
				width: 100%;
				bottom: 0;
				left: 50%;
				/* bring your own prefixes */
				transform: translate(-50%, 0);
			}

			#mybutton {
				position: fixed;
				width: 60px;
				height: 30px;
				border-radius: 5px;
				stroke-width: 0%;
				right: 5px;
				bottom: 5px;
				background-color: lightskyblue;
			}

		</style>	
	</head>
 <body>

<div>
	<div id="messages_wrapper">
		<div id="messages">
		</div>
	</div>

	<div id="messageInput" class="bottom">
		<label for="message" id="messageLabel" style="display:none;">Message:</label>
		<input type="text" id="message" name="message" style="display:none;" autofocus>
		<label for="name" id="nameLabel">Name:</label>
		<input type="text" id="name" name="name" autofocus>
		<input type="submit" id="mybutton" value="send" onclick="sendmessage(document.getElementById('message').value, document.getElementById('name').value);">
		
	</div>
</div> 

<script>
	// Submit name on "enter" key press
	var nameInput = document.getElementById("name");
		nameInput.addEventListener("keyup", function(event) {
			if (event.keyCode === 13) {
				event.preventDefault();
				document.getElementById("mybutton").click();
			}
		});

	var messageInput = document.getElementById("message");
		messageInput.addEventListener("keyup", function(event) {
			if (event.keyCode === 13) {
				event.preventDefault();
				document.getElementById("mybutton").click();
			}
		});
</script>

 </body>
</html>
Synchronous Site and Self-Portrait Transmitting Other Data Types

Related Posts

Fractal Plant – Foiled by  Registers

Homemade Hardware, ITP, Solar Plant

Fractal Plant – Foiled by Registers

Since receiving the PCBs and successfully soldering the board together I have been trying to rewrite code for the I2C port expander. This has been immensely difficult! The Inkplate Arduino Library makes considerable use of an “Mcp” class, which is written to work with the MCP23017 GPIO expander IC. These chips are quite difficult to […]

“Handling” Playtest Week

Handling, ITP

“Handling” Playtest Week

Last week we attended “Playtest Thursday” on the second floor of 370 Jay St with our games. I came away from the experience with some very specific feedback. Seeing a number of people play the game showed me things I didn’t anticipate. Some folks approached the cabinet and immediately treated it as a touch screen. […]

Fractal Plant – Beta Build

Homemade Hardware, ITP, Solar Plant

Fractal Plant – Beta Build

The boards arrived! Amazingly within an hour of one another. Based on the experience I think that JLCPCB is a better value. With shipping OSHPark was $55.50 for 3 boards. JLCPCB was $26.36 for 10 boards. Aside from a higher cost OSHPark also left sharp bits of tabs around the edges of the boards which […]

Recent Posts

  • Fractal Plant – Foiled by  RegistersFractal Plant – Foiled by Registers
    May 9, 2022
  • “Handling” Playtest Week“Handling” Playtest Week
    May 5, 2022
  • Fractal Plant – Beta BuildFractal Plant – Beta Build
    April 24, 2022
Brandon Roots