记录websocket心跳检测遇到的坑

最新推荐文章于 2024-05-31 10:38:47 发布
最新推荐文章于 2024-05-31 10:38:47 发布
阅读量900 收藏 5
点赞数
文章标签： javascript websocket vue.js html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/RoGer__D/article/details/118025090
版权

1.首先上代码，代码是用的原生ws浏览器自带 在这里插入图片描述
坑点1：原生ws携带token的时候要去空格，否则后端会报错。

因为在ng服务器上 默认60秒接受不到信息就会自动断开连接 所以前端需要加入心跳检测去重置时间，当然也可以改ng配置延长时间，但治标不治本
代码如下
在这里插入图片描述
在这里插入图片描述

在mounted里加入代码
并且主要1处加入开关变量 因为当页面离开的时候我们需要关闭连接 而此时在2处判断一下 如果是离开页面了则不执行后面重连代码
搜索时关闭旧连接，建立新连接同理
在这里插入图片描述
需要data中定义变量去控制 如果是搜索则在close的时候不调用重连代码

重来代码如下
在这里插入图片描述
同样需要在data中定义开关变量避免请求过多

data中变量如下
在这里插入图片描述
最后 重要
在这里插入图片描述
在open和message时重置并开始
在err和close的重新建立连接
本项目中close时需要判断 条件才进行连接
这儿注意 仅仅在这儿判断是不够的 离开页面后 仍然会推送一条信息 在153行处 代码会执行 报socket已断开 虽然不影响效果 功能 但还是得解决！！！
所以才有了 152的判断

