近日，在公司中开发一个使用websocket为前端推送消息的功能时，发现一个问题：就是每隔一段时间如果不传送数据的话，与前段的连接就会自动断开；
 
  
刚开始以为是session的原因，因为web session 的默认时间是30分钟；但是通过日志发现断开时间间隔时间远远不到30分钟；认真分析发现不操作间隔恰好为90秒
 
  
它就会在自动断开；随恍然大悟；原来是我们的使用nginx 代理，nginx配置了访问超时时间为90s；
 
  
WebSocket是html5中用来实现长连接的一个协议。
 在同时使用nginx反向代理和websocket的时候,因为websocket的通信管道必须都要一直处于开启状态。
 
  
proxy_read_timeout 90；
 
  
解决方案：
 
  
1. 修改nginx配置
 nginx 通过在客户端和后端服务器之间建立起一条隧道来支持WebSocket。
 为了使nginx可以将来自客户端的Upgrade请求发送给后端服务器，Upgrade和Connection的头信息必须被显式的设置。如下所示：
 
  
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;    
}
 
  
一旦我们完成以上设置，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. 也可以在前端页面也添加心跳机制保持连接。
 
  
var userId=$("#userId").val();
var lockReconnect = false;  //避免ws重复连接
var ws = null;          // 判断当前浏览器是否支持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协议,建议使用新版谷歌、火狐等浏览器，请勿使用IE10以下浏览器，360浏览器请使用极速模式，不要使用兼容模式！"); 
            });
        }
        initEventHandle();
    }catch(e){
        reconnect(url);
        console.log(e);
    }     
}

function initEventHandle() {
    ws.onclose = function () {
        reconnect(wsUrl);
        console.log("llws连接关闭!"+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();      //拿到任何消息都说明当前连接是正常的
        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);  
                } 
    };
}
// 监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
window.onbeforeunload = function() {
    ws.close();
}  

function reconnect(url) {
    if(lockReconnect) return;
    lockReconnect = true;
    setTimeout(function () {     //没连接上会一直重连，设置延迟避免请求过多
        createWebSocket(url);
        lockReconnect = false;
    }, 2000);
}

//心跳检测
var heartCheck = {
    timeout: 540000,        //9分钟发一次心跳
    timeoutObj: null,
    serverTimeoutObj: null,
    reset: function(){
        clearTimeout(this.timeoutObj);
        clearTimeout(this.serverTimeoutObj);
        return this;
    },
    start: function(){
        var self = this;
        this.timeoutObj = setTimeout(function(){
            //这里发送一个心跳，后端收到后，返回一个心跳消息，
            //onmessage拿到返回的心跳就说明连接正常
            ws.send("ping");
            console.log("ping!")
            self.serverTimeoutObj = setTimeout(function(){//如果超过一定时间还没重置，说明后端主动断开了
                ws.close();     //如果onclose会执行reconnect，我们执行ws.close()就行了.如果直接执行reconnect 会触发onclose导致重连两次
            }, self.timeout)
        }, this.timeout)
    }
}
 
  
// 收到客户端消息后调用的方法 
    @OnMessage  
    public void onMessage(String message, Session session) {  
        if(message.equals("ping")){
        }else{
        。。。。
        }
   }
 
  
系统发现websocket每隔10分钟自动断开连接，搜了很多博客都说设置一下nginx的
 keepalive_timeout
 proxy_connect_timeout
 proxy_send_timeout
 proxy_read_timeout
 这四个字段的时长即可，然而好像并不奏效。遂采取心跳包的方式每隔9分钟客户端自动发送ping消息给服务端，服务端不需要返回。即可解决问题。
 
 
 

我没有使用socket.js这类封装好的websocket包，使用的是原生的
 
新建js文件，封装websocket
 
var global_callback = null;
var websock = null;
function initWebSocket() { //初始化weosocket
    //ws地址
    var wsuri = "ws地址";
    websock = new WebSocket(wsuri);
    websock.onmessage = function (e) {
        websocketonmessage(e);
    }
    websock.onclose = function (e) {
        websocketclose(e);
    }
    websock.onopen = function () {
        websocketOpen();
    }
    //连接发生错误的回调方法
    websock.onerror = function () {
        console.log("WebSocket连接发生错误");
    }
}
// 实际调用的方法
function sendSock(agentData, callback) {
    global_callback = callback;
    if (websock.readyState === websock.OPEN) {
        //若是ws开启状态
        websocketsend(agentData)
    } else if (websock.readyState === websock.CONNECTING) {
        // 若是 正在开启状态，则等待1s后重新调用
        setTimeout(function () {
            sendSock(agentData, callback);
        }, 1000);
    } else {
        // 若未开启 ，则等待1s后重新调用
        setTimeout(function () {
            sendSock(agentData, callback);
        }, 1000);
    }
}
//数据接收
function websocketonmessage(e) {
    if(global_callback!=null&&global_callback!=""&&global_callback!=undefined){
        global_callback(JSON.parse(e.data));
    }
    
    // return JSON.parse(e.data);
}

