基于HTTP的长连接,是一种通过长轮询方式实现"服务器推"的技术,它弥补了HTTP简单的请求应答模式的不足,极大地增强了程序的实时性和交互性。
一、什么是长连接、长轮询?
用通俗易懂的话来说,就是客户端不停的向服务器发送请求以获取最新的数据信息。这里的“不停”其实是有停止的,只是我们人眼无法分辨是否停止,它只是一种快速的停下然后又立即开始连接而已。
轮询:客户端定时向服务器发送Ajax请求,服务器接到请求后马上返回响应信息并关闭连接。
优点:后端程序编写比较容易。
缺点:请求中有大半是无用,浪费带宽和服务器资源。
实例:适于小型应用。
特点是:一个完整的请求不停的发送,就像一个人打电话只要对方无回复就挂断进行新第一次拨号,拨打次数很频繁
长连接:在页面里嵌入一个隐蔵iframe,将这个隐蔵iframe的src属性设为对一个长连接的请求或是采用xhr请求,服务器端就能源源不断地往客户端输入数据。
优点:消息即时到达,不发无用请求;管理起来也相对方便。
缺点:服务器维护一个长连接会增加开销。
实例:Gmail聊天
特点是:开启一个链接后不设置超时,不主动挂断,即便没有消息也连接着
长轮询:客户端向服务器发送Ajax请求,服务器接到请求后hold住连接,直到有新消息才返回响应信息并关闭连接,客户端处理完响应信息后再向服务器发送新的请求。
优点:在无消息的情况下不会频繁的请求,耗费资源小。
缺点:服务器hold连接会消耗资源,返回数据顺序无保证,难于管理维护。
实例:WebQQ、Hi网页版、Facebook IM。
特点是:长连接的基础上设置超时,无论有消息只要到达了超时时间都会挂断重新建立链接
Flash Socket:在页面中内嵌入一个使用了Socket类的 Flash 程序JavaScript通过调用此Flash程序提供的Socket接口与服务器端的Socket接口进行通信,JavaScript在收到服务器端传送的信息后控制页面的显示。
优点:实现真正的即时通信,而不是伪即时。
缺点:客户端必须安装Flash插件;非HTTP协议,无法自动穿越防火墙。
实例:网络互动游戏。
特点是:进行真正的socket通讯,但是基本是自定义协议或者非http协议,很容易被防火墙拦截
长连接、长轮询的应用场景
长连接、长轮询一般应用与WebIM、ChatRoom和一些需要及时交互的网站应用中。其真实案例有:WebQQ、Hi网页版、Facebook IM等。
代码实现
html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript"
src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"/></script>
<script type="text/javascript">
$(function () {
(function longPolling() {
$.ajax({
url: "http://localhost:20035/lp",
data: {"timed": new Date().getTime()},
dataType: "text",
timeout: 5000,
error: function (XMLHttpRequest, textStatus, errorThrown) {
$("#state").append("[state: " + textStatus + ", error: " + errorThrown
+ " ]<br/>");
if (textStatus == "timeout") { // 请求超时
longPolling(); // 递归调用
// 其他错误,如网络错误等
} else {
longPolling();
}
},
success: function (data, textStatus) {
$("#state").append("[state: " + textStatus + ", data: { " + data + "}
]<br/>");
if (textStatus == "success") { // 请求成功
longPolling();
}
}
});
})();
});
</script>
</head>
<body>
<span id="state"></span>
</dody>
</html>
##后端
public static String msg= "";
@RequestMapping("/lp")
public void longPolling(long timed, HttpServletResponse response) throws Exception {
PrintWriter writer = response.getWriter();
Random rand = new Random();
// 死循环 查询有无数据变化
while (true) {
Thread.sleep(300); // 休眠300毫秒,模拟处理业务等
int i = rand.nextInt(100); // 产生一个0-100之间的随机数
if (i > 20 && i < 56) { // 如果随机数在20-56之间就视为有效数据,模拟数据发生变化
long responseTime = System.currentTimeMillis();
// 返回数据信息,请求时间、返回数据时间、耗时 异步更新消息
writer.print("result: " + i + ", response time: " + responseTime + ", request time: " + timed + ", use time: " + (responseTime - timed)+ ", msg: " +msg);
break; // 跳出循环,返回数据
} else { // 模拟没有数据变化,将休眠 hold住连接
Thread.sleep(1300);
}
}
}
@RequestMapping("/msg")
public void ajax(String m) throws Exception {
msg=m;
return;
}
http://localhost:20035/lp:前端访问进行数据交互的长连接
http://localhost:20035/msg?msg=bamboo可以进行msg消息的变更
启动后台服务,在浏览器中打开html页面,会不断的接收到后端返回的时间戳信息,如果在休息接口调用一次则页面也会返回相应的msg内容
如下:
result: 37, response time: 1537933492115, request time: 1000, use time: 1537933491115 msg: bamboo
这里的消息可以进行延伸应用,比如做成根据前端生成的时间戳生成的唯一key做成redis消息,根据redis的value进行前端的页面不同内容的展示,如等待扫描,正在扫描,授权成功,超时请刷新二维码。这样就可以做成异步交互的安全设计登陆等交互方式。
#参考资料
以上部分参考资料
Web 通信 之 长连接、长轮询(long polling)
https://www.cnblogs.com/hoojo/p/longPolling_comet_jquery_iframe_ajax.html