go-websockets-talk/code/static/js/index.js

//Saved nickname from previous usage
let nickname = window.localStorage.getItem("nickname");

//Nickname button and input
let nickI = document.getElementById("nickI");
let nickB = document.getElementById("nickB");

if (nickname != null) {
	nickI.value = nickname;	
}

//Chatting button and input
let chatI = document.getElementById("chatI");
let chatB = document.getElementById("chatB");

let registered = false;
let modal = document.getElementById("modal");

//Gets websocket url by replacing http with ws and https with wss, and appending /websocket to the host
let protocol = location.protocol == "http:" ? "ws:" : "wss:";
let url = protocol + "//" + location.host + "/websocket";

let ws = new WebSocket(url);

ws.onopen = function() {
	modal.style.display = "block";
	nickI.focus();
}

ws.onmessage = function(info) {
	let data = JSON.parse(info.data);
	if(!data.success)	{
		toast("Error: " + data.content);
		return;
	}
	if (!registered) {
		registered = true;
		window.localStorage.setItem("nickname", nickname);
		modal.style.display = "none";
		chatI.focus()
		let users = data.content;
		for(let i = 0; i < users.length; i++) {
			userJoin(users[i]);
		}
		return;
	}

	newMessage(data);
}

/*
 * Message receive handling
 */

function newMessage(data) {
	switch(data.type) {
		case "join":
			userJoin(data.content);
			break;
		case "leave":
			userLeave(data.content);
			break;
		case "message":
			chatMessage(data.sender, data.content, data.date)
	}
}

function chatMessage(sender, content, date) {
	let msg = create("div", "message");
	let hr = create("hr", "seperator");

	let author = create("div", "author");
	author.innerText = sender;

	let timestamp = create("div", "timestamp");
	timestamp.innerText = dateToString(new Date(date));

	let text = create("div", "content");
	text.innerText = content;
	
	msg.append(hr, author, timestamp, text);

	//If message scrolling at the bottom, move to bottom again to update
	let scroller = document.getElementsByClassName("messages")[0];
	let currentScroll = scroller.scrollTop;
	let maxScroll = scroller.scrollHeight - scroller.clientHeight;

	document.getElementById("messages").append(msg);

	if (currentScroll === maxScroll) {
		msg.scrollIntoView();
	}
}

function userJoin(user) {
	let p = document.createElement("p");
	p.className = user;
	p.innerText = user;
	document.getElementById("users").appendChild(p);
}

function userLeave(user) {
	users = document.getElementById("users");
	users.removeChild(users.getElementsByClassName(user)[0]);
}

/*
 * Registration
 */
function register() {
	let nick = nickI.value;
	if (nick.trim().length == 0) return;
	nickname = nick;
	ws.send(nick);
}

nickI.onkeydown = function(ev) {
	if(ev.key !== "Enter") {
		return;
	}
	register();
}

nickB.onclick = function() { 
	register();
}

/**
 * Message sending
 */

chatI.onkeydown = function(ev) {
	if(ev.key !== "Enter") {
		return;
	}
	if(chatI.value.trim().length == 0) return;

	ws.send(chatI.value);
	chatI.value = "";
}
nickB.onclick = function() {
	if(chatI.value.trim().length == 0) return;

	ws.send(chatI.value);
	chatI.value = "";
}

/*
 * Util functions
 */
function toast(message) {
	var x = document.getElementById("snackbar");
	x.innerText = message;
	x.className = "snackshow";
	setTimeout(function(){ x.className = x.className.replace("snackshow", ""); }, 3000);
}

let months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
function dateToString(date) {
	let year = date.getFullYear();
	let month = months[date.getMonth()];
	let day = date.getDate();
	let hour = date.getHours();
	let minute = date.getMinutes();
	return ` ${day} ${month} ${year} at ${hour}:${minute}`;
}

function create(name, classes) {
	let x = document.createElement(name);
	x.className = classes;
	return x;
}