• WebSocket、event-source、AJAX轮询 等实现保持前后端实时通信的方式


    实现保持前后端实时通信的方式

    • WebSocket: IE10以上才支持,Chrome16, FireFox11,Safari7以及Opera12以上完全支持,移动端形势大
    • event-source: IE完全不支持(注意是任何版本都不支持),Edge76,Chrome6,Firefox6,Safari5和Opera以上支持, 移动端形势大好
    • AJAX轮询: 用于兼容低版本的浏览器
    • 永久帧( forever iframe)可用于兼容低版本的浏览器
    • flash socket 可用于兼容低版本的浏览器

    这几种方式的优缺点

    1.WebSocket

    • 优点:WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议,可从HTTP升级而来,浏览器和服务器只需要一次握手,就可以进行持续的,双向的数据传输,因此能显著节约资源和带宽
    • 缺点:1. 兼容性问题:不支持较低版本的IE浏览器(IE9及以下)2.不支持断线重连,需要手写心跳连接的逻辑 3.通信机制相对复杂

    2. server-sent-event(event-source)

    • 优点:(1)只需一次请求,便可以stream的方式多次传送数据,节约资源和带宽 (2)相对WebSocket来说简单易用 (3)内置断线重连功能(retry)
    • 缺点: (1)是单向的,只支持服务端->客户端的数据传送,客户端到服务端的通信仍然依靠AJAX,没有”一家人整整齐齐“的感觉(2)兼容性令人担忧,IE浏览器完全不支持

    3. AJAX轮询

    • 优点:兼容性良好,对标低版本IE
    • 缺点:请求中有大半是无用的请求,浪费资源

    4.Flash Socket

    • 缺点:(1)浏览器开启时flash需要用户确认,(2)加载时间长,用户体验较差 (3)大多数移动端浏览器不支持flash,为重灾区
    • 优点: 兼容低版本浏览器

    5. 永久帧( forever iframe)

    • 缺点: iframe会产生进度条一直存在的问题,用户体验差
    • 优点:兼容低版本IE浏览器

    综合兼容性和用户体验的问题,我在项目中选用了WebSocket ->server-sent-event -> AJAX轮询这三种方式做从上到下的兼容

    (以上来源网络,仅供学习参考)

  • 相关阅读:
    Jvm上如何运行其他语言?JSR223规范最详细讲解
    1999-2018年地级市不同所有制成分工业总产值数据
    ATF源码篇(二):docs文件夹
    Java基于springboot+vue药店实名制买药系统 前后端分离
    聊聊Jasypt的StandardPBEByteEncryptor
    pytorch编程用法记录
    TextCNN 实现股票时间序列预测(TensorFlow2版)
    NewStarCTF2023week2-include 0。0
    Burp Suite Extension Development Guide
    【前端】较大规模数据的网络读取与图表展示
  • 原文地址:https://blog.csdn.net/weixin_70437515/article/details/125467032