前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >ajax 长轮询_js 轮询

ajax 长轮询_js 轮询

作者头像
全栈程序员站长
发布2022-11-04 15:05:18
3.9K0
发布2022-11-04 15:05:18
举报
文章被收录于专栏:全栈程序员必看

1.三者介绍

【1】http协议介绍

1)介绍:http协议是请求/响应范式的,每个http 响应都对应一个 http 请求,http协议是无状态的,多个http请求之间是没有关系的;

2)http协议的被动性:在标准的HTTP请求响应语义中,浏览器发起请求,服务器发送一个响应,这意味着在浏览器发起新请求前,服务器不能发送新信息给客户端浏览器;

【2】http 长轮询 和 短轮询

【2.1】http 长轮询

1)介绍:http 长轮询是server 收到请求后如果有数据,立刻响应请求;如果没有数据 就会 停留 一段时间,这段时间内,如果 server 请求的数据到达(如查询数据库或数据的逻辑处理完成),就会立刻响应;如果这段时间过后,还没有数据到达,则以空数据的形式响应http请求;若浏览器收到的数据为空,会再次发送同样的http请求到server;

2)http 长轮询 的缺点:server 没有数据到达时,http连接会停留一段时间,这会造成服务器资源浪费;

3)看个荔枝:假设有 1000个人停留在某个客户端页面,等待server端的数据更新,那就很有可能服务器这边挂着1000个线程,在不停检测数据是否发生变化,这依然是有问题的;

【2.2】http 短轮询

1)介绍:http 短轮询是 server 收到请求 不管是否有数据到达都直接响应http 请求;如果浏览器收到的数据为空,则隔一段时间,浏览器又会发送相同的http请求到server 以获取数据响应;

2) http 短轮询的缺点:消息交互的实时性较低(server端到浏览器端的数据反馈效率低);

【2.3】http 长轮询 和 短轮询的异同

1)相同点:当server 的数据不可达时,基于http长轮询和短轮询 的http请求,都会 停留一段时间;

2)不同点:http长轮询是在服务器端的停留,而http 短轮询是在 浏览器端的停留;

3)性能总结:从这里可以看出,不管是长轮询还是短轮询,都不太适用于客户端数量太多的情况,因为每个服务器所能承载的TCP连接数是有上限的,这种轮询很容易把连接数顶满;

【3】WebSocket

1)介绍:WebSocket 是 html5 规范发布的新协议,和 http协议完全是两个不同的概念,或者说基本没关系;WebSocket 协议 和 http协议的唯一联系点在于,WebSocket 协议为了兼容现有浏览器的握手规范而采用了 http协议中的握手规范 以建立WebSocket连接;

2)WebSocket协议:其客户端与服务器建立的是 持久连接;

3)WebSocket 解决了 HTTP 的几个难题

3.1)难题1(http协议的被动性):采用 WebSocket 协议后,服务器可以主动推送消息给客户端;而不需要客户端以(长/短)轮询的方式发起http请求到server以获取数据更新反馈;这样一来,客户端只需要经过一次HTTP请求,就可以做到源源不断的信息传送了(在程序设计中,这种设计叫做回调,即:server 端有信息了再来通知client 端,而不是 client 端 每次都傻乎乎地跑去轮询server端 是否有消息更新); 3.2)难题2(http协议的无状态性/健忘性):短轮询是每次http请求前都要建立连接,而长轮询是相邻几次请求前都要建立连接;http请求响应完成后,服务器就会断开连接,且把连接的信息全都忘记了;所以每次建立连接都要重新传输连接上下文(下面有补充),将 client 端的连接上下文来告诉server 端;而 WebSockct只需要一次HTTP 握手,整个通讯过程是建立在一次连接(状态)中的,server 端会一直推送消息更新反馈到客户端,直到客户端关闭请求,这样就无需 客户端为发送消息而建立不必要的 tcp 连接 和 为了建立tcp连接而发送不必要的冗余的连接上下文消息;

4)连接上下文补充: 连接上下文,如限定客户端和服务器平台的所有头信息,认证属性,负载描述等; 看个荔枝:

ajax 长轮询_js 轮询
ajax 长轮询_js 轮询

2.三者之间比较

传统(短)轮询

长轮询

WebSocket

浏览器支持

几乎所有现代浏览器

几乎所有现代浏览器

IE 10+ Edge Firefox 4+ Chrome 4+ Safari 5+ Opera 11.5+

服务器负载

较少的CPU资源,较多的内存资源和带宽资源

与传统轮询相似,但是占用带宽较少

无需循环等待(长轮询),CPU和内存资源不以客户端数量衡量,而是以客户端事件数衡量。三种方式里性能最佳。

客户端负载

占用较多的内存资源与请求数。

