http长连接

不念不忘少年蓝@ 2022-05-10 08:50 172阅读 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_lp]  
[http://localhost:20035/msg?msg=bamboo可以进行msg消息的变更][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][https_www.cnblogs.com_hoojo_p_longPolling_comet_jquery_iframe_ajax.html]

[http_localhost_20035_lp]: http://localhost:20035/lp%EF%BC%9A%E5%89%8D%E7%AB%AF%E8%AE%BF%E9%97%AE%E8%BF%9B%E8%A1%8C%E6%95%B0%E6%8D%AE%E4%BA%A4%E4%BA%92%E7%9A%84%E9%95%BF%E8%BF%9E%E6%8E%A5
[http_localhost_20035_msg_msg_bamboo_msg]: http://localhost:20035/msg?msg=bamboo%E5%8F%AF%E4%BB%A5%E8%BF%9B%E8%A1%8Cmsg%E6%B6%88%E6%81%AF%E7%9A%84%E5%8F%98%E6%9B%B4
[https_www.cnblogs.com_hoojo_p_longPolling_comet_jquery_iframe_ajax.html]: https://www.cnblogs.com/hoojo/p/longPolling_comet_jquery_iframe_ajax.html