当我在 HTML 中删除表单时，为什么我的 WebSocket 不工作？

Question

我正在使用 WebSocket 来显示一个特定的值，该值计算所有时间对我网站的所有访问已经过去了多少秒。例如，如果用户 A 在我的站点上花费了 20 秒，用户 B 花费了 30 秒，用户 C 花费了 10 秒，则计数器增加了 60 秒。计数器不断更新。这是我在 JavaScript 和 HTML 中的代码。现在，我想从 HTML 中删除表单，但是当我这样做时，我得到文本“[object HTMLTextAreaElement]”。我该如何解决这个问题并让我的网站正常运行？

var socket = new WebSocket('ws://echo.websocket.org');
function count() {
 if(! counter){
  var counter = 1;
 } else {
  counter = counter + 1;
 };
 socket.send(counter);
 document.getElementById('messages').innerHTML = '<li>' + message + '</li>';
}
setInterval(count, 1000);
count();
window.close() = function() {
 socket.close();
};

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>
        WebSockets Demo
    </title>
  </head>
  <body>
    <div id="page-wrapper">
      <h1>
        WebSockets Demo
      </h1>
      <ul id="messages">
      </ul>
      <form id="message-form" action="#" method="post">
        <textarea id="message" required></textarea>
        <button type="submit">
          Send Message
        </button>
      </form>
    </div>
    <script src="app.js">
    </script>
  </body>
</html>

Answer 1

您的变量 message 未在您的代码中定义。因此，它会引用你的 HTML DOM 对应的id，即 <textarea id="message" required></textarea>.

我假设你想显示从回显服务器返回的消息。如果是这样，代码将如下所示：

var socket = new WebSocket('wss://echo.websocket.org');
var counter = 0;
function count() {
 counter++;
 socket.send(counter);
}
socket.onmessage = function(evt){
    document.getElementById('messages').innerHTML += '<li>' + evt.data + '</li>';
};
socket.onopen = function(){
    setInterval(count, 1000);
    count();
};
window.close() = function() {
 socket.close();
};

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>
        WebSockets Demo
    </title>
  </head>
  <body>
    <div id="page-wrapper">
      <h1>
        WebSockets Demo
      </h1>
      <ul id="messages">
      </ul>
      <form id="message-form" action="#" method="post">
        <textarea id="message" required></textarea>
        <button type="submit">
          Send Message
        </button>
      </form>
    </div>
    <script src="app.js">
    </script>
  </body>
</html>

当我在 HTML 中删除表单时，为什么我的 WebSocket 不工作？

Why is my WebSocket not working when I remove a form in HTML?

html

javascript

websocket