ajax轮询与websocket

HTTP协议的缺陷

• 在标准的HTTP请求响应语义中，浏览器发起请求，服务器发送一个响应，这意味着在浏览器发起新请求前，服务器不能发送新信息给客户端浏览器

ajax轮询

• 轮询:定时的通过Ajax查询服务端
• 缺点:消息的实时性较差

function sendXHR(obj) {  
    $.ajax({  
        type: "post", //AJAX请求类型  
        url: "你的请求url", 
        timeout: 1000 * 60,  //AJAX请求超时时间为60秒  
        data:obj,
        success: function (data) {  
            // 请求成功的回调函数 
        },
        error: function (data) {  
            // 请求失败的回调函数
        }
    });  
}
window.setInterval(sendXHR(obj),1000); // 实现轮询的重要代码

ajax长轮询

• 长轮询：客户端向服务器发送Ajax请求，服务器接到请求后hold住连接，直到有新消息才返回响应信息并关闭连接，客户端处理完响应信息后再向服务器发送新的请求。

• 优点：在无消息的情况下不会频繁的请求,比普通的轮询方式更及时

• 缺点：会消耗更多的服务器资源,且频繁访问服务器,可能ip会被拉进黑名单

function sendXHR() {  
    $.ajax({  
        type: "post", //AJAX请求类型  
        url: "你的请求url", 
        cache: false,  //无缓存  
        timeout: 1000 * 60,  //AJAX请求超时时间为60秒  
        data:{"key":"value"},
        success: function (data) {  
            // 请求成功的回调函数
            sendXHR();//请求后立即发起AJAX请求  
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {  
            // 请求失败的回调函数
            sendXHR()
        }
    });  
}  

websocket

• 不管是长轮询还是短轮询，都不太适用于客户端数量太多的情况，因为每个服务器所能承载的TCP连接数是有上限的，这种轮询很容易把连接数顶满
• 采用 WebSocket 协议后，服务器可以主动推送消息给客户端；而不需要客户端以（长/短）轮询的方式发起http请求到server以获取数据更新反馈
• WebSockct只需要一次HTTP 握手，整个通讯过程是建立在一次连接（状态）中的，server 端会一直推送消息更新反馈到客户端，直到客户端关闭请求，这样就无需 客户端为发送消息而建立不必要的 tcp 连接 和 为了建立tcp连接而发送不必要的冗余的连接上下文消息
• 兼容性不好,服务器需要另外配置,客户端实现简单,性能较轮询或长轮询更优,实时性极好

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 (event) {
                var received_msg = event.data;
                alert("数据已接收...");
            };
            ws.onclose = function() {
                // 关闭 websocket
                alert("连接已关闭...");
            };
        }
        else {
            // 浏览器不支持 WebSocket
            alert("您的浏览器不支持 WebSocket!");
        }
    }