前端 - 轮询, 长轮训, websocket
2024-09-05 05:06:24
轮询
概念
ajax 轮询的原理很简单，让浏览器间隔几秒就发送一次请求，询问服务器是否有新信息
代码
function showUnreadNews()
{
$(document).ready(function() {
$.ajax({
type: "POST",
url: "unread_list.php",
dataType: "json",
success: function(data) {
alert(data);
}
});
});
}
setInterval('showUnreadNews()',5000); //轮询执行，5000ms一次
长轮训
概念
原理跟 ajax轮询 差不多，都是采用轮询的方式，不过采取的是阻塞模型
也就是说，客户端发起连接后
如果没消息，就一直不返回Response给客户端，直到有消息才返回或超时
返回完之后，客户端再次建立连接，周而复始，基于事件的触发，一个事件接一个事件
代码
function showUnreadNews()
{
$.ajax({
type: "POST",
url: "unread_list.php",
dataType: "json",
success: function(data) {
//处理返回数据
alert(data);
//再次请求
showUnreadNews();
},
complete:function(XMLHttpRequest,textStatus)
{
if(textStatus=='timeout'){//判断是否超时
showUnreadNews();//超时，重新请求
}
}
});
}
websocket
概念
WebSocket是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。
浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道, 两者之间就直接可以数据互相传送。
详细跳转 Flask websocket
代码
var ws; function WebSocketTest()
{
if ("WebSocket" in window)
{
alert("您的浏览器支持 WebSocket!"); // 打开一个 web socket
ws = new WebSocket("ws://localhost:9998/echo"); ws.onopen = function()
{
// Web Socket 已连接上，使用 send() 方法发送数据
ws.send("发送数据");
alert("数据发送中...");
}; ws.onmessage = function (evt)
{
var received_msg = evt.data;
alert("数据已接收..." + received_msg);
};
ws.onerror = function (evt) {
//出错
alert(JSON.stringify(evt));
}
ws.onclose = function()
{
// 关闭 websocket
alert("连接已关闭...");
};
}
else
{
// 浏览器不支持 WebSocket
alert("您的浏览器不支持 WebSocket!");
}
} ws.close();//关闭连接
最新文章
- 【DS】About Stack
- bzoj 3781 小B的询问（莫队算法）
- socket的异步回调函数，采用一问一答
- strassen algorithm
- yii 权限分级式访问控制的实现（非RBAC法）——已验证
- java中的URL InetAddress类
- html学习之多行文本
- SpringBoot进阶教程(二十二)集成RabbitMQ---MQ实战演练
- Java遍历List5种方法的效率对比
- AWSS3异步等待上传成功返回结果
- Java常用类库 读书笔记 一
- django 模板层排序 class Meta 添加信息
- 快速掌握JavaScript面试基础知识(三)
- OpenCV不同类型Mat的at方法访问元素时该如何确定模板函数的typename（转）
- 五、springboot（二）配置数据源oracle
- Github上删除仓库
- Ubuntu 网卡多个 IP 地址
- 【日常训练】Help Victoria the Wise（Codeforces 99C）
- Java温故而知新（7）Object类及其方法讲解
- 【洛谷 P3899】 [湖南集训]谈笑风生 （主席树）