近日，在公司中開發(fā)一個使用websocket為前端推送消息的功能時，發(fā)現(xiàn)一個問題：就是每隔一段時間如果不傳送數(shù)據(jù)的話，與前段的連接就會自動斷開；

剛開始以為是session的原因，因為web session 的默認(rèn)時間是30分鐘；但是通過日志發(fā)現(xiàn)斷開時間間隔時間遠(yuǎn)遠(yuǎn)不到30分鐘；認(rèn)真分析發(fā)現(xiàn)不操作間隔恰好為90秒

它就會在自動斷開；隨恍然大悟；原來是我們的使用nginx 代理，nginx配置了訪問超時時間為90s；

WebSocket是html5中用來實現(xiàn)長連接的一個協(xié)議。
在同時使用nginx反向代理和websocket的時候,因為websocket的通信管道必須都要一直處于開啟狀態(tài)。

proxy_read_timeout 90；

解決方案：

1. 修改nginx配置
nginx 通過在客戶端和后端服務(wù)器之間建立起一條隧道來支持WebSocket。
為了使nginx可以將來自客戶端的Upgrade請求發(fā)送給后端服務(wù)器，Upgrade和Connection的頭信息必須被顯式的設(shè)置。如下所示：

location /web/count {
        proxy_pass http://tomcat-server;
        proxy_redirect off;
        proxy_http_version 1.1;

        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";

        proxy_set_header Host $host:$server_port;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;    
}

一旦我們完成以上設(shè)置，nginx就可以處理WebSocket連接了。
注意，必須要有

proxy_set_header Host $host:$server_port;   

這個配置
否則，會報：
WebSocket connection to 'ws://192.168.1.104:9080/web/count' failed: Error during WebSocket handshake: Unexpected response code: 403的錯誤

2. 也可以在前端頁面也添加心跳機(jī)制保持連接。

var userId=$("#userId").val();
var lockReconnect = false;  //避免ws重復(fù)連接
var ws = null;          // 判斷當(dāng)前瀏覽器是否支持WebSocket
var wsUrl = serverConfig.cyberhouse_ws+userId;
createWebSocket(wsUrl);   //連接ws

function createWebSocket(url) {
    try{
        if('WebSocket' in window){
            ws = new WebSocket(url);
        }else if('MozWebSocket' in window){  
            ws = new MozWebSocket(url);
        }else{
            layui.use(['layer'],function(){
              var layer = layui.layer;
              layer.alert("您的瀏覽器不支持websocket協(xié)議,建議使用新版谷歌、火狐等瀏覽器，請勿使用IE10以下瀏覽器，360瀏覽器請使用極速模式，不要使用兼容模式！"); 
            });
        }
        initEventHandle();
    }catch(e){
        reconnect(url);
        console.log(e);
    }     
}

function initEventHandle() {
    ws.onclose = function () {
        reconnect(wsUrl);
        console.log("llws連接關(guān)閉!"+new Date().toUTCString());
    };
    ws.onerror = function () {
        reconnect(wsUrl);
        console.log("llws連接錯誤!");
    };
    ws.onopen = function () {
        heartCheck.reset().start();      //心跳檢測重置
        console.log("llws連接成功!"+new Date().toUTCString());
    };
    ws.onmessage = function (event) {    //如果獲取到消息，心跳檢測重置
        heartCheck.reset().start();      //拿到任何消息都說明當(dāng)前連接是正常的
        console.log("llws收到消息啦:" +event.data);
        if(event.data!='pong'){
            var obj=eval("("+event.data+")");
            layui.use(['layim'], function(layim){
                if(obj.type=="onlineStatus"){
                    layim.setFriendStatus(obj.id, obj.content);
                }else if(obj.type=="friend" || obj.type=="group"){
                    layim.getMessage(obj);  
                } 
    };
}
// 監(jiān)聽窗口關(guān)閉事件，當(dāng)窗口關(guān)閉時，主動去關(guān)閉websocket連接，防止連接還沒斷開就關(guān)閉窗口，server端會拋異常。
window.onbeforeunload = function() {
    ws.close();
}  

function reconnect(url) {
    if(lockReconnect) return;
    lockReconnect = true;
    setTimeout(function () {     //沒連接上會一直重連，設(shè)置延遲避免請求過多
        createWebSocket(url);
        lockReconnect = false;
    }, 2000);
}

//心跳檢測
var heartCheck = {
    timeout: 540000,        //9分鐘發(fā)一次心跳
    timeoutObj: null,
    serverTimeoutObj: null,
    reset: function(){
        clearTimeout(this.timeoutObj);
        clearTimeout(this.serverTimeoutObj);
        return this;
    },
    start: function(){
        var self = this;
        this.timeoutObj = setTimeout(function(){
            //這里發(fā)送一個心跳，后端收到后，返回一個心跳消息，
            //onmessage拿到返回的心跳就說明連接正常
            ws.send("ping");
            console.log("ping!")
            self.serverTimeoutObj = setTimeout(function(){//如果超過一定時間還沒重置，說明后端主動斷開了
                ws.close();     //如果onclose會執(zhí)行reconnect，我們執(zhí)行ws.close()就行了.如果直接執(zhí)行reconnect 會觸發(fā)onclose導(dǎo)致重連兩次
            }, self.timeout)
        }, this.timeout)
    }
}

// 收到客戶端消息后調(diào)用的方法 
    @OnMessage  
    public void onMessage(String message, Session session) {  
        if(message.equals("ping")){
        }else{
        。。。。
        }
   }

系統(tǒng)發(fā)現(xiàn)websocket每隔10分鐘自動斷開連接，搜了很多博客都說設(shè)置一下nginx的
keepalive_timeout
proxy_connect_timeout
proxy_send_timeout
proxy_read_timeout
這四個字段的時長即可，然而好像并不奏效。遂采取心跳包的方式每隔9分鐘客戶端自動發(fā)送ping消息給服務(wù)端，服務(wù)端不需要返回。即可解決問題。