1、Ajax 轮询
2、Ajax 长轮询
3、WebSocket
利用 XHR,通过 setInterval 定时向后端发送请求
1、优点:实现简单
2、缺点:数据同步不及时,增加后端处理压力
3、场景:适用于对消息及时性要求不高且服务器资源充足的开发
setInterval(function() {
$.ajax({
url: 'https://www.baidu.com/',
success: function() {
//success code
}
});
}, 3000);
在 Ajax 轮询的基础上做的改进,在后端数据没有更新的时不再返回空响应,而且后端一直保存连接,直到后端有数据变化,则相应请求并且关闭连接,前端收到数据后,再次向后端发起请求,并处理刚刚收到的数据
1、优点:通信及时,服务端资源消耗低
2、缺点:请求交替时消息会延迟
3、场景:扫码登录
function async () {
$.ajax({
url: 'http://www.baidu.com/',
success: function() {
async ();
//code from here
}
});
}
WebSocket 是一种在单个 TCP 连接上进行全双工通讯的协议,允许服务端主动向客户端发送数据,浏览器和服务器只需要完成一次握手,就可以创建持久性的连接,并进行双向数据传输
1、优点:通信及时,采用双工的通信模式
2、缺点:服务端资源消耗高
3、场景:对及时性要求高,如股票系统
function WebSocketTest() {
if ("WebSocket" in window) {
alert("您的浏览器支持 WebSocket!");
// 打开一个 web socket
var 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("数据已接收...");
};
ws.onclose = function() {
// 关闭 websocket
alert("连接已关闭...");
};
} else {
// 浏览器不支持 WebSocket
alert("您的浏览器不支持 WebSocket!");
}
}