//数据发送
function websocketsend(agentData) {
    websock.send(JSON.stringify(agentData));
}
//关闭
function websocketclose(e) {
    console.log("connection closed (" + e.code + ")");
}
function websocketOpen(e) {
    console.log("连接成功");
    // heartbeat();
    // login();
}
initWebSocket();
export{sendSock}
 
将文件引入main.js中去
 
import * as socketApi from './assets/js/plugin/socket.js'
Vue.prototype.socketApi = socketApi
 
 
 
在你需要使用websocket的页面进行调用this.socketApi.sendSock(param, callback);
 建议是将websocket定义在全局，否则你使用父子组件调用时就会每调用一次产生一个websocket对象（血泪史。。。。。）
 
 
与后台建立心跳连接，并登陆
 
methods:{
	heartbeat() {
      console.log("心跳");
      this.socketApi.sendSock(
        {
          type: 0,
          data: "heartbeat"
        },
        this.getData
      );
    },
    login() {
      this.token = CookieUtil.get("token");
      this.socketApi.sendSock(
        {
          type: 1,
          data: this.token
          // data:"c8544265df58b50c6131bad8a4dc537b"
        },
        this.getData
      );
    },
},
created() {
  clearInterval(window.timer);
  this.heartbeat();
  window.timer = setInterval(this.heartbeat, 130000);
},
mounted() {
  let that = this;
  this.$nextTick(function() {
    that.login();
  });
},
distroyed: function() {
    clearInterval(window.timer);
  },
  beforeRouteLeave(to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
    clearInterval(window.timer);
    console.log("已经清楚定时器");
    next();
  },
 
 
 
1、心跳和登陆都是后端写好的，前端只需要传入参数即可，没130s心跳一次，在离开页面时就停掉定时器，以防在访问其他页面时，会一直调用；我能想到的就是这个办法，如果有更好的办法麻烦告诉我
 2、为什么将登陆和心跳分开写？按正常的话，是先有心跳了，才会登陆，然后根据vue的啥玩意（学名忘了），反正就是先是执行created,再执行mounted
 3、getData函数是获取后端传给我的数据
 
 
主要就是这些了，剩下的就是根据项目需求，传不同的参数获取不同的数据
 
遇到的问题
 
1、定时器调用（不知道算不算问题）
 定时器函数 里面的参数是函数 不要加括号 加括号代表执行，应该当做变量传进去
 2、name在初始化的时候没有值（这些都是后台传过来的值）
 
 所以我就在data先定义了变量，然后再getData函数中赋值，这样就不会报错了
 3、所选队伍与外面的显示内容一一对应
 
 主要就是定义一下第三方变量，来获取数组下标和后台传来的teamId，上面的内容根据数组下标来确定对应的Id

原文地址：点击打开链接
var userId=$("#userId").val();
var lockReconnect = false;  //避免ws重复连接
var ws = null;          // 判断当前浏览器是否支持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协议,建议使用新版谷歌、火狐等浏览器，请勿使用IE10以下浏览器，360浏览器请使用极速模式，不要使用兼容模式！"); 
            });
        }
        initEventHandle();
    }catch(e){
        reconnect(url);
        console.log(e);
    }     
}

function initEventHandle() {
    ws.onclose = function () {
        reconnect(wsUrl);
        console.log("llws连接关闭!"+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();      //拿到任何消息都说明当前连接是正常的
        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);  
                } 
    };
}
// 监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
window.onbeforeunload = function() {
    ws.close();
}  

function reconnect(url) {
    if(lockReconnect) return;
    lockReconnect = true;
    setTimeout(function () {     //没连接上会一直重连，设置延迟避免请求过多
        createWebSocket(url);
        lockReconnect = false;
    }, 2000);
}

//心跳检测
var heartCheck = {
    timeout: 540000,        //9分钟发一次心跳
    timeoutObj: null,
    serverTimeoutObj: null,
    reset: function(){
        clearTimeout(this.timeoutObj);
        clearTimeout(this.serverTimeoutObj);
        return this;
    },
    start: function(){
        var self = this;
        this.timeoutObj = setTimeout(function(){
            //这里发送一个心跳，后端收到后，返回一个心跳消息，
            //onmessage拿到返回的心跳就说明连接正常
            ws.send("ping");
            console.log("ping!")
            self.serverTimeoutObj = setTimeout(function(){//如果超过一定时间还没重置，说明后端主动断开了
                ws.close();     //如果onclose会执行reconnect，我们执行ws.close()就行了.如果直接执行reconnect 会触发onclose导致重连两次
            }, self.timeout)
        }, this.timeout)
    }
}
 // 收到客户端消息后调用的方法 
    @OnMessage  
    public void onMessage(String message, Session session) {  
        if(message.equals("ping")){
        }else{
        。。。。
        }
   }
