前端websocket连接mqtt服务器（Paho-mqtt,mqttws31.js）以及断开重连

最新推荐文章于 2024-05-09 14:33:02 发布
最新推荐文章于 2024-05-09 14:33:02 发布
阅读量1.1w 收藏 58
点赞数 15
分类专栏： 插件工具 文章标签： websocket连接mqtt paho-mqtt mqtt断开重连
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42627162/article/details/112877805
版权

项目需求，java端连接C#，想在前台处理订阅消息，用了websocket和mqtt，查了一上午，因为本机没有node.js，关于paho-mqtt.js的例子连接不了，比如301错误码、什么二进制数据、decode、握手失败等等，后来看了源码，总结了一个连接成功的例子，先写几个问题：

  1. websocket的使用： :websocket允许服务端向客户端主动推送消息，是在jQuery/js中使用mqtt的基础。
  2. mqtt客户端：
    paho-mqtt.js: 基于浏览器的库，使用websocket连接到mqtt
    mqtt.js: 是用 JavaScript 编写的，可用于 Node.js 和浏览器。有node.js的话还是推荐这个。
  3. paho-mqtt.js: 一定要下载对，中间下了一个，源码有问题，一直提示Client未定义，推一个网址，或者去我的资源里面下载：
  4. MQTT服务端端口号： 由于是用websocket，所以一定要选择服务端里对用的mqtt over websocket端口号，因为请求路径是ws或wss开头，切记！！！！！！ 不然连接不上
    https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.js
    <script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.js" type="text/javascript"></script>

1. 简单的基础实现代码

基础版不支持重连，源码里options中没有重连参数，需要手动写，带重连机制的在demo里面，配置reconnect参数
js:

// 连接参数
var option = {
        "ServerUri": "test.mosquitto.org", // 服务器hostname
        "ServerPort": 8080, // port端口号
        "UserName": "admin ",// 用户名
        "Password": "123",//密码
        "ClientId": "C_client",//客户端id，自己设置
        "TimeOut": 5000,// 超时
        "KeepAlive": 0,// 心跳
        "CleanSession": false, // 清除session，设置为true时，每次都以新session信息向服务器沟留~
        "SSL":false// 是否加密 （加密是wss前缀）
    }

	// 创建一个客户端 
    var client = new Paho.MQTT.Client(option.ServerUri, Number(option.ServerPort), "clientId");
    client.onConnectionLost = onConnectionLost; // 定义连接丢失方法
    client.onMessageArrived = onMessageArrived; // 定义消息送达方法
    client.connect({onSuccess:onConnect}); // 连接

	// 连接成功后回调
    function onConnect() {
        // Once a connection has been made, make a subscription and send a message.
        console.log("onConnect");
        // 订阅主题
        client.subscribe("/World");
        // 新建消息
        message = new Paho.MQTT.Message("Hello");
        message.destinationName = "/World";
        // 发送消息
        client.send(message);
    };
	
	// 连接丢失处理
    function onConnectionLost(responseObject) {
        if (responseObject.errorCode !== 0)
            console.log("onConnectionLost:"+responseObject.errorMessage);
    };
	// 消息送达处理
    function onMessageArrived(message) {
        console.log("onMessageArrived:"+message.payloadString);
        client.disconnect();
    };

在这里插入图片描述
连接成功！

2. 方法说明：

1. 客户端实例化
var client = new Paho.MQTT.Client(host, port, path, clientId);
// host => 客户端hostname（ip），string
// port => 客户端端口号，number
// path => 路径 默认"/mqtt"，string
// clientId => 客户端id，String

// Client()方法写两个参数（hostname和port）时，会默认将port值赋值给clientId, path默认为/mqtt
// 写三个参数（hostname、port、clientId），path依旧默认为/mqtt

2. 连接断开回调函数，断开后重连 
client.onConnectionLost = onConnectionLost;//连接丢失事件
function onConnectionLost(e) {
        if (e.errorCode !== 0) {
            WriteToStatus("连接异常断开:" + e.errorMessage);
			// 定时器重连 
            reconnect = setInterval(function () {
                client.connect({
                    invocationContext: {
                        host: option.ServerUri,//IP地址
                        port: option.ServerPort,//端口号
                        path: client.path,
                        clientId: option.ClientId//标识
                    },
                    timeout: option.TimeOut,//连接超时时间
                    keepAliveInterval: option.KeepAlive,//心跳间隔
                    cleanSession: option.CleanSession,//是否清理Session
                    useSSL: option.SSL,//是否启用SSL
                    userName: option.UserName,  //用户名
                    password: option.Password,  //密码
                    onSuccess: onConnect,//连接成功回调事件
                    onFailure: onError//连接失败回调事件
                });
            },1000);
        }
    }

