开发者社区> 问答> 正文

如何在前端实现长轮询?

如何在前端实现长轮询?

展开
收起
珍宝珠 2019-11-22 11:05:48 1657 0
1 条回答
写回答
取消 提交回答
  • 客户端向服务器发送请求,服务器接到请求后hang住连接,等待30秒,直到有新消息,才返回响应信息并关闭连接,客户端处理完响应信息后再向服务器发送新的请求。

    <!DOCTYPE html>
    <html lang="zh-cn">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Title</title>
    </head>
    <body>
        <h1>请选出最帅的男人</h1>
        <ul>
            {% for k,v in gg.items() %}
                <li style="cursor: pointer" id="user_{{ k }}" ondblclick="vote({{ k }});">ID:{{ k }}, 姓名:{{ v.name }} ,票数:<span>{{ v.count }}</span></li>
            {% endfor %}
        </ul>
    
        <script src="/static/jquery-3.3.1.min.js"></script>
        <script>
            $(function () {
                get_new_count();
            });
            
            function get_new_count() {
                $.ajax({
                    url: '/get_new_count',
                    type:'GET',
                    dataType:'JSON',
                    success:function (arg) {
                        if (arg.status){
                            // 更新票数
                            var gid = "#user_" + arg.data.gid;
                            $(gid).find('span').text(arg.data.count);
                        }else{
                            // 10s内没有人投票
                        }
                        get_new_count();
    
                    }
                })
            }
    
            function vote(gid) {
                $.ajax({
                    url: '/vote',
                    type:'POST',
                    data:{gid:gid},
                    dataType:"JSON",
                    success:function (arg) {
    
                    }
                })
            }
        </script>
    </body>
    </html>
    
    2019-11-22 11:06:09
    赞同 展开评论 打赏
问答分类:
问答标签:
问答地址:
问答排行榜
最热
最新

相关电子书

更多
Vue.js 在前端服务化上的探索与实践 立即下载
阿里文娱大前端技术实践 立即下载
前端代码是怎样智能生成的 立即下载