2.轮询

轮询:前端每隔固定时间向后台发送一次请求，询问服务器是否有新数据

轮询的工作流程

1.前端发送数据

2.后端接收处理数据

3.前端定时请求数据

4.后端返回新数据

 

 

一、发送-接收数据

// 前端

<div class="message" id="message">

    <div>
        <input type="text" id="txt" placeholder="请输入">
        {#发送按钮绑定点击事件#}
        <input type="button" value="发送" onclick="sendMessage();">

    </div>
    {#jquery cdn #}
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script>

        //  发送数据
        function sendMessage() {

            var text = $("#txt").val();
            // 基于ajax将用户输入的文本信息发送到后台
            $.ajax({
                url: '/pool/send/msg/',
                type: 'GET',
                data: {
                    text: text
                },
                success: function (res) {
                    console.log('请求发送成功', res)

                }

            })
        }
        </script>

 

#views

# 假设DB是我们的缓存数据库
DB = []


def views(request):
    return render(request, 'home.html')


def send_msg(request):
    print('接收到到前端请求', request.GET)
    text = request.GET.get('text')
    # 将接收到的请求添加进数据库
    DB.append(text)
    return HttpResponse('ok')

二、定时请求、更新数据

// 前端
// 设置用户的的数据索引
max_index = 0;


// 每隔固定向后台发送请求获取数据并展示在界面上
setInterval(function () {
    // 发送请求获取数据
    $.ajax(
        {
            url: '/pool/get/msg/',
            type: 'GET',
            data: {
                index: max_index
            },
            success: function (dataDict) {

                // 将后端返回到index传给全局变量
                max_index = dataDict.max_index
                $.each(dataDict.data, function (index, item) {
                    // 将内容拼接成div标签，添加到message区域
                    var tag = $('<div>')
                    tag.text(item)
                    $("#message").append(tag);

                })
            }
        }
    )

}, 1000)// 间隔时间，单位毫秒

 

#views

def get_msg(request):
    index = request.GET.get('index')
    index = int(index)
    # 将接收到数据从数据库取处理出来返回,通过索引处理，如果是之前到老数据，不重复显示
    context = {
        'data': DB[index:],
        # 将当前用户数据最大索引返回给前端
        'max_index': len(DB)
    }

    return JsonResponse(context)