3. 收到消息回调函数
client.onMessageArrived = onMessageArrived;
//接收消息事件
    function onMessageArrived(data) {
        WriteToStatus("收到消息：" + data.payloadString);
        // 写一些自己的逻辑什么的...
    }

4. 订阅主题
client.subscribe(filter,subscribeOptions);
// filter: 主题名称（可以只传filter参数）
// subscribeOptions: 参数，包括qos、OnSuccess、onFailure、invocationContext、timeout

// 源码部分：
this.subscribe = function (filter, subscribeOptions) {
    if (typeof filter !== "string")
        throw new Error("Invalid argument:"+filter);
    subscribeOptions = subscribeOptions || {} ;
    validate(subscribeOptions,  {qos:"number",
        invocationContext:"object",
        onSuccess:"function",
        onFailure:"function",
        timeout:"number"
    });
    if (subscribeOptions.timeout && !subscribeOptions.onFailure)
        throw new Error("subscribeOptions.timeout specified with no onFailure callback.");
    if (typeof subscribeOptions.qos !== "undefined"
        && !(subscribeOptions.qos === 0 || subscribeOptions.qos === 1 || subscribeOptions.qos === 2 ))
        throw new Error(format(ERROR.INVALID_ARGUMENT, [subscribeOptions.qos, "subscribeOptions.qos"]));
    client.subscribe(filter, subscribeOptions);
};

5. 取消订阅主题
client.unsubscribe(filter, unsubscribeOptions);
// 同订阅方法（可以只传filter参数）

6. 连接服务器
client.connect({
    invocationContext: {
        host: option.ServerUri,//IP地址
        port: option.ServerPort,//端口号
        path: client.path,
        clientId: option.ClientId//标识
    },
    timeout: option.TimeOut,//连接超时时间
    keepAliveInterval: option.KeepAlive,//心跳间隔
    cleanSession: option.CleanSession,//是否清理Session
    useSSL: option.SSL,//是否启用SSL
    userName: option.UserName,  //用户名
    password: option.Password,  //密码
    onSuccess: onConnect,//连接成功回调事件
    onFailure: onError//连接失败回调事件
});

7. 断开连接
client.disconnect();

8. 重连
这个js里没有配置重连的参数，只能自己写一个定时器，连接断开的时候开启，连接成功后clear

9. 发送消息
client.send(topic,payload,qos,retained); 
// topic: 主题
// payload： 内容
// qos： 发送频率
// retained：是否保留（选择true，其他客户端订阅时会自动获取内容）
也可以将参数封装： eg：
let message = new Paho.MQTT.Message($("#txtContent").val());
message.destinationName = currentTopic.TopicName;
message.retained = true;
client.send(message);

// 源码：
this.send = function (topic,payload,qos,retained) {
    var message ;

    if(arguments.length == 0){
        throw new Error("Invalid argument."+"length");
    }else if(arguments.length == 1) {
        if (!(topic instanceof Message) && (typeof topic !== "string"))
            throw new Error("Invalid argument:"+ typeof topic);
        message = topic;
        if (typeof message.destinationName === "undefined")
            throw new Error(format(ERROR.INVALID_ARGUMENT,[message.destinationName,"Message.destinationName"]));
        client.send(message);
    }else {
        //parameter checking in Message object
        message = new Message(payload);
        message.destinationName = topic;
        if(arguments.length >= 3)
            message.qos = qos;
        if(arguments.length >= 4)
            message.retained = retained;
        client.send(message);
    }
};

3. 测试版demo

demo是看一个博客上的，然后拿过来自己改了一些适合我的js和服务器，完善了几个功能点：

html:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>paho-mqtt测试demo</title>
    <meta charset="utf-8" />
    <script src="/assets/expand/plugins/jquery/jquery-3.2.1.min.js"></script>
    <script src="/assets/module/mqtt/mqttws31.js" type="text/javascript"></script>

    <style>
        #content{
            background-color: white;
            width: 800px;
        }
        ul{
            padding-top: 20px;
        }
        li,#subTopics{
          display: inline;
        }
        #logResult > li{
            display: block;
        }
        #logDiv {
            height: 400px;
            overflow-y: auto;
            background-color: white;
            border: 1px solid #eaeaea;
            width: 700px;
            margin-left: 40px;
        }
    </style>
</head>
<body>

<div id="content">
    <ul>
        <li><input id="txtIp" type="text" value="192.168.1.102"/></li>
        <li><input id="txtPort" type="text" value="1803"/></li>
        <li><input id="btnConnect" type="button" value="连接"/></li>
        <li><input id="btnDisconnect" type="button" value="断开" disabled="disabled"/></li>
    </ul>

    <ul>
        <li><div id="subTopics"></div></li>
        <li><input id="btnSubscribe" type="button" value="订阅" disabled="disabled"/></li>
        <li><input id="btnUnSubscribe" type="button" value="取消订阅" disabled="disabled"/></li>
        <li><input id="btnClear" type="button" value="清空日志" /></li>
    </ul>

    <div id="logDiv">
        <ul id="logResult"></ul>
    </div>


    <ul style="padding-bottom: 15px;">
        <li><select id="pubTopics"></select></li>
        <li><input id="txtContent" type="text"/></li>
        <li><input id="btnPublish" type="button" value="发布" disabled="disabled"/></li>
    </ul>