RoGer__D
关注
webSocket前端开发实现+心跳检测机制
mayuan2011的博客
01-04 1万+
最近项目用到了webSocket实时通信机制，将过程中遇到的麻烦和坑做一下记录 首先，了解一下webSocket是什么？它是一种网络通信协议，是HTML5开始提供的一种在单个TCP连接上进行全双工通讯的协议。 为什么要使用webSocket以及心跳检测机制 网上当然后很多讲解，这是本人的一个简单理解： 一般情况下前后端通信会采用HTTP网络协议，它是一种无状态的、无连接的、单向的应用层协议，采用请...
用websocket做心跳检测——解决微信iOS端网页无法监听浏览时间问题
u011037503的博客
10-02 3543
在很多购物网站中，特别是在一些产品购买浏览页面中，我们需要抓取用户浏览的一些行为。比如说某个页面的用户浏览时间，分享的次数，以便能给销售团队提供用户行为的信息，方便以后的销售策略的调整。本文提出了在微信客户端内部网页中用WebSocket实现的一种记录监控用户对网页浏览时间的方案，并考虑了各终端的适配性，和与当今流行Java服务端框架整合，和代理服务器的适配等问题，给出了完整的解决方法。
websocket心跳
07-10
websocket心跳，包括心跳代码、前台代码、后台代码
说说使用websocket遇到的坑，
博博客客
12-04 5755
引言 今天来说说前段时间项目运行过程中遇到问题。原本我们做的只是一个客服系统。连接数量基本被锁定在一百左右（因为客服最多能同时与5个左右的游客对话），但后面单独为一家商户定制了类似IM一对一聊天。突然连接量上来了，然后系统运行一天左右必卡死。重启服务后程序又正常运行。第二天又会出现同样的问题。 下面我会贴上我的代码。因为第一次遇到这个问题，所以查了第一天没查出原因。 说下我都改过那些东西： 1.问下了朋友说我的连接可能导致内存溢出，所以我加大了jvm的运行内存，直接上5个G足够大了吧，但问题还是存在。 2.
WebSocket之坑（小白之说）
weixin_34138377的博客
09-30 760
相信大家在工作中都会遇到服务端想推送数据到客户端这种情况发生。这时候，就会想到webSocket的存在。 在java中，使用webSocket，则就是前端采用了webSocket对象，或者是采用了SocketJs对象进行处理。后端则建立对应的webSocket路径，以及对应的handler。 在挑选使用的方法中，这里我是采用了Spingboot+WebSocket。 创建好之后，与前端进行联调的...
websocket我踩过的坑
sj005的博客
07-09 1164
workman的配置对于初学者而言是一条天坑，想几天就搞起来根本不可能，原因就在于这里面坑太多，下面我简单记录几条我遇到的坑。 1、端口问题 我使用的是阿里云服务器，在创建workman的时候总是说我端口不对，网上查了一大堆的材料，是什么关闭防火墙啦，，设置防火墙进出口规则啥的，试了几天都不对最终的解决办法是： $ws_worker = new Worker("websocket://0.0.0.0:1234"); 这里的ip一定要是0.0.0.0，其他都不行，就算是你公网的ip都不行...
React + typescript 全局websocket 监听（心跳检测）
qq_41941902的博客
11-09 764
主要使用React提供得createContext API，不理解原理可以直接复制代码，根据使用步骤使用；相信大家能用到websocket技术那么相关的API也能理解，对JS的理解也很好啦；当前文章标题有typescript大家点进来说明对typescript也很熟悉；如果大家代码里没有用typescript的话可以把下面的代码中的typescript自己去掉；废话不多说直接上代码，代码都有基本的注释相信大家可以理解~以下不用多讲吧？把使用的引入；
微信小程序开发附源码：详解微信小程序实现WebSocket心跳重连.doc
05-18
通过以上步骤，我们可以构建一个完整的WebSocket心跳重连机制，确保在微信小程序中即使遇到网络波动，也能及时恢复与服务器的通信，提高用户体验。在实际项目中，可能还需要根据具体需求进行优化，例如增加异常处理...
理解WebSocket心跳重连机制以及移动端锁屏或退到后台运行时重连机制
sardine-z
12-19 9061
一 WebSocket 心跳重连机制 在使用websocket的过程中，有时候会遇到网络断开的情况，但是在网络断开的时候服务器端并没有触发onclose的事件。这样会有：服务器会继续向客户端发送多余的链接，并且这些数据还会丢失。所以就需要一种机制来检测客户端和服务端是否处于正常的链接状态。因此就有了websocket的心跳了。还有心跳，说明还活着，没有心跳说明已经挂掉了。 1. 为什么叫心跳包...
websocket封装
最新发布
码农键盘上的梦
05-31 867
websocket在前端开发中，是一个必须掌握的技术！你可以不用，但必须掌握！前几天，就遇到这样一个需求，要求界面的数据通过websocket实时推送，并且必须支持断网重连、自动心跳！自动心跳是定期向服务端发送小型数据包，如果一段时间内服务端没有收到心跳响应，系统可能会断开连接。websokect的API非常简单// 创建ws连接console.log('WebSocket 连接已经建立。');');console.log('收到服务器消息：', event.data);
采坑websocket总结（二）
轩1024的博客
08-12 861
socket.io
websocket在react中的使用
aliven1的博客
10-22 927
npm install reconnecting-websocket --save import ReconnectingWebSocket from "reconnecting-websocket"; testWebsocket=()=>{ let url = `ws://11.11.11.11:8000/market_info/` const data={test:"test"} const rws=new ReconnectingWebSocket(url,[],{}
websocket开发实时通信遇坑记——心跳停止
wjgxajh的博客
02-25 777
用h5+app websocket开发的聊天项目，为了保持实时在线，客户端每5s向服务器发送心跳消息，用setInterval函数定时向后台发送心跳，结果发现setInterval函数在应用程序进入后台后隔一段时间会休眠，导致我心跳发送不过去，服务器就判定我离线，这个梗无解？ //4. 定时发送心跳，获取未读信息 window.clearInterval(CHAT.keepAliv...
WebSocket心跳检测和重连机制
夏已微凉、
09-23 983
一、前言二、效果三、代码 一、前言 前端调用的服务端地址：ws://echo.websocket.org ，网站地址为websocket.org 用 js 写的 WebSocketHeartBeat，心跳检测 前端调用websocket的3种不同写法，只是 3 种 [ 写法 ]，不是 3 种 [ 方法 ] WebSocket心跳检测和重连机制 二、效果 正常连接，每6秒给服务端发送一个心跳消息 连接异常（比如：把服务端地址ws://echo.websocket.org改成ws://echo.webs.
websocket心跳检测和重连机制(复制即用)
HuangsTing的博客
05-14 535
data() { return { wsurl: 'ws://127.0.0.1:8080', websock: null, lockReconnect: false, timerReconnect: null, heartTimeout: null, serverTimeout: null }; }, created() { this.createWebSocket(); }, beforeDestroy() { if (this.webs
Websocket客户端断网，服务端心跳超时检测并断开连接
热门推荐
qq_31288101的博客
09-16 1万+
起因 项目上想通过websocket做好友的上线下线通知功能，用户上线时客户端websocket连接服务端，调用服务端onOpen()方法，服务端通知所有好友当前用户上线；用户退出时客户端websocket断开连接，调用服务端onClose()方法，服务端通知所有好友当前用户离线。 问题 这样做会有一个很大的问题，如果客户端是关闭流量、关闭WIFI断网而不是正常退出，服务端就不会收到客户端的断连请求，因此服务端并不会触发onClose()方法，导致其好友无法收到当前用户的离线信息。 解决方案 经过网上大量资
vue使用websocket 导致server崩溃的问题
qq_36577699的博客
05-08 1829
websocket引起前端崩溃
websocket 心跳检测
yanglq的博客
05-18 1649
http://www.cnblogs.com/1wen/p/5808276.html
socket功能集成聊天-发送空白文本
weixin_56035334的博客
09-14 258
现在点击提交键，不仅文本显示不了在聊天记录上，并且，在发送函数方法中console.log打印输入框文本this.word，控制台出现的居然是空白的！4.最后定位在this.word上，既然data里的word输出是空白，那是不是漏写了双向绑定呢？3.看了几十遍，都没有发现问题QAQ，百度也无果；最后还是看回自己的代码。点击“提交”键，发送用户输入的文本。想要跟小猫咪聊天，还是得多细心专心才行 TAT。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值