websocket心跳实现
简介
在实际项目中可能会使用到websocket，在使用过程中可能会存在一种问题就是，当网络异常断开时、或者websocket服务波动时，websocket会断开，导致异常，正常情况下，我们会采用心跳的方式来保持与服务器之间的通信，即客户端向服务端相互发送消息，正常情况下我们都会发送ping、pong消息。下面将使用python和简单的html进行简单的实现。
python部分
主要是实现websocket服务端
from flask import Flask
from flask_sockets import Sockets
app = Flask(__name__)
sockets = Sockets(app)
@sockets.route("/start_websocket")
def start_websocket(ws):
print("ws:{}".format(ws))
try:
while not ws.closed:
data = ws.receive()
print("receive_data:{}".format(data))
if data == 'ping':
ws.send('pong')
else:
ws.send(data)
ws.send('test')
except Exception as e:
print("receive_data error:{}".format(e))
if __name__ == "__main__":
from gevent import pywsgi
from geventwebsocket.handler import WebSocketHandler
server = pywsgi.WSGIServer(listener=("0.0.0.0", 5050), application=app, handler_class=WebSocketHandler)
server.serve_forever()
前端部分
实现websocket客户端并实现心跳
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>index</title>
</head>
<body>
<script>
window.onload=function() {
var ws = createWebSocket()
print("ws:", ws)
var timeout = 5000
var heartCheck = {
sendTimeoutObj:null,
serverTimeoutObj:null,
// 重置心跳发送
reset: function() {
clearTimeout(this.sendTimeoutObj)
clearTimeout(this.serverTimeoutObj)
},
// 发送心跳
start: function() {
// 定时发送心跳
this.sendTimeoutObj = setTimeout(()=>{
ws.send('ping')
// 正常来说，当发送完心跳包后，服务端会响应即在onmessage中做出响应，并清除此心跳包发送新的心跳包，
// 如果没有做出响应的，则达到超时时间主动关闭websocket，开始重连
this.serverTimeoutObj = setTimeout(()=> {
ws.close()
}, timeout)
}, timeout)
}
}
// 创建websocket
function createWebSocket() {
try{
var ws = new WebSocket("ws://127.0.0.1:5050/start_websocket")
init(ws)
return ws
} catch(e) {
console.log("connect exception")
return null
}
}
// 初始化websocket
function init(ws) {
// websocket打开时
ws.onopen = function() {
console.log("WebSocket open")
heartCheck.reset()
heartCheck.start()
}
ws.onclose = function(response) {
console.log("onclose:", response)
reconnect()
}
// 接收消息
ws.onmessage = function(response) {
console.log("onmessage:", response)
heartCheck.reset()
heartCheck.start()
}
ws.onerror = function(response) {
console.log("onerror:", response)
}
}
var isConnected = false
var reconnectTimeout = null
// 重连
function reconnect() {
// 当前正在操作连接的时候就不进行连接，防止出现重复连接的情况
if (isConnected) return
isConnected = true
reconnectTimeout && clearTimeout(reconnectTimeout)
reconnectTimeout = setTimeout(()=>{
heartCheck.reset()
isConnected = false
ws = createWebSocket()
}, timeout)
}
}
</script>
</body>
</html>
简易的示意图
websocket心跳实现的更多相关文章
- 初探和实现websocket心跳重连
心跳重连缘由 在使用websocket过程中,可能会出现网络断开的情况,比如信号不好,或者网络临时性关闭,这时候websocket的连接已经断开, 而浏览器不会执行websocket 的 onclos ...
- 理解WebSocket心跳及重连机制（五）
理解WebSocket心跳及重连机制 在使用websocket的过程中,有时候会遇到网络断开的情况,但是在网络断开的时候服务器端并没有触发onclose的事件.这样会有:服务器会继续向客户端发送多余的 ...
- 初探和实现websocket心跳重连(npm: websocket-heartbeat-js)
提示:文章最下方有仓库地址 心跳重连缘由 websocket是前后端交互的长连接,前后端也都可能因为一些情况导致连接失效并且相互之间没有反馈提醒.因此为了保证连接的可持续性和稳定性,websocket ...
- vue使用 封装websocket心跳包
---恢复内容开始--- 这套代码可以拿过去直接用 一些注意我会在下面代码中加上注释: 谢谢支持 核心代码 //这里需要引入vuex import store from './store'; let ...
- websocket心跳重连 websocket-heartbeat-js
初探和实现websocket心跳重连(npm: websocket-heartbeat-js) 心跳重连缘由 websocket是前后端交互的长连接,前后端也都可能因为一些情况导致连接失效并且相互之间 ...
- WebSocket心跳检测和重连机制
1. 心跳重连原由 心跳和重连的目的用一句话概括就是客户端和服务端保证彼此还活着,避免丢包发生. websocket连接断开有以下两证情况: 前端断开 在使用websocket过程中,可能会出现网络断 ...
- javascript websocket 心跳检测机制介绍
====测试代码: ==index.html <!DOCTYPE html> <html lang="en"> <head> <meta ...
- websocket 心跳重连
websocket 的基本使用: var ws = new WebSocket(url); ws.onclose = function () { //something reconnect(); // ...
- service里设置websocket心跳并向fragment发送数据
垃圾小白写了自己看的 /** * service 文件 */ public class SocketService extends Service { //自己定义接口用来传参 private sta ...
- 小程序websocket心跳库——websocket-heartbeat-miniprogram
前言 在16年的时候因为项目接触到websocket,而后对心跳重连做了一次总结,写了篇博客,而后18年对之前github上的demo代码进行了再次开发和开源,最终封装成库.如下: 博客:https: ...
随机推荐
- Springcloud及Git线上配置详解
SpringCloud 这个阶段该如何学? 三层架构 + MVC 框架: Spring IOC AOP SpringBoot,新一代的JavaEE开发标准,自动装配 模块化~ all in one,代 ...
- 【FAQ】分析服务导出的事件数据和概览页面展示的数据不一致该如何解决？
华为分析服务面向开发者提供两种数据展现方式:(1)事件数据下载,开发者可以将事件数据下载后导入到自有的分析系统中:(2)直接在AGC概览页面查看用户数和事件数. 问题描述 某开发者想将事件数据导入到自 ...
- vue大型电商项目尚品汇（前台篇）day01
学完vue2还是决定先做一个比较经典,也比较大的项目来练练手好一点,vue3的知识不用那么着急,先把vue2用熟练了,vue3随时都能学. 这个项目确实很经典包含了登录注册.购物车电商网站该有的都有, ...
- MYSQL如何比对版本号字符串
MYSQL如何比对版本号字符串 mysql 数据库中存储了一个形如"2.7.6.526" 的版本号,现在要获取出小于某个版本号的数据,怎么做?这个就是昨天遇到的一个问题,记录下查到 ...
- es的查询、排序查询、分页查询、布尔查询、查询结果过滤、高亮查询、聚合函数、python操作es
今日内容概要 es的查询 Elasticsearch之排序查询 Elasticsearch之分页查询 Elasticsearch之布尔查询 Elasticsearch之查询结果过滤 Elasticse ...
- WC2021 题目清单
Day2 上午 <IOI题型与趣题分析> 来源 题目 完成情况 备注 IOI2002 Day1T1 Frog 已完成 IOI2002 Day1T2 Utopia IOI2002 Day1T ...
- Kubernetes client-go Informer 源码分析
概述ControllerController 的初始化Controller 的启动processLoopHandleDeltas()SharedIndexInformersharedIndexerIn ...
- mysql刷题笔记
近期,为提升自己的工程能力,在休息时常通过刷题来回顾一下基础性知识. 于是选择了牛客网上的mysql知识题库练手,过程中,主要遇到了几个比较有意思的题,记录下来,方便回顾. 题1:SQL29 计算用户 ...
- MySQL锁(乐观锁、悲观锁、多粒度锁)
锁 并发事务可能出现的情况: 读-读事务并发:此时是没有问题的,读操作不会对记录又任何影响. 写-写事务并发:并发事务相继对相同的记录做出改动,因为写-写并发可能会产生脏写的情况,但是没有一个隔离级别 ...
- Go微服务框架go-kratos实战05：分布式链路追踪 OpenTelemetry 使用
一.分布式链路追踪发展简介 1.1 分布式链路追踪介绍 关于分布式链路追踪的介绍,可以查看我前面的文章 微服务架构学习与思考(09):分布式链路追踪系统-dapper论文学习(https://www. ...