</div>
<script type="application/javascript" >

    //所有主题
    var allTopics = [
        // TopicName: 主题名称
        // TopicStr: 显示在多选框上的主题
        { "TopicName": "topic1", "TopicStr": "topic1" },
        { "TopicName": "topic2", "TopicStr": "topic2" },
        { "TopicName": "topic3", "TopicStr": "topic3" }
    ];

    //选中订阅主题
    var selectedTopics = [];

    //客户端选项
    var option = {
        "ServerUri": "192.168.1.102",
        "ServerPort": 1803,
        "UserName": "admin",
        "Password": "123",
        "ClientId": "",
        "TimeOut": 5,
        "KeepAlive": 100,
        "CleanSession": false,
        "SSL":false,
        "reconnect" : true
    }

    // 定义客户端
    var client;

    $(function () {
        // 订阅主题选项 显示
        subTopicsShow(allTopics);
        // 发布主题选项 显示
        pubTopicsShow(allTopics);

        // 订阅主题选中事件
        $("#subTopics input[type=checkbox]").on("click", function () {

            let topic;
            for(let i in allTopics){
                if (allTopics[i].TopicName == $(this).val()) {
                    topic = allTopics[i];
                }
            }
            if ($(this).is(":checked")) {//选中
                selectedTopics.push(topic);
            }else {//取消选择
                if(selectedTopics.length>0){
                    for(var i in selectedTopics){
                        var tmp = selectedTopics[i];
                        if (tmp.TopicName == t) {
                            selectedTopics.splice(i, 1);
                        }
                    }
                }
            }
        });

        // 订阅按钮点击
        $("#btnSubscribe").on("click", function () {
            if (!client) {
                alert("请连接服务端");
                return;
            }
            if(selectedTopics.length==0){
                alert("请选择要订阅的主题!");
                return;
            }

            var msg = "";
            for(var i in selectedTopics){
                var t = selectedTopics[i];
                client.subscribe(t.TopicName);
                msg += t.TopicName+";"
            }
            logConsole("成功订阅主题：" + msg);
            enable($("#btnUnSubscribe"), true);
        });

        /*取消订阅按钮点击事件*/
        $("#btnUnSubscribe").click(function () {

            if(selectedTopics.length == 0){
                alert("请选择要取消订阅的主题!");
                return;
            }

            let msg = "";
            for(let i in selectedTopics){
                client.unsubscribe(selectedTopics[i].TopicName);
                msg += selectedTopics[i].TopicName+";"
            }
            logConsole("成功取消主题订阅：" + msg);

        });

        //发布按钮点击事件
        $("#btnPublish").on("click", function () {
            if(!client){
                alert("请连接服务端");
                return;
            }

            if($("#txtContent").val()==""){
                alert("请输入要发布的内容");
                return;
            }

            let message = new Paho.MQTT.Message($("#txtContent").val());
            message.destinationName = $("#pubTopics").val();
            message.retained = true;
            client.send(message);

            logConsole("发布了主题为" + message.destinationName + "的消息：" + $("#txtContent").val())
        });
    });

    // 全部订阅主题选项显示
    function subTopicsShow(topics) {
        let html = "";
        for (let i = 0; i < topics.length;i++){
            html += topics[i].TopicStr;
            html += '<input type="checkbox" value="'+topics[i].TopicName+'"/>';
        }
        $("#subTopics").html(html);
    }

    // 发布主题选项显示
    function pubTopicsShow(topics) {
        let html = "";
        for (let i = 0; i < topics.length; i++) {
            html += '<option value="' + topics[i].TopicName + '">' + topics[i].TopicStr + '</option>';
        }
        $("#pubTopics").html(html);
    }

    /*清空按钮点击事件*/
    $("#btnClear").click(function () {
        $("#logResult").empty();
    });

    $(function () {

        //连接按钮点击事件
        $("#btnConnect").on("click", function () {
            if ($("#txtIp").val()!="") {
                option.ServerUri = $("#txtIp").val();
            }
            else {
                alert("请输入服务端IP!");
                return;
            }

            if($("#txtPort").val()!=""){
                option.ServerPort = Number($("#txtPort").val());
            }
            else {
                alert("请输入端口号!");
                return;
            }

            //客户端实例化
            client = new Paho.MQTT.Client(option.ServerUri, Number(option.ServerPort), "/mqtt","web");
            client.onConnectionLost = onConnectionLost;//绑定连接断开事件
            client.onMessageArrived = onMessageArrived;//绑定接收消息事件

            //连接服务端
            client.connect({
                invocationContext: {
                    host: option.ServerUri,//IP地址
                    port: option.ServerPort,//端口号
                    path: client.path,
                    clientId: option.ClientId//标识
                },
                timeout: option.TimeOut,//连接超时时间
                keepAliveInterval: option.KeepAlive,//心跳间隔
                cleanSession: option.CleanSession,//是否清理Session
                useSSL: option.SSL,//是否启用SSL
                userName: option.UserName,  //用户名
                password: option.Password,  //密码
                onSuccess: onConnect,//连接成功回调事件
                onFailure: onError,//连接失败回调事件,
                reconnect: option.reconnect
            });

        });

        //断开按钮点击事件
        $("#btnDisconnect").on("click", function () {
            client.disconnect();
            console.log(client);
            client = null;
            logConsole("已断开连接！");

            enable($("#btnConnect"), true);
            enable($("#btnDisconnect"), false);
            enable($("#btnPublish"), false);
            enable($("#btnSubscribe"), false);
            enable($("#btnUnSubscribe"), false);
        });
    });

    //连接成功回调事件
    function onConnect() {
        logConsole("连接成功！");

        enable($("#btnConnect"), false);
        enable($("#btnDisconnect"), true);
        enable($("#btnPublish"), true);
        enable($("#btnSubscribe"), true);
        enable($("#btnUnSubscribe"), false);
    }

    //连接失败回调事件
    function onError(e) {
        logConsole("连接失败：" + e);

        enable($("#btnConnect"), true);
        enable($("#btnDisconnect"), true);
        enable($("#btnPublish"), false);
        enable($("#btnSubscribe"), false);

    }

    //连接断开事件
    function onConnectionLost(e) {
        if (e.errorCode !== 0) {
            logConsole("连接异常断开:" + e.errorMessage);

            enable($("#btnConnect"), true);
            enable($("#btnDisconnect"), true);
            enable($("#btnPublish"), false);
            enable($("#btnSubscribe"), false);
        }
    }


    //接收消息事件
    function onMessageArrived(data) {
            logConsole("收到消息：" + data.payloadString);
    }

    // 日志显示输出
    function logConsole(data) {
        var now = new Date();
        var message = '[' + now.toLocaleTimeString() + ']' + data;
        $("#logResult").append('<li>' + message + '</li>');
    }

    //切换按钮状态
    function enable(button,enabled) {
        if (enabled) {
            button.removeAttr("disabled");
        }
        else {
            button.attr("disabled", "disabled");
        }
    }


