学习总结2017-11

前言

记录2017-11的学习总结

2017-11-05

TCP协议的长连接和短连接

当网络通信时采用TCP协议时,在真正的读写操作之前,server与client之间必须建立一个连接,当读写操作完成后,双方不再需要这个连接时它们可以释放这个连接,连接的建立是需要三次握手的,而释放则需要四次挥手,所以说每个连接的建立都是需要资源消耗和时间消耗的,所以就有了长连接的避免频繁的建立和释放资源

长连接

长连接:
所谓长连接,指在一个TCP连接上可以连续发送多个数据包,在TCP连接保持期间,如果没有数据包发送,需要双方发检测包以维持此连接,一般需要自己做在线维持(不发生RST包和四次挥手)。
步骤:

连接→数据传输→保持连接(心跳)→数据传输→保持连接(心跳)→……→关闭连接(一个TCP连接通道多个读写通信);
这就要求长连接在没有数据通信时,定时发送数据包(心跳),以维持连接状态;

TCP保活功能,保活功能主要为服务器应用提供,服务器应用希望知道客户主机是否崩溃,从而可以代表客户使用资源。如果客户已经消失,使得服务器上保留一个半开放的连接,而服务器又在等待来自客户端的数据,则服务器将应远等待客户端的数据,保活功能就是试图在服务器端检测到这种半开放的连接。

如果一个给定的连接在两小时内没有任何的动作,则服务器就向客户发一个探测报文段,客户主机必须处于以下4个状态之一:

  • 客户主机依然正常运行,并从服务器可达。客户的TCP响应正常,而服务器也知道对方是正常的,服务器在两小时后将保活定时器复位。
  • 客户主机已经崩溃,并且关闭或者正在重新启动。在任何一种情况下,客户的TCP都没有响应。服务端将不能收到对探测的响应,并在75秒后超时。服务器总共发送10个这样的探测 ,每个间隔75秒。如果服务器没有收到一个响应,它就认为客户主机已经关闭并终止连接。
  • 客户主机崩溃并已经重新启动。服务器将收到一个对其保活探测的响应,这个响应是一个复位,使得服务器终止这个连接。
  • 客户机正常运行,但是服务器不可达,这种情况与2类似,TCP能发现的就是没有收到探查的响应。

短连接

短连接:

短连接是指通信双方有数据交互时,就建立一个TCP连接,数据发送完成后,则断开此TCP连接(管理起来比较简单,存在的连接都是有用的连接,不需要额外的控制手段);
步骤:

连接→数据传输→关闭连接;

HTTP长连接

在HTTP/1.0中,默认使用的是短连接。也就是说,浏览器和服务器每进行一次HTTP操作,就建立一次连接,但任务结束就中断连接。如果客户端浏览器访问的某个HTML或其他类型的 Web页中包含有其他的Web资源,如JavaScript文件、图像文件、CSS文件等;当浏览器每遇到这样一个Web资源,就会建立一个HTTP会话。

但从 HTTP/1.1起,默认使用长连接,用以保持连接特性。使用长连接的HTTP协议,会在响应头有加入这行代码:

1
Connection:keep-alive

在使用长连接的情况下,当一个网页打开完成后,客户端和服务器之间用于传输HTTP数据的 TCP连接不会关闭,如果客户端再次访问这个服务器上的网页,会继续使用这一条已经建立的连接。Keep-Alive不会永久保持连接,它有一个保持时间,可以在不同的服务器软件(如Apache)中设定这个时间。实现长连接要客户端和服务端都支持长连接。

HTTP协议的长连接和短连接,实质上是TCP协议的长连接和短连接。

2017-11-07

跨域问题解决办法

本文解决跨域中的 get、post、data、cookie 等这些问题。

本文只会说 get 请求和 post 请求,读者请把 post 请求理解成除 get 请求外的所有其他请求方式。

JSONP

jsonp 的原理很简单,利用了【前端请求静态资源的时候不存在跨域问题】这个思路。

但是 只支持 get,只支持 get,只支持 get。

注意一点,既然这个方法叫 jsonp,后端数据一定要使用 json 数据,不能随便的搞个字符串什么的,不然你会觉得结果莫名其妙的。

前端 jQuery 写法

1
2
3
4
5
6
7
8
$.ajax({
type: "get",
url: baseUrl + "/jsonp/get",
dataType: "jsonp",
success: function(response) {
$("#response").val(JSON.stringify(response));
}
});

dataType: “jsonp”。除了这个,其他配置和普通的请求是一样的。

后端 SpringMVC 配置

如果你也使用 SpringMVC,那么配置一个 jsonp 的 Advice 就可以了,这样我们写的每一个 Controller 方法就完全不需要考虑客户端到底是不是 jsonp 请求了,Spring 会自动做相应的处理。

