zoukankan      html  css  js  c++  java
  • WebSocket重连reconnecting-websocket.js的使用

    原文:https://www.cnblogs.com/kennyliu/p/6477746.html

     

    页面引用 <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);
    
    
    })
    复制代码
  • 相关阅读:
    数据挖掘笔试面试(7)
    数据挖掘笔试面试(6)
    数据挖掘笔试面试(5)
    数据挖掘面试笔试(4)
    数据挖掘面试(3)
    数据挖掘面试题(2)
    学生-课程-成绩表设计
    树状结构表设计
    性能优化(1+N,list与iterator,缓存,事务)
    对象的三种状态
  • 原文地址:https://www.cnblogs.com/shihaiming/p/9531013.html
Copyright © 2011-2022 走看看