zoukankan      html  css  js  c++  java
  • Ajax长连接和SignalR(刷新客户端数据)的区别

    ajax实现长连接

     
    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8" isELIgnored="false" %>
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
        <head>
            <meta http-equiv="pragma" content="no-cache">
            <meta http-equiv="cache-control" content="no-cache">
            <meta http-equiv="expires" content="0">
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <%@ include file="/tags/jquery-lib.jsp"%>
            
            <script type="text/javascript">
                $(function () {
                
                    (function longPolling() {
                    
                        $.ajax({
                            url: "${pageContext.request.contextPath}/communication/user/ajax.mvc",
                            data: {"timed": new Date().getTime()},
                            dataType: "text",
                            timeout: 5000,
                            error: function (XMLHttpRequest, textStatus, errorThrown) {
                                $("#state").append("[state: " + textStatus + ", error: " + errorThrown + " ]<br/>");
                                if (textStatus == "timeout") { // 请求超时
                                        longPolling(); // 递归调用
                                    
                                    // 其他错误,如网络错误等
                                    } else { 
                                        longPolling();
                                    }
                                },
                            success: function (data, textStatus) {
                                $("#state").append("[state: " + textStatus + ", data: { " + data + "} ]<br/>");
                                
                                if (textStatus == "success") { // 请求成功
                                    longPolling();
                                }
                            }
                        });
                    })();
                    
                });
            </script>
        </head>
        
        <body>

    上面这段代码就是采用Ajax的方式完成长连接,主要优点就是和服务器始终保持一个连接。如果当前连接请求成功后,将更新数据并且继续创建一个新的连接和服务器保持联系。如果连接超时或发生异常,这个时候程序也会创建一个新连接继续请求。这样就大大节省了服务器和网络资源,提高了程序的性能,从而也保证了程序的顺序。

    SignalR 消息推送

    关于如何使用SignalR服务推送数据到客户端在上一篇文章中已经写了详细的案例,不了解的可以先去了解SignalR的实现方式。

    关于两者的区别(个人见解,不正确的地方请指出):

    Ajax长连接:

    Ajax长连接是客户端不停的向服务器发送请求以获取最新的数据信息。这里的“不停”其实是有停止的,只是我们人眼无法分辨是否停止,它只是一种快速的停下然后又立即开始连接而已。

    主要优点就是和服务器始终保持一个连接。如果当前连接请求成功后,将更新数据并继续创建一个新的连接和服务器保持联系。如果连接超时或发生异常,这个时候程序也会创建一个新的连接继续请求,这样就大大节省了网络和服务器资源,提高了程序的性能,从而也保证了程序的顺序。

    SignalR:

    不需要客户端发出请求,服务器只要发现有了新的数据,立即调用客户端获取数据的方法,从而实现把新的数据推送到客户端展示出来。博主百度百科了一下更专业的说法其实是:

    当所连接的客户端变得可用时,服务器代码可以立即向其推送内容,而不是让服务器等待客户端请求新的数据。






  • 相关阅读:
    css实现左栏固定右栏自适应,高度自适应的布局
    使用canvas检测HTML5视频解码错误
    与webview打交道中踩过的那些坑
    走进AngularJs(五)自定义指令----(下)
    走进AngularJs(四)自定义指令----(中)
    走进AngularJs(三)自定义指令-----(上)
    为jQuery的$.ajax设置超时时间
    走进AngularJs(二) ng模板中常用指令的使用方式
    走进AngularJs(一)angular基本概念的认识与实战
    Javascript事件模型系列(四)我所理解的javascript自定义事件
  • 原文地址:https://www.cnblogs.com/harveylv/p/6420299.html
Copyright © 2011-2022 走看看