js without jQuery (#342)

Co-authored-by: Rob Ede <robjtede@icloud.com>
2025-02-17 07:23:29 +01:00 · 2020-11-01 00:55:23 +09:00 · 2020-11-01 00:55:23 +09:00 · 542e6dbcdd
commit 542e6dbcdd
parent 7148fd3d0e
1 changed files with 107 additions and 85 deletions
--- a/websocket-chat/static/websocket.html
+++ b/websocket-chat/static/websocket.html
@ -1,90 +1,112 @@
 <!DOCTYPE html>
-<meta charset="utf-8" />
 <html>
-<head>
-<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
-</script>
-  <script language="javascript" type="text/javascript">
-    $(function() {
-      var conn = null;
-      function log(msg) {
-        var control = $('#log');
-        control.html(control.html() + msg + '<br/>');
-        control.scrollTop(control.scrollTop() + 1000);
-      }
-      function connect() {
-        disconnect();
-        var 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();
-        };
-      }
-      function disconnect() {
-        if (conn != null) {
-          log('Disconnecting...');
-          conn.close();
-          conn = null;
-          update_ui();
+  <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()
+          }
        }
      }
-      function update_ui() {
-        var msg = '';
-        if (conn == null) {
-          $('#status').text('disconnected');
-          $('#connect').html('Connect');
-        } else {
-          $('#status').text('connected (' + conn.protocol + ')');
-          $('#connect').html('Disconnect');
-        }
-      }
-      $('#connect').click(function() {
-        if (conn == null) {
-          connect();
-        } else {
-          disconnect();
-        }
-        update_ui();
-        return false;
-      });
-      $('#send').click(function() {
-        var text = $('#text').val();
-        log('Sending: ' + text);
-        conn.send(text);
-        $('#text').val('').focus();
-        return false;
-      });
-      $('#text').keyup(function(e) {
-        if (e.keyCode === 13) {
-          $('#send').click();
-          return false;
-        }
-      });
-    });
-</script>
-</head>
-<body>
-<h3>Chat!</h3>
-<div>
-  <button id="connect">Connect</button>&nbsp;|&nbsp;Status:
-  <span id="status">disconnected</span>
-</div>
-<div id="log"
-     style="width:20em;height:15em;overflow:auto;border:1px solid black">
-</div>
-<form id="chatform" onsubmit="return false;">
-  <input id="text" type="text" />
-  <input id="send" type="button" value="Send" />
-</form>
-</body>
+    </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>