v2-webchat-client/assets/js/chat.js

class Client extends WebSocket {
    #connected = false
    username = "Guest".concat(Math.round(Math.random() * 9999).toString());

    constructor(url, username) {
        super(url);
        if (username != null || username != "") {
            this.username = username;
        }
        super.onopen = this.onopen;
        super.onmessage = this.onmessage;
        super.onclose = this.onclose;
        console.log("Trying to connect to server {} with username {}.".format(url,username))
    }

    onopen() {
        console.log("Connecting...");
        this.connected = true;
        this.send({username: this.username, clientdata: {}});
    }

    onmessage(event) {
        var chatbox = document.getElementById("chat-box");
        var follow = chatbox.scrollHeight - chatbox.scrollTop - chatbox.clientHeight == 0;
        try {
            const data = JSON.parse(event.data);
            switch (data.type) {
                case "message":
                    console.log(data.content.replaceAll("\n", "   "));
                    data.content.split("\n").forEach(line => {
                        chatbox.innerHTML += "<p class='chattext'>" + line + "</p>";
                    })
                    if (data.content.slice(0, data.content.search(":")) != this.username) {
                        document.getElementById('notify').play();
                    }
                    break;
                case "join":
                    console.log(data.username + " joined the chat");
                    chatbox.innerHTML += "<p class='chattext'>" + data.username + " joined the chat</p>";
                    if (data.username != this.username) {
                        document.getElementById('join').play();
                    }
                    break;
                case "leave":
                    console.log(data.username + " left the chat");
                    chatbox.innerHTML += "<p class='chattext'>" + data.username + " left the chat</p>";
                    break;
                default:
                    console.log("Unhandled packet: " + JSON.stringify(data));
                    this.send({type: "unhandled", packet: JSON.stringify(data)});
                    break;
            }
        } catch {
            console.log(event.data)
            chatbox.innerHTML += "<p class='chattext'>" + event.data + "</p>";
            if (event.data.slice(0, event.data.search(":")) != this.username) {
                document.getElementById('audioElement').play();
            }
        }
        if (follow) {
            chatbox.scrollTop = chatbox.scrollHeight;
        }
    }

    onclose() {
        this.connected = false;
        console.log("Disconnected!");
        document.getElementById("chat-box").innerHTML += "<p class='chattext'>Disconnected</p>";
    }

    send(data) {
        super.send(JSON.stringify(data));
    }
};

// JS Patch for formatting
// STACKOVERFLOW!!!
String.prototype.format = function () {
  var i = 0, args = arguments;
  return this.replace(/{}/g, function () {
    return typeof args[i] != 'undefined' ? args[i++] : '';
  });
};

let socket = new Client("ws://" + (location.host.search(":") == -1 ? location.host : location.host.slice(0, location.host.search(":"))) + ":8765", getUsername());

function getUsername() {
    var username = localStorage.getItem("username")
    if (username == null) {
        username = prompt("Enter your username. Press cancel or just type in nothing to get a anonymous username:");
        if (username == null || username == ""){
            username = "Guest".concat(Math.round(Math.random() * 9999).toString());
        }
        localStorage.setItem("username", username);
    }
    return username;
}

function setUsername() {
    username = prompt("Enter your username. Press cancel or just type in nothing to get a anonymous username:");
    if (username == null || username == ""){
        username = "Guest".concat(Math.round(Math.random() * 9999).toString());
    }
    localStorage.setItem("username", username);
    location.reload();
}

function onload() {
    document.getElementById("username").innerText = "Chatting as " + getUsername();
    document.getElementById("message").addEventListener("keyup", event => {
        if (event.key == "Enter" && !event.shiftKey) {
            document.getElementById("sendbutton").click();
        }
        event.preventDefault();
    });
}

function sendMessage() {
    var element = document.getElementById("message");
    var message = element.value;
    element.value = message.split
    socket.send({
        type: "message",
        message: message
    });
    element.value = "";
}