</script>
</body>
</html>

效果：

在这里插入图片描述
demo里配置了断开重连参数，这个js跟上面分享的js文件多了reconnect部分，里面源码改了一个地方，之前重连成功后没有进入onSuccess方法，更改后重连触发成功事件，目前测试没有问题，如果有问题请大佬们指出！
js文件我放在我的资源里，或者从百度云下载也可！

链接：https://pan.baidu.com/s/1L85YGbD1x6zBIuIqqDBYjg 
提取码：bmq9

4. 放几个公用的mqtt服务器：

  1. mq.tongxinmao.com
    TCP端口: 18831
    WEBSOCKET端口: 18833
  2. test.mosquitto.org
    1883 : MQTT, 未加密
    8883 : MQTT, 加密
    8884 : MQTT, 加密, client certificate required
    8080 : MQTT over WebSockets, 未加密
    8081 : MQTT over WebSockets, 加密

没有用户名和密码，不写或者随便写都行~

星星也会数人类嘛
关注
  • 15
    点赞
  • 踩
  • 58
    收藏
    觉得还不错? 一键收藏
  • 19
    评论
专栏目录
paho-mqtt.js
01-20
websocket连接mqtt服务端，前端需要引用的js文件
mqttws31.js、paho-mqtt.js相关资料汇总
07-01
mqttws31.js、paho-mqtt.js相关资料汇总，包括多个版本的js、支持自动断网重连reconnect的版本，几个公开的mqtt服务器地址、websocket端口号等。 特别是支持断网重连，这个尝试了一些办法，包括interval，后来找到了...
深入理解javascript的实时通讯mqtt详解、封装、使用案例
最新发布
05-09 589
MQTT（Message Queuing Telemetry Transport）是一种轻量级的发布/订阅消息传输协议，被设计用于连接带宽有限的设备，如物联网（IoT）设备。它支持低带宽、高延迟或不可靠的网络环境，并且易于实现。
连接阿里云失败MQTT connect failed, error code:2
Archer的博客
10-05 7195
问题描述 使用ESP8266 Node MCU Arduino模式烧写程序，串口调试报错 MQTT connect failed, error code:2 问题解决 我查阅了很多资料，大家可以参考一下这一个讨论 解决方案 我查阅了<PubSubClient.h>文件 // MQTT_MAX_TRANSFER_SIZE : limit how much data is passed to the network client // in each write call. Needed for
[Web前端]使用paho MQTT.javascript来连接百度IOT(天工物接入)
kimiyang123的专栏
08-23 1万+
        对于MQTT相信搞物联网的话，已经不是很陌生了。MQTT是基于TCP长连接下的，它的报文比较小，非常适合于物联网嵌入式设备使用。对于详细的MQTT协议可以参考网上其他文章，这里推荐一个github上的中文协议手册 MQTT协议中文版 ： https://mcxiaoke.gitbooks.io/mqtt-cn/content/   在项目开发中，嵌入式端已经实现了MQTT对接百...
