当websocket服务器在线时，button.onclick无法工作
当websocket服务器在线时，button.onclick无法工作
提问于 2021-05-08 10:45:06
这很奇怪，我有一个前端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启动并运行时，单击send按钮什么也不做，变量send似乎并不是指html中的send按钮。但只要websocket离线，发送按钮就能正常工作。
是打字错误，还是我的其他错误，还是JS的什么问题？
回答 2
Stack Overflow用户
发布于 2021-05-08 11:02:36
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>Stack Overflow用户
发布于 2021-05-08 11:11:27
我注意到你需要改进的一件事是：-在WebSocket上发送数据时使用conn.send(JSON.stringify('heyya'))。
并在接收时执行相同的操作：- JSON.parse(message)，然后以您想要的方式使用"message“。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/67446665
复制相关文章
![[WebSocket入门]手把手搭建WebSocket多人在线聊天室（SpringBoot+WebSocket）](https://ask.qcloudimg.com/http-save/yehe-5956301/cxk32s0vlo.png)
点击加载更多
相似问题
当websocket客户端太慢时，websocket将如何工作？
在线程中运行WebSocket服务器
ruby: websocket服务器和websocket客户端无法工作
WebSocket服务器因某些原因无法工作
在线查看时网站无法正常工作
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
