长短轮询

最新推荐文章于 2022-10-09 15:50:00 发布

朱哥哥很爱小龙女

最新推荐文章于 2022-10-09 15:50:00 发布

阅读量178

点赞数

本文链接：https://blog.csdn.net/pb951028/article/details/94658274

版权

短轮询

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<link rel="stylesheet" th:href="@{/pp/css/bootstrap.css}" />
<link rel="stylesheet" th:href="@{/icon/css/font-awesome.min.css}" />
</head>
<body class="bg-b">
	<div class="container-fluid">
		<div class="row">
			<div class="col text-center bg-danger text-white">短轮询</div>
		</div>
		<div class="row mt-1">
			<div id="chatbox" class="border p-2"
				style="height:320px;width:600px;overflow:auto;"
				>
			
			</div>
		</div>
		<div class="form-inline">
			<input id="msg" type="text"
				class="form-control-sm w-50"/>
			<button class="btn btn-sm btn-success ml-2" onclick="sendMsg();">发送</button>
		</div>
	</div>
	<!-- js -->
	<script th:src="@{/pp/js/jquery.js}"></script>
	<script th:src="@{/pp/js/vue.js}"></script>
	<script th:src="@{/layer/layer.js}"></script>
	<script th:inline="javascript">
		//ajax短轮询，轮询间隔2秒
		setInterval(showmsg,2000);
		function sendMsg(){
			$.post("/sendmsg",{
				msg:$("#msg").val()
			},function(data){
				layer.msg("发送成功")
				$("#msg").val("");
			});
		}
		
		function showmsg(){
			$.post("/showmsg",{},function(data){
				var html="";
				$.each(data,function(i,n){
					html+="<div>"+n+"</div><hr/>";
				});
				$("#chatbox").html(html);
				$("#chatbox")[0].scrollTop=$("#chatbox")[0].scrollHeight;
			});
		}
	</script>
</body>
</html>

//短轮询
	@RequestMapping("/sendmsg")
	@ResponseBody
	public String sendmsg(String msg,HttpServletRequest req) {
		super.saveToAppList(req, String.class, "chatlist", msg, 1000);
		return "success";
	}
	
	@RequestMapping("/showmsg")
	@ResponseBody
	public List<String> showmsg(HttpServletRequest req) {
		List<String> list = super.getAppList(req, String.class, "chatlist");
		return list;
	}

长轮询

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<link rel="stylesheet" th:href="@{/pp/css/bootstrap.css}" />
<link rel="stylesheet" th:href="@{/icon/css/font-awesome.min.css}" />
</head>
<body class="bg-b">
	<div class="container-fluid">
		<div class="row">
			<div class="col text-center bg-danger text-white">长轮询</div>
		</div>
		<div class="row mt-3">
			<div class="col"></div>
			<div class="col">
				<div id="ctx"></div>
			</div>
			<div class="col"></div>
		</div>
	</div>
	<!-- js -->
	<script th:src="@{/pp/js/jquery.js}"></script>
	<script th:src="@{/pp/js/vue.js}"></script>
	<script th:src="@{/layer/layer.js}"></script>
	<script th:inline="javascript">
		//
		function showMore(){
			$.post("/longpoll",{},function(data){
				$("#ctx").append(data+",");
				showMore();
			});
		}
		showMore();
	</script>
</body>
</html>

//长轮询
	@RequestMapping("/longpoll")
	@ResponseBody
	public String longpoll() throws InterruptedException {
		while(true) {
			int res = new Random().nextInt(9000)+1000;
			System.out.println("生成:"+res);
			if(res>=5000) {
				return res+"";
			}
			Thread.sleep(1000);
		}
	}

长轮询的本质:后端死循环，前端递归

短轮询，客户端去问有没有消息，不管有没有消息都要断开连接，过一会儿再来问

长轮询，客户端去问，问到消息了，才断开连接，客户端收到消息后，继续去问，问到了再回来，循环

朱哥哥很爱小龙女

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
长短轮询

短轮询<!DOCTYPE html><html><head><meta charset="UTF-8" /><title></title><link rel="stylesheet" th:href="@{/pp/css/bootstrap.css}" /><link rel="style...
复制链接

扫一扫