websocket-chat/static/websocket.html

<!DOCTYPE html>
<html>
  <head>
    <title>Chat!</title>

    <meta charset="utf-8" />

    <script>
      'use strict'

      window.onload = () => {
        let conn = null

        const log = (msg) => {
          div_log.innerHTML += msg + '<br>'
          div_log.scroll(0, div_log.scrollTop + 1000)
        }

        const connect = () => {
          disconnect()

          const wsUri =
            (window.location.protocol === 'https:' ? 'wss://' : 'ws://') +
            window.location.host +
            '/ws/'

          conn = new WebSocket(wsUri)
          log('Connecting...')

          conn.onopen = function () {
            log('Connected.')
            update_ui()
          }

          conn.onmessage = function (e) {
            log('Received: ' + e.data)
          }

          conn.onclose = function () {
            log('Disconnected.')
            conn = null

            update_ui()
          }
        }

        const disconnect = () => {
          if (conn) {
            log('Disconnecting...')
            conn.close()
            conn = null

            update_ui()
          }
        }

        const update_ui = () => {
          if (!conn) {
            span_status.textContent = 'disconnected'
            btn_connect.textContent = 'Connect'
          } else {
            span_status.textContent = `connected (${conn.protocol})`
            btn_connect.textContent = 'Disconnect'
          }
        }

        btn_connect.onclick = () => {
          if (!conn) {
            connect()
          } else {
            disconnect()
          }

          update_ui()
        }

        btn_send.onclick = () => {
          if (!conn) return

          const text = input_text.value
          log('Sending: ' + text)
          conn.send(text)

          input_text.value = ''
          input_text.focus()
        }

        input_text.onkeyup = (e) => {
          if (e.key === 'Enter') {
            btn_send.click()
          }
        }
      }
    </script>
  </head>

  <body>
    <h3>Chat!</h3>
    <div>
      <button id="btn_connect">Connect</button>
      Status: <span id="span_status">disconnected</span>
    </div>

    <div
      id="div_log"
      style="width: 20em; height: 15em; overflow: auto; border: 1px solid black"
    ></div>

    <input id="input_text" type="text" />
    <input id="btn_send" type="button" value="Send" />
  </body>
</html>