web消息推送的各种解决办法

站长手记作者： 2024-08-28 10:30:01

随着HTML、浏览器等各项技术、标准的发展，依次生成了不同的手段与方法能够实现服务端主动推送消息，它们分别是：AJAX，Comet，ServerSent以及WebSocket。

摘要

1.AJAX

用户向给予浏览器一个需要访问的地址
浏览器根据这个地址访问服务器，并与服务器之间创建一个TCP连接（HTTP请求）
服务器根据这个地址和一些其它数据，组建一段HTML文本，将写入TCP连接，然后关闭连接
浏览器得到了来自服务器的HTML文本，解析并呈现了浏览器上给用户浏览

浏览器根据form的参数或者a的参数，作为访问的地址
与服务器创建TCP连接
服务器组建HTML文本，然后关闭连接
浏览器将当前显示的页面摧毁，并按照新的HTML文本呈现一个新的页面给用户

function getMessage(fn) {
    $.ajax({
        url: "Handler.ashx", //一个能够提供消息的页面
        dataType: "text",    //响应类型，可以是JSON，XML等其它类型
        type: "get",         //HTTP请求类型，还可以是post
        success: function (d, s) {
            fn(d);           //得到了正常的响应时，利用回调函数通知外部
        },
        complete: function (x, s) {
            setTimeout(function () {
                getMessage(fn);
            }, 5000);       //无论响应成功或失败，在若干秒后再询问一次服务器
        }
    });
}

间隔时间越快，推送的及时性越好，服务器的消费越大；
间隔时间越慢，推送的及时性越低，服务器的消费越小。

2.Comet

客户端与服务器建立TCP连接
服务器根据客户端提交的报文处理并生成HTML文本
将HTML封闭成为HTTP协议报文并返回给客户端
关闭链接。

建立连接后依然使用"询问"+"应答"的模式。虽然工作方式没变，但是因为减去了每次建立与施放连接的工作，所以性能上提升了很多。而且服务器对TCP连接可以有上下文的定义，而不像以前的AJAX完全是无状态的。
通过对Stream的写入实现服务器将数据主动发送到客户端。因为是TCP连接，所以通过对服务器的编程，我们可以主动的把数据从服务端发送给客户端，从模式上真正建立起了推送的概念。

3.Server-Sent

//定义一个ServerSent对象
var s = new EventSource("Handler.ashx");
//当收到一个非自定义事件时的回调函数
s.onmessage = function (e) {
    alert(e.data);
};
//当收到一个被服务器命名为MyEvent事件消息时的回调函数
s.addEventListener("MyEvent", function (e) {
    alert(e.data);
});

public class Handler : IHttpHandler
{
    public void ProcessRequest(HttpContext context)
    {
        context.Response.ContentType = "text/event-stream";
        context.Response.Expires = -1;
        context.Response.Write("event: MyEvent\r\n");       //事件类型，使用\r\n结尾
        context.Response.Write("data: HelloWorld!\r\n");    //事件数据，换行时使用\r\n，并在新行再加上data:
        context.Response.Write("data: I'm server!\n\n");    //事件数据结束，使用\n\n
        context.Response.Flush();                           //这里不能用End，否则是关闭连接的
    }
    public bool IsReusable
    {
        get
        {
            return true;
        }
    }
}

4.WebSocket

var ws = new WebSocket("ws://192.168.0.105:10080"); //连接服务器        
ws.onopen = function (event) { alert("已经与服务器建立了连接\r\n当前连接状态：" + this.readyState); };
ws.onmessage = function (event) { alert("接收到服务器发送的数据：\r\n" + event.data); };
ws.onclose = function (event) { alert("已经与服务器断开连接\r\n当前连接状态：" + this.readyState); };
ws.onerror = function (event) { alert("WebSocket异常！"); };