首页 > 其他分享 >Comet 和 WebSocket

Comet 和 WebSocket

时间:2023-07-18 21:05:13浏览次数:46  
标签:浏览器 服务器端 轮询 WebSocket iframe Comet 服务器 客户端

众所周知,HTTP 协议,是无状态的,所以不能保持持续的链接。数据交换是通过客户端提交一个 Request 到服务器端,然后服务器端返回一个 Response 到客户端来实现的。

 

轮询(polling)

         一般情况下,通过浏览器访问一个网页,需要浏览器发送一个 HTTP Request,服务器接收到浏览器的请求,返回相应的消息。在一些数据更新比较频繁的应用里,页面的数据要想得到最新的结果需要重新刷新页面,但这样会产生大量的冗余数据在服务器和客户端传输。

        可以看到,不论是javascript定时轮询,还是采用html的 http-equiv="refresh" 定时刷新页面,只要采用polling的方式,效率都是十分低下的,一方面,服务器端不是总有数据更新,所以每次问询不一定都有更新,效率低下;另一方面,当发起请求的客户端数量增加,服务器端的接受的请求数量会大量上升,无形中就增加了服务器的压力。

 

Comet

        Comet是一种用于web的技术,能使服务器能实时地将更新的信息传送到客户端,而无须客户端发出请求,目前有两种实现方式,长轮询和iframe流。

         Comet这个单词,很多地方都会说到,它是“彗星”的意思,顾名思义,彗星有个长长的尾巴,以此来说明客户端发起的请求是长连接的。即用户发起请求后就挂起,等待服务器返回数据,在此期间不会断开连接。流方式和长轮询方式的区别就是:对于流方式,客户端发起连接就不会断开连接,而是由服务器端进行控制。当服务器端有更新时,刷新数据,客户端进行更新;而对于长轮询,当服务器端有更新返回,客户端先断开连接,进行处理,然后重新发起连接。

 

长轮询(long-polling)

         浏览器发出XMLHttpRequest 请求,服务器端接收到请求后,会阻塞请求直到有数据或者超时才返回,浏览器JS在处理请求返回信息(超时或有效数据)后再次发出请求,重新建立连接。在此期间服务器端可能已经有新的数据到达,服务器会选择把数据保存,直到重新建立连接,浏览器会把所有数据一次性取回。

Comet 和 WebSocket_客户端

 

iframe流

         iframe流方式是在页面中插入一个隐藏的iframe,利用其src属性在服务器和客户端之间创建一条长链接,服务器向iframe传输数据(通常是HTML,内有负责插入信息的javascript),来实时更新页面。
         iframe流方式的优点是浏览器兼容好,Google公司在一些产品中使用了iframe流,如Google Talk。

         Iframe是html标记,这个标记的src属性会保持对指定服务器的长连接请求,服务器端则可以不停地返回数据,相对于第一种方式,这种方式跟传统的服务器推则更接近。

        在第一种方式中,浏览器在收到数据后会直接调用JS回调函数,但是这种方式该如何响应数据呢?可以通过在返回数据中嵌入JS脚本的方式,如“<script type="text/javascript">js_func(“data from server ”)</script>”,服务器端将返回的数据作为回调函数的参数,浏览器在收到数据后就会执行这段JS脚本。

Comet 和 WebSocket_服务器端_02

 

WebSocket

        与http协议不同的请求/响应模式不同,Websocket在建立连接之前有一个Handshake(Opening Handshake)过程,在关闭连接前也有一个Handshake(Closing Handshake)过程,建立连接之后,双方即可双向通信。

Comet 和 WebSocket_客户端_03

 

Comet 和 WebSocket_客户端_04

上面图来自:https://cwiki.apache.org/TUSCANYWIKI/develop-websocket-binding-for-apache-tuscany.html

http://www.scriptol.com/ajax/xhr.php

参考资料:

客户端与服务器持续同步解析(轮询,comet,WebSocket)
 

维基百科 WebSocket
http://zh.wikipedia.org/wiki/WebSocket

在Android系统上开发基于WebSocket的聊天室应用
http://blog.qhm123.com/2012/05/20/android-websocket-chat.html 

Ajax、Comet与Websocket
 

