精华内容
下载资源
问答
  • 后端服务器宕机或重启时,前端Vue 不断重连webSocket的解决办法: 问题重现:后台服务重启时,前端连接的webScoket就断了,需要刷新页面才能重新建立连接,这样用户体验的效果不好,而且有些业务场景,比如硬件监控...

    问题重现:

    后台服务重启时,前端连接的webScoket就断了,需要刷新页面才能重新建立连接,这样用户体验的效果不好,而且有些业务场景,比如硬件监控系统大屏这些是不允许刷新页面的,所以需要前端发现webSocket断了,然后自己不断去发起连接。


    解决思路:

    在webSocket的生命周期onclose和onerror时调用重连函数,增加心跳检测。


    解决方案:

    1. 创建变量
      data() {
          return {
              // webSocket对象
      		webSocket: null,
      		// webSocketUrl地址
      		webSocketUrl: null,
      		//连接标识 避免重复连接
      		isConnect: false,
      		//断线重连后,延迟5秒重新创建WebSocket连接  rec用来存储延迟请求的代码
      		rec: null,
      		// 心跳发送/返回的信息
      		checkMsg: {hhh: 'heartbeat'},
      		//每段时间发送一次心跳包 这里设置为20s
      		timeout: 20000,
      		//延时发送消息对象(启动心跳新建这个对象,收到消息后重置对象)
      		timeoutObj: null,
          }
      }

       

    2. 创建webSocket连接
      //创建webSocket连接
      createWebSocket() {
          let that = this;
      	that.webSocket = new WebSocket(that.webSocketUrl);
      	that.initWebsocket();
      }

       

    3. 初始化webSocket连接

      initWebsocket() {
          let that = this;
      	//WebSocket连接建立之后会调用onopen方法
      	that.webSocket.onopen = that.websocketonopen;
      	//当websocket收到服务器发送的信息之后  会调用onmessage方法 
      	that.webSocket.onmessage = that.websocketonmessage;
      	//当websocket因为各种原因(正常或者异常)关闭之后,会调用onclose方法
      	that.webSocket.onclose = that.websocketclose;
      	//当websocket因为异常原因(比如服务器部署、断网等)关闭之后,会调用onerror方法
      	//在onerror中需要调用reConnect方法重连服务器
      	that.webSocket.onerror = that.websocketonerror;
      }

       

    4. websocketonopen函数

      websocketonopen() {
      	let that = this;
      	console.log('open');
      	//连接建立后修改标识
      	that.isConnect = true;
      	// 建立连接后开始心跳
      	// 因为nginx一般会设置例如60s没有传输数据就断开连接  所以要定时发送数据
      	that.timeoutObj = setTimeout(function() {
      		if (that.isConnect) {
      		    that.webSocket.send(that.checkMsg);
              }
          }, that.timeout);
      }

       

    5. websocketonerror函数

      websocketonerror() {
      	let that = this;
      	console.log('error');
      	//连接断开后修改标识
      	that.isConnect = false;
      	//连接错误 需要重连
      	that.reConnect();
      }

       

    6. websocketonmessage函数

      websocketonmessage(e) {
          // 拿到数据,处理自己的业务
      	let that = this;
      	console.log(e.data);
      				
      	//获取消息后 重置心跳
      	clearTimeout(that.timeoutObj);
      	that.timeoutObj = setTimeout(function() {
      	    if (that.isConnect) {
      		    that.webSocket.send(that.checkMsg); 
              }
      	}, that.timeout);
      }

       

    7. websocketclose函数

      websocketclose() {
          let that = this;
      	console.log('close');
      	//连接断开后修改标识
      	that.isConnect = false;
      	//连接错误 需要重连
      	that.reConnect();
      }

       

    8. 定义重连函数

      reConnect() {
          let that = this;
      	console.log('尝试重新连接');
      	//如果已经连上就不在重连了
      	if (that.isConnect) {
      		return;
      	}
      	clearTimeout(that.rec);
      	// 延迟5秒重连  避免过多次过频繁请求重连
      	that.rec = setTimeout(function() {
      		that.createWebSocket();
      	}, 5000);
      }

       

     

    展开全文
  • websocket链接,为实现断网、服务器重启等特殊情况。 原理 每隔一段时间向服务器发送一次数据 即(heartCheck.start()),服务器接收数据后返回一次信息,用来证明一切正常,否则就开始启动新的定时器来尝试重新连接...

    背景
    websocket链接,为实现断网、服务器重启等特殊情况。

    原理
    每隔一段时间向服务器发送一次数据 即(heartCheck.start()),服务器接收数据后返回一次信息,用来证明一切正常,否则就开始启动新的定时器来尝试重新连接(websocketReconnect()一定的时间尝试重连,如此重复)。

    代码

    var lockReconnect = false;//避免重复连接
    var wsUrl = "wss://echo.websocket.org";		// websocket链接
    var ws;
    
    function createWebSocket(){
    	try {
    		ws = new WebSocket(wsUrl);
    		websocketInit();
    	} catch (e) {
    		console.log('catch');
    		websocketReconnect(wsUrl);
    	}
    }
    
    createWebSocket();			// 创建websocket
    
    function websocketInit () {
    	// 建立 web socket 连接成功触发事件
    	ws.onopen = function (evt) {
    		onOpen(evt);
    	};
    	// 断开 web socket 连接成功触发事件
    	ws.onclose = function (evt) {			
    		websocketReconnect(wsUrl);
    		onClose(evt);
    	};
    	// 接收服务端数据时触发事件
    	ws.onmessage = function (evt) {
    		onMessage(evt);
    	};
    	// 通信发生错误时触发
    	ws.onerror = function (evt) {
    		websocketReconnect(wsUrl);
    		onError(evt);
    	};
    };
    
    function onOpen(evt) {
    	console.log("建立链接");
    	var sendData = { test: 'test' };        // 正常的请求数据
    	sendData = JSON.stringify(sendData);
    	ws.send(sendData);
    	//心跳检测重置
    	heartCheck.start();
    }
    
    function onClose(evt) {
    	console.log("连接已关闭...");
    }
    
    function onMessage(evt) {
    	console.log('接收消息: ' + evt.data);
    	var data = JSON.parse(evt.data);
    	if (data.test && data.test =='hello') {		// 对后端传过来的数据正常处理
            // 所需的正常操作
        }
    	//拿到任何消息都说明当前连接是正常的
    	heartCheck.start();
    }
    
    function websocketReconnect(url) {
    	if (lockReconnect) {       // 是否已经执行重连
    		return;
    	};
    	lockReconnect = true;
    	//没连接上会一直重连,设置延迟避免请求过多
    	tt && clearTimeout(tt);
    	var tt = setTimeout(function () {
    		createWebSocket(url);
    		lockReconnect = false;
    	}, 5000);
    }
    
    //心跳检测
    var heartCheck = {
    	timeout: 30000,
    	timeoutObj: null,
    	serverTimeoutObj: null,
    	start: function () {
    		console.log('start');
    		var self = this;
    		this.timeoutObj && clearTimeout(this.timeoutObj);
    		this.serverTimeoutObj && clearTimeout(this.serverTimeoutObj);
    		this.timeoutObj = setTimeout(function () {
    			//发送测试信息,后端收到后,返回一个消息,
    			ws.send("1");
    			self.serverTimeoutObj = setTimeout(function () {
    				ws.close();
    			}, self.timeout);
    		}, this.timeout)
    	}
    }
    
    function onError(evt) {
    	console.log('通信错误:' + evt.data);
    } 
    

    原文链接:https://www.cnblogs.com/tugenhua0707/p/8648044.html
    在实际运用中对原文进行一定修改。

    展开全文
  • Adruino Websocket ESP8266
  • 2、需要区分主动关闭还是被动关闭websocket,如页面隐藏主动关闭不需要重连,还是触发websocket error需要重连 ws.js export default { /** * * @param {String} url wwbsocket地址 * ...

    由于个人开发环境是vue,就从vue入手

    注意点:

    1、心跳监测需要在websocket关闭的时候及时关闭,避免定时器累计
    2、需要区分主动关闭还是被动关闭websocket,如页面隐藏主动关闭不需要重连,还是触发websocket error需要重连

    ws.js
    export default {
    	/**
    	 * 
    	 * @param {String} url wwbsocket地址
    	 * @param {*} th //vue的this
    	 */
    	async wsOpen(url,_this) {
    	    let ws = new WebSocket(url);
    	    ws.onopen = function(evt) {
    	    	//心跳监测定时器,定义为对象,是为了防止一个组件多个定时器,调用wsOpen导致定时器被覆盖,就始终有定时器未被正常关闭
    	        _this.testWeb = _this.testWeb || {}	
    	        //每隔10秒钟发送一次心跳,避免websocket连接因超时而自动断开 
    	        _this.testWeb[url] = setInterval(function(){ 
    	        	/**
    	        	*	readyState
    	        	*	0: connecting	正在连接
    	        	*	1:open		连接开启
    	        	*	2:closing		正在关闭
    	        	*	3:closed		关闭成功,触发onclose
    	        	*/
    	        	//虽然心跳会在触发close/error时被关闭,
    	        	//但是其关闭时间并不短暂也就是其在关闭中定时器不会调用onclose关闭心跳
    	        	//readyState=2持续发送心跳数据会导致控制台报错,所以我加了判断
    	            ws.readyState===1?ws.send('hello'):clearInterval(_this.testWeb[url]);
    	        },10 * 1000);
    	    };
    	    ws.onerror = error => {
    	        clearInterval(_this.testWeb[url]);
    	        console.log('websoket错误了');
    	        if(_this.reconnect){	//非正常关闭重连
    	            let timeouts = setTimeout(() => {
    	                _this.getData();//ws关闭后的回调函数
    	                clearTimeout(timeouts)
    	            },60*1000)
    	        }
    	    };
    	    ws.onclose = () => {
    	        clearInterval(_this.testWeb[url]);
    	        _this.testWeb = {};
    	        console.log('websoket关闭了');
    	        if(_this.reconnect && ws.readyState == 3){	//非正常关闭重连
    	            let timeouts = setTimeout(() => {
    	                _this.getData();//ws关闭后的回调函数
    	                clearTimeout(timeouts)
    	            },10*1000)
    	        }
    	    };
    	    return ws;
    	},
    }
    
    vue组件中

    可以考虑将reconnect存储到store里面,但若是多个websocket,只有一个发生错误,能精准到某一个websocket重启而不是全部重启。

    import common from '@/assets/js/ws.js'
    
    export default {
        data(){
            return{
                reconnect: true,	//是否需要重连
            }
        },
        methods:{
            getData(){	//获取数据
                if(!this.reconnect){
                    return;
                }
                common.wsOpen.call(this,`${this.$socket}/ws`,this).then(res => {
                    this.ws = res;
                    this.ws.onmessage = evt => {
                        let resData = JSON.parse(evt.data);
                        if(resData.code==1){
                            //数据处理
                        }
                        
                    }
                })
            },
            visibilitychange(e){	//检测页面状态
                if(document.visibilityState == 'hidden'){	//页面隐藏
                    this.reconnect = false;
                    this.ws.close();
                }else{	//页面显示
                    this.reconnect = true;
                    this.getData();
                }
            }
        },
        created(){
        },
        mounted(){
            this.getData();
            window.addEventListener('visibilitychange',this.visibilitychange)
        },
        beforeDestroy() {
            this.reconnect = false;
            this.ws.close();
            window.removeEventListener("visibilitychange",this.visibilitychange)
        },
    
    展开全文
  • <code>ChannelPipeline channelPipeline=socketChannel.pipeline(); channelPipeline.addLast("ssl",new SslHandler(engine)); channelPipeline.addLast(new IdleStateHandler(90,90,90, TimeUnit....
  • 后端服务器宕机或重启时,前端Vue 不断重连webSocket的解决办法: 问题重现:后台服务重启时,前端连接的webScoket就断了,需要刷新页面才能重新建立连接,这样用户体验的效果不好,而且有些业务场景,比如硬件监控...

    后端服务器宕机或重启时,前端Vue 不断重连webSocket的解决办法:

    问题重现:后台服务重启时,前端连接的webScoket就断了,需要刷新页面才能重新建立连接,这样用户体验的效果不好,而且有些业务场景,比如硬件监控系统大屏这些是不允许刷新页面的,所以需要前端发现webSocket断了,然后自己不断去发起连接。

    解决思路:在webSocket的生命周期onclose和onerror时调用重连函数,增加心跳检测。

    解决方案:

    1.创建变量

    data() {    
        return {        
            // webSocket对象        
            webSocket: null,        
            // webSocketUrl地址        
            webSocketUrl: null,        
            //连接标识 避免重复连接        
            isConnect: false,        
            //断线重连后,延迟5秒重新创建WebSocket连接  rec用来存储延迟请求的代码        
            rec: null,        
            // 心跳发送/返回的信息        
            checkMsg: {hhh: 'heartbeat'},        
            //每段时间发送一次心跳包 这里设置为20s    
            timeout: 20000,        
            //延时发送消息对象(启动心跳新建这个对象,收到消息后重置对象)        
            timeoutObj: null,    
       }
    }

    2.创建webSocket连接

    //创建webSocket连接
    createWebSocket() {    
        let that = this;    
        that.webSocket = new WebSocket(that.webSocketUrl);
        that.initWebsocket();
    }

    3.初始化webSocket连接

    initWebsocket() {    
        let that = this;    
        //WebSocket连接建立之后会调用onopen方法
        that.webSocket.onopen = that.websocketonopen;    
        //当websocket收到服务器发送的信息之后  会调用onmessage方法     
        that.webSocket.onmessage = that.websocketonmessage;
        //当websocket因为各种原因(正常或者异常)关闭之后,会调用onclose方法    
        that.webSocket.onclose = that.websocketclose;    
        //当websocket因为异常原因(比如服务器部署、断网等)关闭之后,会调用onerror方法    
        //在onerror中需要调用reConnect方法重连服务器    
        that.webSocket.onerror = that.websocketonerror;
    }

    4.websocketonopen函数

    websocketonopen() {    
        let that = this;    
        console.log('open');    
        //连接建立后修改标识    
        that.isConnect = true;    
        // 建立连接后开始心跳    
        // 因为nginx一般会设置例如60s没有传输数据就断开连接  所以要定时发送数据    
        that.timeoutObj = setTimeout(function() {        
            if (that.isConnect)    
                that.webSocket.send(that.checkMsg);    
                }, that.timeout);
     }
    5.websocketonerror函数
    
    websocketonerror() {    
        let that = this;    
        console.log('error');    
        //连接断开后修改标识    
        that.isConnect = false;    
        //连接错误 需要重连    
        that.reConnect();
    }
    
    6.websocketonmessage函数
    
    websocketonmessage(e) {    
        // 拿到数据,处理自己的业务    
        let that = this;    
        console.log(e.data);                    
        //获取消息后 重置心跳    
        clearTimeout(that.timeoutObj);    
        that.timeoutObj = setTimeout(function() {    
            if (that.isConnect)
            that.webSocket.send(that.checkMsg);    },
            that.timeout);
    }
    
    7.websocketclose函数
    
    websocketclose() {    
        let that = this;    
        console.log('close');    
        //连接断开后修改标识    
        that.isConnect = false;    
        //连接错误 需要重连    
        that.reConnect();
    }
    8.定义重连函数
    
    reConnect() {    
        let that = this;    
        console.log('尝试重新连接');    
        //如果已经连上就不在重连了    
        if (that.isConnect) {        
            return;    
        }    
        clearTimeout(that.rec);    
        // 延迟5秒重连  避免过多次过频繁请求重连    
        that.rec = setTimeout(function() {    
            that.createWebSocket();    }, 5000);
    }

    最后

    如果你现在也想学习前端开发技术,在入门学习前端的过程当中有遇见任何关于学习方法,学习路线,学习效率等方面的问题,推荐你加入一个前端qq学习交流裙:1142648440里面也整理了一些前端学习手册,前端面试题,前端开发工具,PDF文档书籍教程,需要的话都可以自行来获取下载。

    展开全文
  • WebSocket客户端连接不上和掉线的问题以及解决方案
  • 添加头部信息,这两个字段表示请求服务器升级协议为WebSocket: proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection $connection_upgrade; 默认情况下,连接将会在无数据传输60秒后关闭,...
  • Node.js启动Websocket

    2020-09-15 16:35:27
    var WebSocketServer = require('ws').Server; // app.get('/', function(req, res){ // res.sendFile(__dirname + '/index.html') // }) // const server = http.createServer(app) var wss = new WebSocket...
  • python启动webscoket服务

    2020-06-15 17:41:28
    base64 import threading import time connectionlist = {} # 存放链接客户fd,元组 g_code_length = 0 g_header_length = 0 # websocket数据头部长度 PRINT_FLAG = True """ 经测试发现IE 11浏览器在成功建立...
  • 原文:http://blog.csdn.net/e421083458/article/details/8651312 测试没有效果 配置server.xml文件,加入session保存操作   &lt;Context path="/testdemo"...org.apache.catalin...
  • JMeter压测Websocket插件

    2018-10-24 09:59:23
    使用JMeter压测Websocket协议,需要下载Websocket插件。...io-9.4.12.v20180830.jar等),解压后拷贝到JMeter的安装目录下的..\apache-jmeter-3.1\lib\ext路径下,重启JMeter,即可简历Websocket的长连接和请求。
  • websocket 心跳连接

    2019-04-20 14:39:38
    前端实现 websocket心跳连接 支持心跳检测和心跳重连
  • jetty跑websocket的坑

    千次阅读 2017-06-28 20:54:05
    最近要用websocket,项目是maven习惯用jetty了,然后今天要做websocket,就是没收到请求,网上基本很少有jetty的,都是tomcat,最后发现,我把jetty8换成jetty9.4啊,以及勾选websocket support。就好了,好坑。。
  • 发包大小超出范围找到项目中web.xml文件,加入如下配置重启服务即可。 <!-- websocket 发送内容长度设置(默认8192字节) --> <param-name>org.apache.tomcat.websocket.textBufferSize <param-value>5242800 ...
  • <p>I am using the ratchet websocket server on CentOs. The problem is it is stopped after some time. I have used the screen command to solve the problem but when server is rebooted it does not start ...
  • github上比较流行的java websocket框架,主要包括以下内容:   1.WebSocketServer对象 server的入口,每次都只需要创建一个实例,可以接受所有的websocket请求,内部采用NIO作为底层io框架,主要有两部分组成: ...
  • 简介 笔者当初为了学习JAVA,收集了很多经典源码,源码难易程度分为初级、中级、高级等,详情看源码列表,需要的可以直接下载! 这些源码反映了那时那景笔者对未来的盲目,对代码的热情、执着,对IT的憧憬、向往!...
  • websocket实例,内部含有详细使用说明以及代码...此架包可解决问题:系统使用websocket 访问远程上的实时数据,但是有时候会停止更新实时数据,只要重启了自己的系统,就会继续更新数据了,此包可以完美解决此问题。
  • websocket

    2021-09-27 02:33:09
    websocket 心跳包重连/断线重连区别 网络断开连接的时候 需要心跳包重连 网络失去连接的时候 会触发websocket中的onclose事件,需要重连 每隔一段时间进行心跳检测,如果处于连接中主动向server端发送消息来重置...
  • 有流输出的命令可能会干扰后面命令的输出,比如top , ping ,所以你需要在执行完这些命令后重启容器。 其他 您也可以使用 Web 浏览器来充当端,有一个 chrome 扩展可以做到这一点: 笔记: 您应该在命令后添加换...
  • Jmeter组件:JMeterWebSocketSampler-1.0.2-SNAPSHOT.jar和其他6个依赖文件。解压后全部放到{jmeter}/lib/ext目录下,并重启Jmeter。
  • JMeter websocket依赖的jar包: JMeterWebSocketSampler-1.0.2-SNAPSHOT.jar ...以上jar包都准备好并放到Jmeter目录的\lib\ext\目录下后,重启Jmeter之后可以在sampler中看到websocket sampler这一项
  • WebSocket

    2019-12-16 15:42:06
    // cnpm i ws -S ...var WebSocketServer = require('ws').Server, wss = new WebSocketServer({ port: 8181 }) wss.on('connection', function (ws) { ws.on('message', function (message) { ...
  • 包含Jmeter组件:JMeterWebSocketSampler-1.0.2-SNAPSHOT.jar和其他6个依赖文件。解压后全部放到/lib/ext目录下,并重启Jmeter。
  • websocket协议规范

    2021-02-05 11:56:25
    websocket协议规范 作者:二郎666时间: 2019-11-02 08:06:49 标签:网络通信协议websocketwebsocket协议客户端vbwebsocket教程 《websocket协议详解》教程分三篇: 什么是websocket websocket协议规范 用vb...
  • php 启动websocket

    2020-07-07 17:49:11
    Websocke_test使用说明 首先先修改conversation.php与... ...” ,重启php环境。 本地cmd启动websocket服务,通过命令行执行 [php路径]php.exe “[文件路径]server.php” 浏览器打开conversation.html,发送连接请求。
  • 该jar包为websocket协议的插件,直接放在jmeter的D:\software\apache-jmeter-4.0\lib\ext目录下,重启jmeter即可使用,可以进行websocket压力测试
  • Jmeter WebSocket补丁

    2019-05-05 15:25:54
    jmeter添加webscoket的补丁,下载该资源后,将资源中的jar包拷贝至\jmeter\lib\ext\目录下,然后重启jmeter

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 8,939
精华内容 3,575
关键字:

websocket重启