http长连接

最新推荐文章于 2024-05-12 15:31:11 发布

牧竹子

最新推荐文章于 2024-05-12 15:31:11 发布

阅读量1k

点赞数

分类专栏： jquery 文章标签：长轮询

jquery 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

基于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

牧竹子

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
http长连接

基于HTTP的长连接,是一种通过长轮询方式实现"服务器推"的技术,它弥补了HTTP简单的请求应答模式的不足,极大地增强了程序的实时性和交互性。一、什么是长连接、长轮询？用通俗易懂的话来说，就是客户端不停的向服务器发送请求以获取最新的数据信息。这里的“不停”其实是有停止的，只是我们人眼无法分辨是否停止，它只是一种快速的停下然后又立即开始连接而已。轮询：客户端定时向服务器发送Ajax请求，服务器...
复制链接

扫一扫