当 websocket 服务器在线时 button.onclick 不起作用

Posted

技术标签:

【中文标题】当 websocket 服务器在线时 button.onclick 不起作用【英文标题】:button.onclick does'nt work when websocket server is online 【发布时间】:2021-05-08 10:45:05 【问题描述】:

好吧,这很奇怪,我有一个前端 js 文件和一个 html 文件:

const conn = new WebSocket('ws://localhost:8000');
const main = document.querySelector('.main');
const send = document.querySelector('#send');
const text = document.querySelector('#text');

conn.onopen = () => 
  console.log('connetion open');
  conn.send('heyya');


conn.onmessage = message => main.innerHTML += message.data;

conn.onerror = error => console.log('web socket not available');

send.addEventListener('click', e => 
  console.log('send');
)
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script defer src="app.js"></script>
</head>

<body>
  <div class="main">
    <input type="text" name="" id="text">
    <button id="send">Send</button>
  </div>
</body>

</html>

每当 websocket 启动并运行时,单击发送按钮什么都不做,变量发送似乎不是指 html 中的发送按钮。 但是只要 websocket 处于离线状态,发送按钮就会按预期工作。

是我的错字或其他错误还是 JS 的问题?

【问题讨论】:

【参考方案1】:
conn.onmessage = message => main.innerHTML += message.data;

等于

main.innerHTML = main.innerHTML + message.data

将摧毁里面的一切并重新创造它。当这种情况发生时,事件绑定就消失了。您应该使用appendChild 之类的方法,或者您可以添加一个新元素来注入新消息,例如:

<body>
  <div class="main">
    <input type="text" name="" id="text">
    <button id="send">Send</button>
    <ul id="messages"></ul>
  </div>
</body>

【讨论】:

等等怎么办?那行是添加更多的 html,而不是重写,对吧? @me.nkr DOM 不像字符串那样工作,它是对象的集合。当您更改 innerHTML 时,所有子对象都将被销毁并根据新的 HTML 字符串重新创建。 @me.nkr 即使是字符串操作,javascript 字符串是不可变的,如果不创建一个新字符串并分配一个引用,就无法修改字符串它【参考方案2】:

我注意到您需要改进的一件事是您应该:- conn.send(JSON.stringify('heyya')) 在 WebSocket 上发送数据时。

在接收时做同样的事情:- JSON.parse(message),然后按照你想要的方式使用“消息”。

【讨论】:

因为它只是字符串,这可能就足够了。

以上是关于当 websocket 服务器在线时 button.onclick 不起作用的主要内容,如果未能解决你的问题,请参考以下文章

WebSocket实现多人在线聊天功能

websocket 快速上手

websocket 加layim实现在线聊天系统

在线聊天——WebSocket 简介与实际实现

在线聊天——WebSocket 简介与实际实现

Websockets 在线部署