当 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 不起作用的主要内容,如果未能解决你的问题,请参考以下文章