在前端通过 WebSocket 进行实时通信时，可能会出现 Uncaught InvalidStateError: Failed to execute 'send' on 'WebSocket': Still in CONNECTING state 的错误。这个错误的产生是因为 WebSocket 连接还在建立过程中，但是发送消息时却尝试了执行 send() 方法。
问题原因
当使用 new WebSocket(url) 建立 WebSocket 连接时，连接状态一开始为 CONNECTING（正在连接）状态。只有当连接成功后，状态才会变成 OPEN（已打开），此时才能够进行消息的发送和接收。
如果在连接未成功建立时就尝试发送消息，则会出现上述错误，因为此时 WebSocket 连接还处于 CONNECTING 状态，还不能够执行 send() 方法。
解决方案
为了解决这个问题，我们需要确保 WebSocket 连接成功建立后再进行消息的发送。可以通过监听 WebSocket 的 onopen 事件，在连接成功后再执行相关操作。
以下是一个示例代码：
const ws = new WebSocket('ws://example.com');
ws.onopen = function(event) {
console.log('WebSocket 连接成功!');
ws.send('Hello, WebSocket!');
};在上述代码中，onopen 回调函数会在 WebSocket 连接成功后被触发，并将其状态从 CONNECTING 变为 OPEN。此时，我们可以放心地使用 send() 方法发送消息。
总结
在前端使用 WebSocket 进行实时通信时，需要注意 WebSocket 连接状态的变化，并确保连接成功后再进行消息的发送。通过监听 WebSocket 的 onopen 事件，可以确保在连接成功后执行相关操作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/606f103a2d2a29a3c1202ebb