mqtt在connectionLost和connectComplete不断切换
eddya的博客
01-27 9778
mqtt在connectionLost和connectComplete不断切换 是之前连接了mqtt,虽然是执行disconnect了，但再次人为主动重新连接的话就会出现在connectionLost和connectComplete不断切换 。 原因是clientId未变更，建议把clientId设置成带System.currentTimeMillis()的内容，问题解决。 ...
解决 mqtt 诡异重复连接问题
热门推荐
不懂一休
08-12 2万+
以下问题为 阿里云 mqtt 使用过程中发现 一、首先贴出简单核心代码如下 client.on('connect', function () { client.publish('test/clientE', '' + (Math.random() * 10).toFixed(2), {'qos': 2, 'retain': true}, function (err) { if (err) { console.log(err) } else {
MQTT和Websocket的区别是什么？
weixin_42602900的博客
10-13 1252
MQTT和WebSocket都是面向报文的二进制传输协议。WebSocket更简单，更灵活；MQTT相对复杂，但功能强大。
paho.mqtt.[removed]Eclipse Paho JavaScript客户端
05-01
Paho JavaScript客户端是基于浏览器的库，它使用WebSockets连接到MQTT服务器。 客户的来源是： src/mqttws31.js 兼容性 客户端应可在完全支持WebSocket的任何浏览器中使用， 列出浏览器兼容性。 建造 尽管可以从...
mqtt订阅和发送及mqttws31.js
11-01
mqtt一次订阅多个主题，及发送的，分装函数。以及所需要的js
mqttws31.js文件和MQTT.js-master
01-08
可以搭建物联网客户端。MQTT是一个长连接的通讯应用层协议，最大的特点是数据精简、消息可靠、Publish-Subscribe模式灵活易用。MQTT已经成为IoT传输的标准协议，应用非常广泛。
mqttws31.js
05-16
mqttws31.js 用于小程序 mqtt 服务，端口的话必须为443， app.globalData.client.connect({ userName: app.globalData.userInfo.nickName, password: '', useSSL: false, cleanSession: false, keepAliveInterval: 60, onSuccess: function () { app.globalData.client.subscribe(that.data.channel, { qos: 0 }); app.globalData.client.publish(that.data.channel, JSON.stringify({ cmd: 'add', uid: app.globalData.userInfo.nickName, msg: '' }), 0, false); } }); }else { app.globalData.client.publish(that.data.channel, JSON.stringify({ cmd: 'onlineSet', uid: [app.globalData.userInfo.nickName], msg: '' }), 0, false); } }, })
node-red-example-liveupdates：一个将Node-Red与websocket和MQTT一起使用的示例（通过Paho库），以允许从也向使用Node-Red生成的网页的实时更新
02-06
该示例还通过Mosquitto使用MQTT，并结合了websocket支持以及针对浏览器的Paho MQTT库。 您可能可以改用Mosca。 该示例网页使用了Zurb Foundation，还使用了一个名为“ ReconnectingWebSocket”的客户端帮助程序库。...
paho.mqtt.android：MQTT Android
02-22
Paho Android服务是用Java编写的MQTT客户端库，用于在Android上开发应用程序。 特征 MQTT 3.1 :check_mark: 自动重新连接 :check_mark: MQTT 3.1.1 :check_mark: 离线缓冲 :check_mark: 轻载 :check_...
MQTT调试助手实现与网页进行MQTT通信【向网页控制台发送消息】
悟已往之不谏 知来者之可追
02-11 3722
一、下载网页实现MQTT的js包 1、从<官网>按照如下图所示步骤下载MQTT的JS包 2、直接从我的云盘获取 链接：https://pan.baidu.com/s/1iTcSBmM_J4ZI9OK58qfe3w 提取码：d92l 复制这段内容后打开百度网盘手机App，操作更方便哦 二、关于js包 paho-mqtt.js 完整功能；paho-mqtt-min.js ...
MQTT 客户端自动重连最佳实践｜构建可靠 IoT 设备连接
emqx_broker的博客
03-30 2340
本文介绍在MQTT客户端代码实现过程中，自动重连逻辑设计的重要性与示例，帮助读者设计更为合理的重连代码，构建更加稳定可靠的物联网设备连接。
C#实现MQTT over WebSocket
dandingwangzi的专栏
12-17 1262
C#实现MQTT over WebSocket
WebSocket心跳重连代码
09-16
WebSocket心跳重连代码可以按照以下步骤实现： 1. 创建WebSocket对象，并定义心跳包内容和发送频率。 2. 使用`setInterval`函数定时发送心跳包。 3. 在WebSocket的`onclose`事件中进行重连操作。 下面是一个示例代码： ```javascript var webSocket; function connectWebSocket() { webSocket = new WebSocket('ws://localhost:8080'); // 替换为你的WebSocket服务器地址 webSocket.onopen = function() { console.log('WebSocket连接成功'); startHeartbeat(); }; webSocket.onclose = function() { console.log('WebSocket连接断开'); reconnectWebSocket(); }; } function startHeartbeat() { var heartbeatMsg = 'heartbeat'; // 替换为你的心跳包内容 var heartbeatInterval = 5000; // 替换为你的心跳包发送频率，单位为毫秒 setInterval(function() { webSocket.send(heartbeatMsg); }, heartbeatInterval); } function reconnectWebSocket() { var reconnectInterval = 2000; // 替换为你的重连间隔时间，单位为毫秒 setTimeout(function() { connectWebSocket(); }, reconnectInterval); } connectWebSocket(); ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 19
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值