1
2
3
4
5
6
7
@ControllerAdvice
public class JsonpAdvice extends AbstractJsonpResponseBodyAdvice {
public JsonpAdvice(){
// 这样如果请求中带 callback 参数,Spring 就知道这个是 jsonp 的请求了
super("callback");
}
}

以上写法要求 SpringMVC 版本不低于 3.2,低于 3.2 的我只能说,你们该升级了。

后端非 SpringMVC 配置

以前刚工作的时候,Struts2 还红遍天,几年的光景,SpringMVC 就基本统治下来了国内市场。

偷懒一下,这里贴个伪代码吧,在我们的方法返回前端之前调一下 wrap 方法:

1
2
3
4
5
6
7
8
public Object wrap(HttpServletRequest request){
String callback = request.getParameter("callback");
if(StringUtils.isBlank(callback)){
return result;
} else {
return callback+"("+JSON.toJSONString(result)+")";
}
}

CORS

Cross-Origin Resource Sharing

毕竟 jsonp 只支持 get 请求,肯定不能满足我们的所有的请求需要,所以才需要搬出 CORS。

国内的 web 开发者还是比较苦逼的,用户死不升级浏览器,老板还死要开发者做兼容。

CORS 支持以下浏览器,目前来看,浏览器的问题已经越来越不重要了,连淘宝都不支持 IE7 了~~~

  • Chrome 3+
  • Firefox 3.5+
  • Opera 12+
  • Safari 4+
  • Internet Explorer 8+

    前端 jQuery 写法

直接看代码吧:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$.ajax({
type: "POST",
url: baseUrl + "/jsonp/post",
dataType: 'json',
crossDomain: true,
xhrFields: {
withCredentials: true
},
data: {
name: "name_from_frontend"
},
success: function (response) {
console.log(response)// 返回的 json 数据
$("#response").val(JSON.stringify(response));
}
});

dataType: “json”,这里是 json,不是 jsonp,不是 jsonp,不是 jsonp。
crossDomain: true,这里代表使用跨域请求
xhrFields: {withCredentials: true},这样配置就可以把 cookie 带过去了,不然我们连 session 都没法维护,很多人都栽在这里。当然,如果你没有这个需求,也就不需要配置这个了。

后端 SpringMVC 配置

对于大部分的 web 项目,一般都会有 mvc 相关的配置类,此类继承自 WebMvcConfigurerAdapter。如果你也使用 SpringMVC 4.2 以上的版本的话,直接像下面这样添加这个方法就可以了:

1
2
3
4
5
6
7
8
@Configuration
public class WebConfig extends WebMvcConfigurerAdapter {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**/*").allowedOrigins("*");
}
}

如果很不幸你的项目中 SpringMVC 版本低于 4.2,那么需要「曲线救国」一下:

1
2
3
4
5
6
7
8
9
public class CrossDomainFilter extends OncePerRequestFilter {
@Override
protected void doFilterInternal(HttpServletRequest request, HttpServletResponse response, FilterChain filterChain) throws ServletException, IOException {
response.addHeader("Access-Control-Allow-Origin", "*");
response.addHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE");
response.addHeader("Access-Control-Allow-Headers", "Content-Type");
filterChain.doFilter(request, response);
}
}

在 web.xml 中配置下 filter:

1
2
3
4
5
6
7
8
<filter>
<filter-name>CrossDomainFilter</filter-name>
<filter-class>com.zhongan.venus.web.filters.CrossDomainFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>CrossDomainFilter</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>

有很多项目用 shiro 的,也可以通过配置 shiro 过滤器的方式,这里就不介绍了。

注意了,我说的是很笼统的配置,对于大部分项目是可以这么笼统地配置的。文中类似 “*” 这种配置读者应该都能知道怎么配。

前端非 jQuery 写法

jQuery 一招鲜吃遍天的日子是彻底不在了,这里就说说如果不使用 jQuery 的话,怎么解决 post 跨域的问题。

来一段原生 js 介绍下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function createCORSRequest(method, url) {
var xhr = new XMLHttpRequest();
if ("withCredentials" in xhr) {
// 如果有 withCredentials 这个属性,那么可以肯定是 XMLHTTPRequest2 对象。看第三个参数
xhr.open(method, url, true);
} else if (typeof XDomainRequest != "undefined") {
// 此对象是 IE 用来跨域请求的
xhr = new XDomainRequest();
xhr.open(method, url);
} else {
// 如果是这样,很不幸,浏览器不支持 CORS
xhr = null;
}
return xhr;
}
var xhr = createCORSRequest('GET', url);
if (!xhr) {
throw new Error('CORS not supported');
}

其中,Chrome,Firefox,Opera,Safari 这些「程序员友好」的浏览器使用的是 XMLHTTPRequest2 对象。IE 使用的是 XDomainRequest。