Comet (web技术)
http://zh.wikipedia.org/wiki/Comet_(web%E6%8A%80%E6%9C%AF) 

应用 HTML5 的 WebSocket 实现 BiDirection 数据交换
http://www.ibm.com/developerworks/cn/web/1112_weijf_websocket/index.html?ca=drs- 

 

标签:浏览器,服务器端,轮询,WebSocket,iframe,Comet,服务器,客户端
From: https://blog.51cto.com/u_15588078/6768107

相关文章

  • WebSocket搭建一个简单的聊天室
    这个例子比较简单:只有一个聊天室,大家进入的都是同一个聊天室。 没有用户登录,用户登录直接根据id给出匿名用户。程序截图,UI我直接用的 https://github.com/Niessy/websocket-golang-chat这里给的例子的Html代码。                  服务器端Golang代码:package......
  • Go语言用WebSocket的简单例子
    Go语言标准包里面没有提供对WebSocket的支持,但是在由官方维护的go.net子包中有对这个的支持,需要独立下载, Gowebsocketpackage下载地址:http://code.google.com/p/go.net/websocket。Goget命令下载:gogetcode.google.com/p/go.net/websocket Go实现的WebSocket的文档:http://......
  • Nginx 代理 WebSocket 、TCP协议
    Nginx代理WebSocket什么是WebSocketWebSocket是一种网络传输协议,可在单个TCP连接上进行全双工通信,位于OSI模型的应用层。WebSocket中的握手和HTTP中的握手过程兼容,且可以使用HTTP中的Upgrade协议头将连接从HTTP升级到WebSocket。代理结构WebSocket可以工作在......
  • nginx 中根据 $http_upgrade 变量将 HTTP 连接升级为 WebSocket 连接
    配置“$connection_upgrade”变量连接升级通常与WebSockets结合使用。在nginx中,我们可以根据$http_upgrade变量将HTTP连接升级为WebSocket连接。我们可以使用map块在nginx中定义连接和http升级之间的依赖关系:vimnginx.confmap$http_upgrade$connection_......
  • pytest + yaml 框架 -52.支持 websocket 协议
    前言v1.4.2版本支持websocket协议python操作websocket协议环境准备pip3installwebsocket-clientpip3installwebsockets基本代码示例fromwebsocketimportcreate_connectionimportjsonurl='ws://localhost:8081/ws'ws=create_connection(url,timeout......
  • http、socket以及websocket的区别(websocket使用举例)
    一、http、socket、websocket介绍1、HTTP(HypertextTransferProtocol):HTTP是一种应用层协议,用于在客户端和服务器之间传输超文本数据。它是基于请求-响应模型的,通过发送HTTP请求从服务器获取数据,并通过HTTP响应返回数据给客户端。HTTP是无状态的,每个请求和响应都是独立的,不保留状......
  • Java 实现 WebSocket 集群转发:使用 Redis 发布订阅
    场景浏览器客户端client1连接到了服务端A的websocket节点。浏览器客户端通过弹性负载均衡,把请求分配到了服务端B,服务端B上没有client1的连接。需求服务端B把消息转发到服务端A上,找到客户端client1的连接,发送出去。画示意图......
  • python通过Websocket与html主动通讯
    python通过Websocket与html主动通讯导语:在Web开发中,实现实时通信是一项常见的需求。本文将介绍如何使用Python和WebSocket技术实现与HTML页面的实时通信,以显示当前的实时时间。1.WebSocket简介WebSocket是一种全双工通信协议,允许在客户端和服务器之间建立持久连接,实现实时数据......
  • VUE WebSocket连接成功后,立即发送一个token
    ws=newWebSocket(ws://${location.host}/xxx)ws.onopen=()=>{ws.send(JSON.stringify({headers:{Authorization:Bearer${token}}}));isConnected.value=true;}查看方法:在消息数据里(不是标头里)......
  • Vue3 webSocket收到消息改变响应式全局对象从而实时改变界面
    需求在main.js中创建一个 响应式全局对象。通过WebSocket收到消息改变这个全局对象时,子组件应同步响应。效果:这几个标签框绑定的全局对象json main.js定义 响应式全局对象//全局对象constglobalData=reactive({extTelMonitorData:[{title:......