chat.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple Chat</title>
</head>
<body style="display: flex; gap: 12px;">

  <nav id="allUsers" hidden style="width: 200px;">
    <h1>All users</h1>
    <ul id="usernamesList"></ul>
  </nav>

  <main style="flex: 1">

    <p>
      Status: <span id="state">Disconnected</span>
      <button onclick="closeConnection();">Close</button>
      <button onclick="deleteCookie('session_id');location.reload()">Logout</button>
    </p>

    <section id="signForm">

      <form onsubmit="return signInOrUp(this)">
        <h1>Login/Register</h1>
        <input type="text" placeholder="Username" name="username" value="otto"> <br>
        <input type="password" placeholder="Password" name="password" value="1234"> <br>
        <button type="submit">Sign in or register</button>
      </form>

    </section>

    <section id="welcomeHeader" hidden>
      <h1>Hello <span id="username"></span>!</h1>
    </section>

    <section id="chatWindow" hidden>
      <h3>Your chat with <span id="otherUser"></span>.</h3>
      <div id="scrollDiv" style="height: 200px; overflow: auto;border:1px solid black;">
        <pre id="currentMessages"></pre>
      </div>
      <form onsubmit="return sendMessageTo();">
        <input id="myMessage" placeholder="Nachricht senden">
        <button type="submit" >Senden</button>
      </form>
    </section>

  </main>

  <script>

    var socket = null;
    var messages = {};
    var myUserName = null;
    var openChatWithUser = null;

    function updateMessages() {
      if (socket == null) return;
      if (openChatWithUser == null) return;

      var displayMessages = messages[openChatWithUser];
      if (displayMessages == null) return;

      var newMessageString = "";

      for (var message of displayMessages) {
        var time = new Date(message.created_at).toString().slice(16, 24);
        newMessageString += `[${time}] ${message.from}\n${message.message}\n\n`;
      }
      currentMessages.innerText += newMessageString.replace(currentMessages.innerText, "");
      scrollDiv.scrollTo(0, scrollDiv.scrollTopMax)
    }

    function sendMessageTo() {
      socket.send(JSON.stringify({
        kind: "new-message",
        message: {
          from: myUserName,
          to: openChatWithUser,
          message: myMessage.value,
          created_at: +new Date(),
        }
      }));
      return false;
    }

    function openChatWith(username) {
      otherUser.innerText = username;
      chatWindow.hidden = false;
      openChatWithUser = username;
      currentMessages.innerText = "";
      updateMessages();
    }

    function updateUserList(usernames) {
      if (socket == null) return;
      var list = "";
      for (var username of usernames) {
        username = escape(username);
        if (username == myUserName) continue;
        console.log(username, myUserName);
        list += `<li onclick="openChatWith('${username}')">${username}</li>`;
      }
      usernamesList.innerHTML = list;
    }

    function signInOrUp(form) {
      let data = new FormData(form);
      socket.send(JSON.stringify({
        kind: "login",
        user: {
          username: data.get("username"),
          password: data.get("password")
        }
      }));
      return false;
    }

    function activate_session(name) {
      console.log("Hello", name);
      username.innerText = name;
      welcomeHeader.hidden = false;
      allUsers.hidden = false;
      signForm.hidden = true;
    }

    function check_old_session() {
      if (socket === null) return;
      const session_id = getCookie("session_id");
      if (session_id === undefined) return;
      socket.send(JSON.stringify({
        kind: "check-session",
        session_id: session_id
      }));
    }

    function closeConnection() {
      state.innerText = "Closed";
      socket.close();
      socket = null;
    }

    function connect () {
      state.innerText = "Connecting... ";
      socket = new WebSocket('ws://localhost:3000');
      socket.onerror = e => console.log("[ERROR]", e);

      socket.onmessage =  m => {
        console.log(m);
        const data = JSON.parse(m.data);
        switch (data["kind"]) {
          case "error": alert(data['err']['message']); break;
          case "update-online-users":
            updateUserList(data["online_users"]["usernames"]);
            console.log(data);
            break;
          case "invalid-session":
            console.log("Invalid cookie");
            deleteCookie("session_id");
            break;
          case "session":
            document.cookie = "session_id=" + data["session_id"];
            activate_session(data["user"]["username"]);
            myUserName = data["user"]["username"];
            break;
          case "new-message":
            var otherUser = data["message"]["from"];
            if (otherUser == myUserName) {
              otherUser = data["message"]["to"];
            }
            if (messages[otherUser] === undefined) {
              messages[otherUser] = [];
            }
            messages[otherUser].push(data['message']);
            updateMessages();
            break;
          default: alert("Unknown error :/");
        }
      };
      socket.onclose = e => {
        state.innerText = "Disconnected (" + e.code + ")";
        socket = null;
      };
      socket.onopen = _ => {
        state.innerText = "Connected ";
        check_old_session();
      };
    }

    connect();

    // helper functions from stackoverflow xD
    function getCookie(name) {
      const value = `; ${document.cookie}`;
      const parts = value.split(`; ${name}=`);
      if (parts.length === 2) return parts.pop().split(';').shift();
    }

    function deleteCookie( name ) {
      if (getCookie(name)) {
        document.cookie = name + "=" +
          ";expires=Thu, 01 Jan 1970 00:00:01 GMT";
      }
    }

  </script>
</body>
</html>