zoukankan      html  css  js  c++  java
  • 优酷的投票

    正文:

    优酷牛人--我是传奇的网络投票页面:http://c.youku.com/niuren

    自己随便选择一个选手,会弹出一个播放的浮动层,上面的投票按钮,点击投票成功后,再次投票,为提示你:你已经投过,请一个小时后在投票!-----看起来这个投票很正常,但是这些都是表面现象。

    image

    使用firebug我们可以发现,每次投票都会触发一个http请求,

    我们可以把这个http的链接:http://minisite.youku.com/pub2/i_am_legend/vote.php?id=XMjc1NzExMzE2&callback=c&i=0.19621988418141467

    我的第一感觉这个是使用getjson方式做的投票,我们把这个放在浏览器里,刷新几次发现数据一直是增加的,image,689票,这样就可以刷票??

    带着好奇我打开页面发现这个选手的票数情况:

    image

    我擦,我第一感觉这个怎么跟我平时做的投票很类似啊,赶紧找列表页的ajax请求文件;果然发现是:http://minisite.youku.com/pub2/i_am_legend/getvote.php?page=1&callback=cc&count=8&i=0.42276474971249034

    image

    这是一个很典型的jquery里面的getjson方式返回的数据(我使用的jquery框架,优酷不是使用jq框架,但是原来类似),我又找了一个这个请求的源码:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    function vTpListGet(pg, pz, t){
      pg = (pg || 1);
      pz = (pz || 8);
      t = (t || false);
      cc = function(oList, total){
        if(oList.length > 0){
          var html = "";
          for(var i=0;i < oList.length;i++){
            html += "<ul class=\"x\">\n";
            html += "  <li class=\"x_thumb\"><a href=\"javascript:;\" onclick=\"vTpSet('"+oList[i].videoid+"','"+oList[i].title+"');\" title=\""+oList[i].title+"\"><img src=\""+oList[i].thumburl+"\" alt=\""+oList[i].title+"\" /></a></li>\n";
            html += "  <li class=\"x_title\"><a href=\"javascript:;\" onclick=\"vTpSet('"+oList[i].videoid+"','"+oList[i].title+"');\" title=\""+oList[i].title+"\">"+oList[i].title+"</a></li>\n";
            html += "  <li class=\"x_data\">票数:<span class=\"num\">"+oList[i].total+"</span></li>\n";
            html += "  <li class=\"x_btn\"><span class=\"btn\" onclick=\"vTpSet('"+oList[i].videoid+"','"+oList[i].title+"');\"></span></li>\n";
            html += "</ul>\n";
          }
          html += "<div class=\"clear\"></div>";
          //alert(html);
          document.getElementById('videosTpList').innerHTML = html;
     
          if(t){
            //显示分页
            max_cnt = pz;
            var js_pager = new jsPager();
            js_pager.init(total, pz, pg, "vTpPager");
            document.getElementById('videosTpPager').style.display = "";
            document.getElementById('videosTpPager').innerHTML = js_pager.getHtml();
          }
        }
      };
      js_request("http://minisite.youku.com/pub2/i_am_legend/getvote.php?page="+pg+"&callback=cc&count="+pz+"&i=" + Math.random());
    }

    再来看优酷关于限制频繁投票的方法:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    function vTp(vid){
      c = function(num,vid){
        alert("投票成功,目前票数为:"+num+"票!");
        var exp = new Date ();
        exp.setTime(exp.getTime() + 3600000);
        setCookie("nrtp", "true", exp);
      }
      if(getCookie("nrtp") != "true"){
        js_request("http://minisite.youku.com/pub2/i_am_legend/vote.php?id="+vid+"&callback=c&i=" + Math.random());
      }else{
        alert("一小时内只能投票一次!");
        return false;
      }
    }

    竟然是在客户端写cookies来判断,不禁有点坑爹了,之前我们做网络投票经常被刷票,但是毕竟我们在使用服务端验证,记录一下ip来限制,但是优酷这个投票完全是靠客户端验证来实现。

    总结一下优酷的投票:

      1. 列表页的数据是实时显示的,也就是说投票后立刻显示----我们当年投票也是实时显示,但是服务器压力太大,越到刷票的,数据库被频繁的插入读取,对数据压力也是蛮大的,经常把数据库服务器宕机了,后来采用缓存机制也解决这个问题,一分钟后显示数据。
      2. 这个投票的api文件写的有问题,我把http://minisite.youku.com/pub2/i_am_legend/vote.php?id=XMjc1NzExMzE2&callback=c&i=0.19621988418141467放在浏览器,不停的刷新居然可以不停的增加票数,很显然优酷的程序员偷懒了,起码也要判断一些提交页面的路径啊,提交方式啊 的什么,判断我是否来自正常的投票请求,如果这样的话这个投票也太容易刷票了,直接把这个url放在浏览器不同的F5就可以了,实在不行直接写个js定时刷新页面也可以。
      3. 防止刷票机制,决然是使用客户端cookie做验证,这个就有点菜鸟了,最普通的方式也是根据ip做验证(虽然这个方式在专业刷票公司哪里也是小儿科,但是应付非专业人士还是足够了),防止频繁刷票。

        总结;

        有点失望了,本以为大公司的技术都比我们成熟,看来有点高估了吧,看来不要盲目的迷恋和崇拜大公司,做好自己,相信自己的才是关键!

      4. 本文链接: 看看优酷是怎么做网络投票的?
        联系作者: PHP淮北,交流QQ群:群1:153856687,群2:198110186
        版权所有: 非特殊声明均为本站原创文章,转载请注明出处:PHP10086博客网
        订阅更新: 欢迎通过RSS订阅我们的内容更新
  • 相关阅读:
    ASP.NET中JSON的序列化和反序列化
    C# 本地时间和GMT(UTC)时间的转换
    C# XmlReader/XmlWriter 类
    Xml 序列化
    XPath <第四篇>
    XML Schema <第三篇>
    .Net XML操作 <第二篇>
    XML基础<第一篇>
    Sql Server 面试题
    运用计划缓冲的建议
  • 原文地址:https://www.cnblogs.com/Leo_wl/p/2477616.html
Copyright © 2011-2022 走看看