（轮询案例）通过手机pad等第三方访问网页，实现远程控制切换当前PC打开的页面，进行实时跳转。

 

一、需求环境

        1、接到需求，我们大数据页面，共有多个页面。由于要去展台展示给用户。已在pc端打开页面的展示的同时，用户希望通过手机或者pad来远程控制pc端切换页面。而手机或者pad上有这几个页面的缩略图，点击即可切换pc端上的页面。

       pc页面大致                                                          此为手机或pad页面大致展示，非实际效果图。

                      

        2、开发环境，.net4.5   mvc  jQurey  html

二、实现方法及效果

        1、实现方法，使用轮询的方式。还可以使用 websocket，在这里主要介绍使用轮询的方式。

        2、实现效果。在手机或PC上点击 对应对应的页面，左侧的网页即跳转对应的页面。

         如图：

                                            

三、代码

        1、首先，我们在项目的Controllers层，新增一个长轮询的Controllers类，必须继承AsyncController类。

    public class longPollingController : AsyncController
    {
    }

       2、手机或pad打开控制网页，点击图片  触发函数，Ajax，具体代码如下。调用对应Controllers里面的具体函数。

        function changePage(url) {
           $.ajax({
                url: "@Url.Content("~/ReportManage/longPolling/SetUrl")",
                data: { Url: JSON.stringify(url) },
                type: "get",
                dataType: "json",
                async: true,
                success: function (data) {
                    if (data.state == "success") {
                       alert(data.message);

                    } else {
                        alert(data.message);
                    }
                }
            });
        }

       3、现场操作员可能会有多个，跳转的url可能会有多种情况、在此，使用用户登录的id加上自定义字符串，将字符串存入cache当中，调整过期时间为1分钟，以免手机端打开，而PC端未打开，cache一直存在的问题。此处使用redis，Session，Cookie，都可以。Controllers中对应SetUrl函数。

        [HttpGet]
        public ActionResult SetUrl(string url)
        {
            var result = new AjaxResult();
            var key= LoginInfo.UserId + "BigDataUrl";
            string value = JsonConvert.DeserializeObject(url);

            CacheFactory.Cache().WriteCache(value, key, DateTime.Now.AddMinutes(1));

            result.state = ResultType.success.ToString();
            result.message = "成功";
            result.data = value;
            return Content(result.ToJson());
        }

       4、设置好了，需要跳转的url，接着就是PC端页面，来找寻这个URL，一旦存在缓存，立即执行跳转动作。web端代码。

        注意点1：为了防止大数据页面未加载完成，就直接开始轮询（可以理解为循环ajax访问，即ajax访问结束后再次调用次ajax），会导致页面本身的ajax加载数据卡顿，所以在页面onload结束后，使用setTimeout延迟5秒调用次函数。

        注意点2：轮询 longPolling 函数在后，若没有返回查找的数据则过0.1秒继续发起请求。若没有次数延迟0.1秒，回导致一直在轮询，导致pc页面本身的跳转会有问题。（若有其他解决方案，欢迎讨论）

      function longPolling() 
      {
            $.getJSON("@Url.Content("~/ReportManage/longPolling/GetUrl")", function (json)             
            {
                if (json.data != "" && json.data != null) {
                    location.href = json.data;
                }
                else
                    setTimeout(longPolling, 100);
            });
      };

      window.onload = function () {
            setTimeout(longPolling, 5000);
      }

        5、后台Controller的GetUrl代码，从cache中获取对应的值，若取到值立即清空，避免重复跳转。

        public void GetUrlAsync()
        {
            //计时器，1秒种触发一次Elapsed事件        
            System.Timers.Timer timer = new System.Timers.Timer(1000);
            //告诉.NET接下来将进行一个异步操作       
            AsyncManager.OutstandingOperations.Increment();
            //订阅计时器的Elapsed事件    
            timer.Elapsed += (sender, e) =>
            {   
                //保存将要传递给GetUrlCompleted的参数  
                //如需参数可以设置参数
                //AsyncManager.Parameters["参数1"] = 值;
                //告诉ASP.NET异步操作已完成，进行GetUrlCompleted方法的调用               
                AsyncManager.OutstandingOperations.Decrement();
            };
            //启动计时器       
            timer.Start();
        }

        public ActionResult GetUrlCompleted()
        {
            var key= LoginInfo.UserId + "BigDataUrl";
            string value = CacheFactory.Cache().GetCache(key);
            if (value != null)
            {
                CacheFactory.Cache().RemoveCache(key);
            }
            return Json(new { data = value }, JsonRequestBehavior.AllowGet);
        }

    

四、总结

         在这样，在任意地方打开 控制页，只要是同一用户，即可实现远程切换。

         轮询 可以在很多场景使用，主要起到前端页面侦听的作用，此处只是一个作用。

         粗略学习，还望指点、