与传统轮询相似。

同Server-Sent Event。

延迟

非实时,延迟取决于请求间隔。

同传统轮询。

实时。

实现复杂度

非常简单。

需要服务器配合,客户端实现非常简单。

需要Socket程序实现和额外端口,客户端实现简单。

3.三者总结:

以上的介绍和对比来自于:http://blog.csdn.net/pacosonswjtu/article/details/52035252

个人觉得大概的可以理解为:

1.轮询就是定时发送请求,响应请求

2.长轮询,定时就是发送请求,响应请求,客户端接收到响应后,继续发送请求,从而达到不间断.

3.socket就是发出请求,标识这个请求为长连接,服务端知道后,以后就不需要客户端发送请求,服务端就可以向客户端推送数据.

4.在SSM框架中使用springSocket(后续扩展实际项目如何使用)

首先要知道流程是如何走的,客户端像服务端发出请求,并标识这个请求是长连接,服务端接收到后,处理业务,并将数据传递给客户端(当然也可以不传递),这样每次服务端都可以像客户端推送数据.,大致的流程就是这样 pom.xml <!--socket使用的jar--> <dependency> <groupId>javax</groupId> <artifactId>javaee-api</artifactId> <version>7.0</version> <scope>provided</scope> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-websocket</artifactId> <version>4.1.3.RELEASE</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-messaging</artifactId> <version>4.1.3.RELEASE</version> </dependency> 自定义config类 package com.bile.socket; import org.springframework.stereotype.Component; import org.springframework.web.servlet.config.annotation.EnableWebMvc; import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter; import org.springframework.web.socket.config.annotation.EnableWebSocket; import org.springframework.web.socket.config.annotation.WebSocketConfigurer; import org.springframework.web.socket.config.annotation.WebSocketHandlerRegistry; import javax.annotation.Resource; /** *Title: MyWebSocketConfig<br/> *Description: 接口地址实例层 * 服务一启动就调用 */ @Component @EnableWebMvc @EnableWebSocket public class MyWebSocketConfig extends WebMvcConfigurerAdapter implements WebSocketConfigurer{ @Resource MyWebSocketHandler handler; @Resource UserWebSocketHandler handler2; @Resource NewStatisticsWebSocketHandler handler3; @Override public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) { System.out.println("初始化进来-----"); // TODO Auto-generated method stub registry.addHandler(handler, "/wsMy").addInterceptors(new HandshakeInterceptor()); registry.addHandler(handler, "/wsMy/sockjs").addInterceptors(new HandshakeInterceptor()).withSockJS(); registry.addHandler(handler2, "/wsUser").addInterceptors(new HandshakeInterceptor()); registry.addHandler(handler2, "/wsUser/sockjs").addInterceptors(new HandshakeInterceptor()).withSockJS(); registry.addHandler(handler3, "/wsNewStatistics").addInterceptors(new HandshakeInterceptor()); registry.addHandler(handler3, "/wsNewStatistics/sockjs").addInterceptors(new HandshakeInterceptor()); } } 自定义hand package com.bile.socket; import org.springframework.http.server.ServerHttpRequest; import org.springframework.http.server.ServerHttpResponse; import org.springframework.http.server.ServletServerHttpRequest; import org.springframework.web.socket.WebSocketHandler; import org.springframework.web.socket.server.support.HttpSessionHandshakeInterceptor; import java.util.Map; /** *Title: HandshakeInterceptor<br/> *Description: 会话标记层 * web断先进入当前方法--->再进入MyWebSocketHandler去缓存当前session的客户端 */ public class HandshakeInterceptor extends HttpSessionHandshakeInterceptor{ @Override public boolean beforeHandshake(ServerHttpRequest request, ServerHttpResponse response, WebSocketHandler wsHandler, Map<String, Object> attributes) throws Exception { System.out.println("第2步进来:HandshakeInterceptor->beforeHandshake"); // TODO Auto-generated method stub String uid = ((ServletServerHttpRequest) request).getServletRequest().getParameter("uid"); // 标记用户 if(uid!=null){ attributes.put("uid", uid); }else{ return false; } return super.beforeHandshake(request, response, wsHandler, attributes); } @Override public void afterHandshake(ServerHttpRequest request, ServerHttpResponse response, WebSocketHandler wsHandler, Exception ex) { System.out.println("第3步进来:HandshakeInterceptor->afterHandshake"); super.afterHandshake(request, response, wsHandler, ex); } } 自定义socket import org.springframework.stereotype.Component; import org.springframework.web.socket.*; import java.io.IOException; import java.util.HashMap; import java.util.Iterator; import java.util.Map; import java.util.Map.Entry; /** *Title: MyWebSocketHandler<br/> *Description: 会话连接层 */ @Component public class MyWebSocketHandler implements WebSocketHandler{ public static final Map<String, WebSocketSession> userSocketSessionMap; static { userSocketSessionMap = new HashMap<String, WebSocketSession>(); } /** * 连接成功时候,会触发页面上onopen方法 */ @Override public void afterConnectionEstablished(WebSocketSession session) throws Exception { // TODO Auto-generated method stub //String jspCode = (String) session.getAttributes().get("SID"); if (userSocketSessionMap.get(session.getId()) == null) { userSocketSessionMap.put(session.getId(), session); } System.out.println("第4步进来::Socket会话连接成功::Key="+session.getId()); } //暂时没用 /** * js调用websocket.send时候,会调用该方法 */ @Override public void handleMessage(WebSocketSession session, WebSocketMessage<?> message) throws Exception { } /** * 消息传输错误处理 */ //暂时没用 @Override public void handleTransportError(WebSocketSession session, Throwable exception) throws Exception { // TODO Auto-generated method stub System.out.println("第1步:开始移除用户" ); if (session.isOpen()) { session.close(); } Iterator<Entry<String, WebSocketSession>> it = userSocketSessionMap.entrySet().iterator(); // 移除Socket会话 while (it.hasNext()) { Entry<String, WebSocketSession> entry = it.next(); //if (entry.getValue().getId().equals(session.getId())) { userSocketSessionMap.remove(entry.getKey()); System.out.println("--------->>>>用户Key::" + entry.getKey()); break; //} } } /** * 关闭连接时触发 */ @Override public void afterConnectionClosed(WebSocketSession session, CloseStatus closeStatus) throws Exception { System.out.println("Websocket:" + session.getId() + "已经关闭"); Iterator<Entry<String, WebSocketSession>> it = userSocketSessionMap.entrySet().iterator(); // 移除Socket会话 System.out.println("=======关闭连接====="); while (it.hasNext()) { Entry<String, WebSocketSession> entry = it.next(); //if (entry.getValue().getId().equals(session.getId())) { userSocketSessionMap.remove(entry.getKey()); System.out.println("Socket会话已经移除:用户ID" + entry.getKey()); break; //} } } @Override public boolean supportsPartialMessages() { // TODO Auto-generated method stub return false; } /** * 群发 * @Title: broadcast * @Description: TODO * @param: @param message * @param: @throws IOException * @return: void * @throws */ public void broadcast(final TextMessage message) throws IOException { Iterator<Entry<String, WebSocketSession>> it = userSocketSessionMap.entrySet().iterator(); VoThread thread=null; // 多线程群发 while (it.hasNext()) { final Entry<String, WebSocketSession> entry = it.next(); if (entry.getValue().isOpen()) { thread=new VoThread(entry.getValue(),message); new Thread(thread).start(); //注意这里不能使用匿名内部类,不然会出现问题 /* new Thread(new Runnable() { public void run() { try { if (entry.getValue().isOpen()) { entry.getValue().sendMessage(message); } } catch (IOException e) { e.printStackTrace(); } } }).start();*/ } } } /** * 给某个用户发送消息 * * @param userName * @param message * @throws IOException */ public void sendMessageToUser(String uid, TextMessage message) throws IOException { WebSocketSession session = userSocketSessionMap.get(uid); System.out.println("======给"+uid+"用户发送消息======"); if (session != null && session.isOpen()) { session.sendMessage(message); } } } 页面代码: <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>socket</title> <script type="text/javascript" src="http://cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script> <script type="text/javascript" src="http://cdn.bootcss.com/sockjs-client/1.1.1/sockjs.js"></script> <script type="text/javascript"> var sock=null; if (window['WebSocket']) { sock= new WebSocket('ws://' + window.location.host+'/bile.api/wsMy?uid=1'); } sock.onopen = function() { /* 连接成功时 */ //页面加载完毕,出发onopen方法,这时候可以选择发送参数,也可以不发送 sock.send(JSON.stringify({to:'1my'})); }; sock.onmessage = function(e) {/* 服务端推送数据过来 */ //在后台socket中像客户端发送数据时,自动调用这方法拿到数据 $('#data').text(e.data); }; sock.onclose = function() { alert('Closing'); }; </script> </head> <body> <h1 id="data"></h1> </body> </html> 5.后语 以上只是我自己写的demo,仅供参考,希望大家和我一起学习,有想法提出来,一起讨论,我也是最近才学socket.后续我集成到实际项目中使用后,会完善此贴!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/182140.html原文链接:https://javaforall.cn

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022年10月14日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1.三者介绍
  • 2.三者之间比较
  • 3.三者总结:
  • 4.在SSM框架中使用springSocket(后续扩展实际项目如何使用)
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档