简介

在实际项目中可能会使用到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心跳实现的更多相关文章

  1. 初探和实现websocket心跳重连

    心跳重连缘由 在使用websocket过程中,可能会出现网络断开的情况,比如信号不好,或者网络临时性关闭,这时候websocket的连接已经断开, 而浏览器不会执行websocket 的 onclos ...

  2. 理解WebSocket心跳及重连机制（五）

    理解WebSocket心跳及重连机制 在使用websocket的过程中,有时候会遇到网络断开的情况,但是在网络断开的时候服务器端并没有触发onclose的事件.这样会有:服务器会继续向客户端发送多余的 ...

  3. 初探和实现websocket心跳重连(npm: websocket-heartbeat-js)

    提示:文章最下方有仓库地址 心跳重连缘由 websocket是前后端交互的长连接,前后端也都可能因为一些情况导致连接失效并且相互之间没有反馈提醒.因此为了保证连接的可持续性和稳定性,websocket ...

  4. vue使用 封装websocket心跳包

    ---恢复内容开始--- 这套代码可以拿过去直接用 一些注意我会在下面代码中加上注释: 谢谢支持 核心代码 //这里需要引入vuex import store from './store'; let ...

  5. websocket心跳重连 websocket-heartbeat-js

    初探和实现websocket心跳重连(npm: websocket-heartbeat-js) 心跳重连缘由 websocket是前后端交互的长连接,前后端也都可能因为一些情况导致连接失效并且相互之间 ...

  6. WebSocket心跳检测和重连机制

    1. 心跳重连原由 心跳和重连的目的用一句话概括就是客户端和服务端保证彼此还活着,避免丢包发生. websocket连接断开有以下两证情况: 前端断开 在使用websocket过程中,可能会出现网络断 ...

  7. javascript websocket 心跳检测机制介绍

    ====测试代码: ==index.html <!DOCTYPE html> <html lang="en"> <head> <meta ...

  8. websocket 心跳重连

    websocket 的基本使用: var ws = new WebSocket(url); ws.onclose = function () { //something reconnect(); // ...

  9. service里设置websocket心跳并向fragment发送数据

    垃圾小白写了自己看的 /** * service 文件 */ public class SocketService extends Service { //自己定义接口用来传参 private sta ...

  10. 小程序websocket心跳库——websocket-heartbeat-miniprogram

    前言 在16年的时候因为项目接触到websocket,而后对心跳重连做了一次总结,写了篇博客,而后18年对之前github上的demo代码进行了再次开发和开源,最终封装成库.如下: 博客:https: ...

随机推荐

  1. .net 项目使用 JSON Schema

    .net 项目使用 JSON Schema 最近公司要做配置项的改造,要把appsettings.json的内容放到数据库,经过分析还是用json的方式存储最为方便,项目改动性最小,这就牵扯到一个问题 ...

  2. 6.Docker网络

    什么是 Docker网络 docker 不启动,默认网络情况 ens33 lo virbr0 在 CentOS7 的安装过程中如果有选择相关虚拟化的的服务安装系统后,启动网卡时会发现有一个以网桥连接的 ...

  3. Redis设计与实现2.2：数据持久化

    数据持久化 这是<Redis设计与实现>系列的文章,系列导航:Redis设计与实现笔记 RDB持久化 RDB 持久化功能所生成的 RDB 文件是一个经过压缩的二进制文件,通过该文件可以还原 ...

  4. Typora详细教程以及下载

    ​ 发现一篇非常不错的 Typora 教程,分享给大家. 原文链接:https://www.cnblogs.com/hyacinthLJP/p/16123932.html 作者:MElephant T ...

  5. SmartIDE v0.1.17 已经发布 - 模版库远程模式和插件市场公测

    SmartIDE v0.1.17 已经发布,本次同步更新了CLI (Build 3332) 的稳定版通道和Server (Build 3333) 生产环境(内测中).请参考对应的 安装说明 获取最新版 ...

  6. Web 前端实战（三）：雷达图

    前言 在<Canvas 线性图形(五):多边形>实现了绘制多边形的函数.本篇文章将记录如何绘制雷达图.最终实现的效果是这样的: 绘制雷达图 雷达图里外层 如动图中所示,雷达图从里到外一共有 ...

  7. BI　如何让SaaS产品具有 “安全感”和“敏锐感”（上）

    SaaS模式一经推出,凭借自身的高性价比.低维护成本,无需软硬件维护.无需运维等明晃晃的优点,得到了爆发式的增长,甚至全面改变了软件的开发模式.各位老总的问候语,不知从什么时候开始,都变成了:&quo ...

  8. 大数据分析VMWare虚拟机centos系统下配置网络参数

    最近搞大数据方面的数据,通过网上视频学习和自己实践,有些不成文的实践就零碎的记录在此吧. 系统也可安装CentOS DVD版. 1.先进入配置文件,并查看基本情况,如下: 2.用vi编辑器打开物理网卡 ...

  9. 第6章 字符串（上）——C风格字符串

    6.1 C-strings(C 风格字符串) C风格字符串: 字符数组是元素为字符型的数组,字符串是以空字符'\0' 作为数组最后一个元素的字符数组. 如果指定了数组的大小,而字符串的长度又小于数组大 ...

  10. 深度学习与计算机视觉教程(15) | 视觉模型可视化与可解释性（CV通关指南·完结）

    作者:韩信子@ShowMeAI 教程地址:http://www.showmeai.tech/tutorials/37 本文地址:http://www.showmeai.tech/article-det ...