webSocket =＞ Failed to execute ‘send‘ on ‘WebSocket‘: Still in CONNECTING

最新推荐文章于 2024-01-03 15:37:44 发布

不停喝水

最新推荐文章于 2024-01-03 15:37:44 发布

阅读量2.3k

点赞数 3

分类专栏：【Node系列】文章标签： WebSocket 错误处理状态管理数据发送连接状态

本文链接：https://blog.csdn.net/weixin_48200589/article/details/118961417

版权

【Node系列】专栏收录该内容

9 篇文章 0 订阅

订阅专栏

1.在建立web socket通信后，发送数据时，出现下图所示现象:

在这里插入图片描述

webscoket初始化后 this.socket.send(message)时报错：DOMException: Failed to execute 'send' on 'WebSocket': Still in CONNECTING state

2.问题代码演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>

    <div class="vertical-center">
        <div class="container">
            <!-- 客户端加一个简单的input输入框和一个发送按钮 -->
            <form role="form" id="chat_form" onsubmit="sendMessage(); return false;" style="margin-top:100px;">
                <div class="form-group">
                    <input class="form-control" type="text" name="message" id="message" value="" />
                </div>
                <button type="button" id="send" class="btn btn-primary" onclick="sendMessage();">
                    发送
                </button>
            </form>
        </div>
    </div>
</body>
<script>
    //WebSocket实例化
    var ws = new WebSocket("ws://localhost:3000");
    ws.onopen = function (e) {
        //成功连接服务器回调
        console.log('客户端（client）：与服务器的连接已打开')
    }
    function sendMessage() {
        const msg = document.getElementById('message').value
        ws.send(msg);
       
    };
</script>

</html>

3.问题原因

要明白这个问题产生的原因，就需要了解websocket的几个状态。通常在实例化一个websocket对象之后，客户端就会与服务器进行连接。但是连接的状态是不确定的，于是用readyState属性来进行标识。它有四个值，分别对应不同的状态：

CONNECTING：值为0，表示正在连接；
OPEN：值为1，表示连接成功，可以通信了；
CLOSING：值为2，表示连接正在关闭；
CLOSED：值为3，表示连接已经关闭，或者打开连接失败。
这样问题的原因就很明显了，之所以数据不能发送出去，是因为websocket还处在“CONNECTING”状态下，连接还没有成功。

4.解决办法1

只要在函数中添加对状态的判断，在状态为OPEN时，执行send方法即可。方法一代码如下：

if(ws.readyState===1){
            const msg = document.getElementById('message').value
        ws.send(msg);
        }else {
            console.log('发送失败');
        }

4.解决办法2

可能是new WebSocket路径写的和后端定义的不一样
可以看到我们后端本地mongose定义的是3001端口，把ws地址换成3001就好了

    //WebSocket实例化
    var ws = new WebSocket("ws://localhost:3001");

在server.js文件里

var WebSocketServer = require('ws').Server,
wss = new WebSocketServer({ port: 3001 });//服务端口8181

var mongoose = require('mongoose'),
    DB_URL = 'mongodb://localhost:27017/test_log';

mongoose.connect(DB_URL, function(err) {
    if (err) {
        console.log(err)
        return
    }

    console.log('mongodb连接成功')
});

mongoose.connection.on('connected', function () {    
    console.log('Mongoose connection open to ' + DB_URL);  
});  

/**
 * 连接异常
 */
 mongoose.connection.on('error',function (err) {    
    console.log('Mongoose connection error: ' + err);  
});    
 
/**
 * 连接断开
 */
mongoose.connection.on('disconnected', function () {    
    console.log('Mongoose connection disconnected');  
});

wss.on('connection', function (ws) {
    console.log('服务端：客户端已连接');
    ws.on('message', function (message) {
        //打印客户端监听的消息
        console.log(message);
    });
});