Hbuilder 使用websocket,android手机上会断网,判断断网,每隔几秒进行重新连接,直到网络恢复正常

之前使用的hbuilder开发的一个程序,使用网页的形式包了一层,使用websockt和后台服务进行交互,在android手机上,有时候会遇到网络断开,导致websockt中断,导致无法正常和后台通信,百度了一下,有一个重连的插件: WebSocket重连reconnecting-websocket.js的使用.  

转载自:https://www.cnblogs.com/kennyliu/p/6477746.html,直接下载这个reconnecting-websocket.min.js,创建websockt的方式修改成这样就可以了:

//一些对浏览器的兼容已经在插件里面完成
    var websocket = new ReconnectingWebSocket(url);

 

主要内容如下:


WebSocket重连reconnecting-websocket.js的使用
页面引用 <script src="~/Scripts/reconnecting-websocket.min.js"></script>

使用示例:

复制代码
function initSocket(option) {
    //服务器地址
    var locate = window.location;
    var url = option.url ? option.url : "ws://" + locate.hostname + ":" + locate.port + _get_basepath() + "/websocket";
    //回调函数
    var callback = option.callback;
    if (typeof callback !== "function") {
        console.log('callback 必须为函数');
        return false;
    }
    //一些对浏览器的兼容已经在插件里面完成
    var websocket = new ReconnectingWebSocket(url);
    //var websocket = new WebSocket(url);

    //连接发生错误的回调方法
    websocket.onerror = function () {
        console.log("websocket.error");
    };

    //连接成功建立的回调方法
    websocket.onopen = function (event) {
        console.log("onopen");
        var param = {
            id: $("#UserID").val(),
            name: $("#UserName").val(),
            act: "produceNewUser",
            msg: ""
        }
        websocket.send(JSON.stringify(param));
    }

    //接收到消息的回调方法
    websocket.onmessage = function (event) {
        callback(event.data);
    }

    //连接关闭的回调方法
    websocket.onclose = function () {
        websocket.close();
        console.log("websocket.onclose");
    }

    //监听窗口关闭事件,当窗口关闭时,主动去关闭websocket连接,防止连接还没断开就关闭窗口,server端会抛异常。
    window.onbeforeunload = function () {
        websocket.close();
    }
    return websocket;
}

$(function () {
    var option = {
        url: $("#socketAddress").val(),
        callback: function (data) {
            console.log(data);
            //处理业务逻辑
            var a = $.parseJSON(data);
            if (a.code != 10) {
                return;
            }
            var b = $.parseJSON(a.content);

            var html = '';

            html += ('<tr class="tableCont bgcWhite bgcHover">');
            html += ('<td class="lef2 serial">' + b.ProduceSort + '</td>');
            html += ('<td class="mid">' + b.Color + '</td><td>' + b.WidthCloth + '</td><td>' + b.Weight + '</td><td>' + b.RollLength + '</td><td>' + b.Number + '</td>');
            html += ('<td class="mid">' + b.Comp + '</td>');
            html += ('<td><div class="nowProduce clearfix" onclick="UpProduction(' + b.ID + ',this)" sake="Up">上移生产</div> </td></tr>');

            $('#List').append(html);

        }
    };
    var socket = initSocket(option);


})

 

 

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值