系统发现websocket每隔10分钟自动断开连接，搜了很多博客都说设置一下nginx的 


keepalive_timeout 


proxy_connect_timeout 


proxy_send_timeout 


proxy_read_timeout 


这四个字段的时长即可，然而好像并不奏效。遂采取心跳包的方式每隔9分钟客户端自动发送ping消息给服务端，服务端不需要返回。即可解决问题。

前端代码 注意发送的消息体格式不同
 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<title>简易websocket</title>
<body>
    <div>
        <label>请输入链接相关参数:</label>
        <input id="connectId" type="text" style="width:880px;" value="ws://你的地址">
        <button type="button" id="connect">连接</button><button type="button" id="disconnect">断开</button>
    </div>
 <div style="margin-top: 50px">
        <div>
           <button id="sendHeart" type="button">发送心跳</button>
        </div>
    </div>
    <div id="msgInfo">
    </div>
 
    <div style="margin-top: 50px">
        <div>
            <div><span>接收者id:</span><input type="text" id="toId" >
                 <span>要发送的消息:</span><input type="text" id="msg"></input>
                <button id="send" type="button">发送消息</button>
            </div>
        </div>
    </div>
    
</body>
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
    <script>
        var websocket=null;
        var conect = null;
 
        //点击连接
        $("#connect").click(function(){
            //判断当前连接是否为空
            // if (websocket != null){
            //     alert("您已经连接了，请不要重复连接！");
            //     return;
            // }
            //自定义的唯一标识，如果两个人输入的连接标识相同则会覆盖原来这个标识对应的连接，这里只是为了简单演示
            var  connectId=$("#connectId").val();
            
            //开始连接
            // 首先判断是否 支持 WebSocket
            if('WebSocket' in window) {
                //路径ws + ip + port + 自定义路径
                conect = connectId;
                var connectUrl = document.getElementById("connectId").value;
                console.log('链接地址' + connectUrl)
                websocket = new WebSocket(connectUrl);
                
            }  else {
                alert("浏览器不支持连接！")
                return;
            }
 
            // 打开时
            websocket.onopen = function(evnt) {
                console.log("  websocket.onopen  ");
                alert("连接成功!");
            };
 
            // 处理消息时
            websocket.onmessage = function(evnt) {
                //将消息转成json格式
                var msg = JSON.parse(evnt.data);
                $("#msgInfo").append("<p><font color='red'>" + evnt.data + "</font></p>");
                console.log("  websocket.onmessage   ");
            };
 
            websocket.onerror = function(evnt) {
                console.log("  websocket.onerror  ");
            };
 
            websocket.onclose = function(evnt) {
                console.log("  websocket.onclose  ");
                websocket.close();
                alert("连接关闭!");
            };
        });
 
         //点击断开
        $("#disconnect").click(function(){
             alert("连接关闭!");
             websocket.onclose = function(evnt) {
                 console.log("  websocket.onclose  ");
                 websocket.close();
                 alert("连接关闭!");
             };
             websocket.close();
        });

        //发送消息
        $("#send").click(function(){
           //先判断是否连接
           if (websocket == null){
               alert("您还没有连接!!!");
               return;
           }
 
           //接收者id
            var toId = $("#toId").val();
           //发送的消息内容
            var msg = $("#msg").val();
            if (toId == null || toId == ''){
                alert("请先输入接收者");
                return;
            }
            if (msg == null || msg == ''){
                alert("消息不能为空!!!");
                return;
            }
 
            //发送消息
            //构造消息的json格式
            // 注意发送的消息体格式不同
            var msgJson = {
                senderId:conect,
                msgContent: msg,
                toId:toId
            };
            websocket.send(JSON.stringify(msgJson));
        });

         //发送心跳
        $("#sendHeart").click(function(){
           //先判断是否连接
           if (websocket == null){
               alert("您还没有连接!!!");
               return;
           }

// 二进制 https://blog.csdn.net/weixin_34323858/article/details/87961467?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-4.control&dist_request_id=&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-4.control
            let buffer = new ArrayBuffer(1); // 初始化1个Byte的二进制数据缓冲区
            let dataView = new DataView(buffer);
            // // 数据写入过程
            dataView.setInt8(0,1); // 从第0个Byte位置开始，放置一个数字为1的数据


            websocket.send(dataView);
            // console.log(" 发送心跳  " + blob);
        });
    </script>
</html>

 
后端部分代码（接收数据的两种方式）
 
// 接收消息 客户端发送过来的消息
	@OnMessage
	public void onMessage(String message, Session session) throws IOException {
        logger.info("客户端的发送消息======内容【" + message + "】");
	}

	@OnMessage
	public void onMessage1(byte[] messages, Session session) throws IOException {
		// 判断是否是心跳数据， 这里因为有多种设备。
		// 并且考虑到兼容情况，所以只记录客户端主动发送心跳的
		if (messages.length == 1 && messages[0] == 1){
		}
	}