Ajax轮询,Ajax长轮询和websocket(详细使用)

最新推荐文章于 2024-07-18 16:15:02 发布

张某某啊哈

最新推荐文章于 2024-07-18 16:15:02 发布

阅读量353

点赞数 1

分类专栏：程序人生进阶之路前端资料文章标签： Ajax轮询 Ajax长轮询和websocket(详细使用) Ajax长轮询和websocket(详细使用) websocket

本文链接：https://blog.csdn.net/qq_36908872/article/details/102706623

版权

程序人生进阶之路同时被 2 个专栏收录

97 篇文章 2 订阅

订阅专栏

前端资料

28 篇文章 0 订阅

订阅专栏

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）连接上下文补充：连接上下文，如限定客户端和服务器平台的所有头信息，认证属性，负载描述等；看个荔枝：

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


<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,仅供参考,希望大家和我一起学习,有想法提出来,一起讨论。

张某某啊哈

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Ajax轮询,Ajax长轮询和websocket(详细使用)

1.三者介绍【1】http协议介绍1）介绍：http协议是请求/响应范式的，每个http 响应都对应一个 http 请求，http协议是无状态的，多个http请求之间是没有关系的；2）http协议的被动性：在标准的HTTP请求响应语义中，浏览器发起请求，服务器发送一个响应，这意味着在浏览器发起新请求前，服务器不能发送新信息给客户端浏览器；【2】http 长轮询和短轮询【2.1】h...
复制链接

扫一扫

专栏目录