Update time Asp. net USES Comet to develop http long connection sample sharing

2020-11-20 06:03:15
OfStack

Benefits :1. Resource savings and less latency compared to AJAX polling, 2. Compared to webSocket, it is applicable to a wide range of scenarios.

1. First create an Asp.net MVC empty project

Add 1 controller (the same code is available in ES10en.net WebForm)


public class CometController : Controller
    {
        public ActionResult Test()
        {
            Response.Buffer = false;
            while (true)
            {
                Response.Write(DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss FFF") + "|");
                Thread.Sleep(500);
            }
            // It's not gonna get here 
            return Content("");
        }
    }
}

2. Build another controller and View to display HTML


public class HomeController : Controller
    {
        //
        // GET: /Home/
        public ActionResult Index()
        {
            return View();
        }
    }

The View code is important


@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <title>Index</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script language="javascript">
        var req = false;
        var lastDelimiterPosition = -1;
        $(document).ready(function () {
            getData();
        });
        function getData() {
            loadXMLDoc("/Comet/Test");
        }
        // new 1 a XHR
function createRequest() {
            if (window.XMLHttpRequest && !(window.ActiveXObject)) {
                try {
                    req = new XMLHttpRequest();
                } catch (e) {
                    req = false;
                }        // branch for IE/Windows ActiveX version   
            } else if (window.ActiveXObject) {
                try { req = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) {
                    try {
                        req = new ActiveXObject("Microsoft.XMLHTTP");
                    } catch (e) {
                        req = false;
                    }
                }
            }
        }
        // The initiating 
function loadXMLDoc(url) {
            try {
                if (req) {
                    req.abort();
                    req = false;
                }
                createRequest();
                if (req) {
                    req.onreadystatechange = processReqChange;
                    req.open("GET", url, true);
                    req.send("");
                } else {
                    alert('unable to create request');
                }
            } catch (e) { alert(e.message); }
        }
        // Check the status 
function processReqChange() {
            if (req.readyState == 3) {
                try {
                    ProcessInput(req.responseText);
                    if (req.responseText.length > 3000) {
                        lastDelimiterPosition = -1; getData();
                    }
                }
                catch (e) {
                    alert(e.message);
                }
            }
        }

        // Split string 
function ProcessInput(input) {
            var text = input;
            var nextDelimiter = text.indexOf('|', lastDelimiterPosition + 1);
            if (nextDelimiter != -1) {
                var timeStamp = text.substring(nextDelimiter + 1);
                if (timeStamp.length > 0) {
                    lastDelimiterPosition = nextDelimiter;
                    ProcessTime(timeStamp);
                }
            }
        }
        // The output   Or what event is triggered 
function ProcessTime(time) {
            document.getElementById('div1').innerHTML = time;
        }
    </script>
</head>
<body>
    <div>
        <div id="div1">
        </div>
        <div id="div2">
        </div>
    </div>
</body>
</html>

3. The final effect is:

1 time is displayed on the page, updated every half second

Of course, once you get the content, you can actually do whatever you want... Either update DOM or execute js (thanks to the eval method ~~).

4. This example is just one implementation of asynchronous Javascript,

We can actually pass it < iframe > and < script > These two tags do the implementation, in particular the script tag can access and execute the cross-domain javascript