ws.html:1 Uncaught DOMException: Failed to execute 'send' on 'WebSocket': Still in CONNECTING state. at HTMLButtonElement.sendBtn.onclick (file:///C:/Users/LENOVO/Desktop/ws.html:1:864)
时间: 2024-01-29 15:03:57 浏览: 134
websocket html
这个错误提示是由于在 WebSocket 连接状态为 `CONNECTING` 时就尝试发送消息,导致消息发送失败。WebSocket 连接状态总共有四种状态:
- `CONNECTING` - 正在连接
- `OPEN` - 连接已经建立
- `CLOSING` - 关闭中
- `CLOSED` - 连接已关闭
当连接状态为 `CONNECTING` 时,WebSocket 还没有建立连接,这个时候尝试发送消息是不合法的。正确的做法是在连接成功后再发送消息。
在你的代码中,点击按钮时会触发 `sendBtn.onclick` 事件处理函数,这个函数尝试通过 WebSocket 实例的 `send` 方法发送消息。但是,由于 WebSocket 连接还没有建立成功,所以发送消息失败。
为了解决这个问题,我们可以将发送消息的代码放在 WebSocket 实例的 `onopen` 事件处理函数中,示例如下:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>WebSocket Demo</title>
</head>
<body>
<button id="send-btn">Send Message</button>
<input type="text" id="message-box">
<script>
const socket = new WebSocket('ws://localhost:8080');
socket.onopen = function(event) {
console.log('WebSocket connected!');
const sendBtn = document.getElementById('send-btn');
sendBtn.onclick = function() {
const messageBox = document.getElementById('message-box');
const message = messageBox.value;
socket.send(message);
};
};
socket.onmessage = function(event) {
const messageBox = document.getElementById('message-box');
messageBox.value = event.data;
};
socket.onclose = function(event) {
console.log('WebSocket disconnected!');
};
socket.onerror = function(event) {
console.error('WebSocket error:', event);
};
</script>
</body>
</html>
```
在这个示例代码中,我们将发送消息的代码放在了 `onopen` 事件处理函数中。当 WebSocket 连接建立成功后,`onopen` 事件处理函数会被调用,并将发送消息的代码添加到按钮的 `onclick` 事件处理函数中。这样,当用户点击按钮时,发送消息的代码就会被执行,而不会出现连接状态为 `CONNECTING` 的问题。
阅读全文