Nginx代理Web Socket超时中断的解决方案，保持长连接

使用Nginx代理WebSocket的时候，客户端与服务器握手成功后，如果在60秒内没有数据交互，就会自动断开连接。因为Nginx默认的断开链接时间为60秒，为保持长连接，可有两种解决方法。

一、配置Nginx，设置读超时时间大一点，如下图

按照上述方法设置好后，我们可以发现，如果在10分钟之内没有数据交互的话，websocket连接就会自动断开，所以这种方式还是有点问题，如果我页面停留时间超过十分钟而且又没有数据交互的话，连接还是会断开的，所以需要同时结合第二种方法．

二、在Nginx延时基础上，前端在超时时间内做心跳检测

    var socket;
    // 心跳检测，每隔一段时间检测连接状态，如果处于连接中，就像Server主动发送消息，来重置Server段与客户端的最大连接时间，如果已经断开，发起重连
    var heartCheck = {
        // 9分钟发起一次心跳，比Server端设置的连接时间稍微小一点，在接近断开的情况下以通信的方式去重置连接时间
        timeout: 550000,
        serverTimeoutObj: null,
        reset: function () {
            clearTimeout(this.serverTimeoutObj);
            return this;
        },
        start: function () {
            this.serverTimeoutObj = setInterval(function () {
                if (socket.readyState == 1) {
                    console.log("连接状态，发送消息保持连接");
                    socket.send("ping");
                    // 如果获取到消息，说明连接正常，重置心跳检测
                    heartCheck.reset().start();
                } else {
                    console.log("断开连接，尝试重连");
                    connect();
                }
            }, this.timeout)
        }
    };

    function connect() {
        if (typeof WebSocket == "undefined") {
            console.log("不支持WebSocket！");
        } else {
            console.log("支持WebSocket！");
        }
        if (socket && socket.readyState == 1) {
            return;
        }
        socket = new WebSocket("ws://47.99.57.113:1234/club/websocket");
        // 打开事件
        socket.onopen = function () {
            heartCheck.reset().start();
            console.log("socket 已打开");
        };
        // 获得消息事件
        socket.onmessage = function (msg) {
            heartCheck.reset().start();
            console.log(msg.data);
        };
        // 关闭事件
        socket.onclose = function () {
            console.log("Socket 已关闭")
        };
        // 发生错误
        socket.onerror = function () {
            console.log("Socket 发生了错误")
        };
    }

    function close() {
        socket.close();
    }

 

关于Nginx相关配置，请参考以下链接：

nginx超时设置

https://blog.csdn.net/liujiyong7/article/details/18228915

nginx代理WebSocket

https://www.cnblogs.com/piperck/p/7066286.html

原博主文章

https://blog.csdn.net/cm786526/article/details/79939687