标签：__ websocket uid get 轮询 ws vote name

轮询、长轮询、websocket

一、轮询

在一些需要进行实时查询的场景下应用
比如投票系统：
　　大家一起在一个页面上投票
　　在不刷新页面的情况下，实时查看投票结果

1、后端代码

from flask import Flask, render_template, request, jsonify


app = Flask(__name__)

USERS = {
    1: {'name': '小米', 'count': 300},
    2: {'name': '小康', 'count': 200},
    3: {'name': '小明', 'count': 600},
}


@app.route('/')
def index():
    return render_template('Poll.html', users=USERS)


@app.route('/vote', methods=['POST'])
def vote():
    # 接收uid,通过uid给票数 +1
    # 用户提交Json数据过来，用request.json获取
    uid = request.json.get('uid')
    USERS[uid]['count'] += 1
    return "投票成功"


@app.route('/get_vote')
def get_vote():
    # 返回users数据
    # jsonify 是flask自带的序列化器
    return jsonify(USERS)


if __name__ == '__main__':
    app.run()

2、前端代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>投票系统</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
    <script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.js"></script>
</head>
<style>
    .my-li {
        list-style: none;
        margin-bottom: 20px;
        font-size: 18px;
    }
</style>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <h1>最帅男人投票</h1>
            {% for (uid, user) in users.items() %}
                <button class="btn btn-success" onclick="vote({{ uid }})">投票</button>
                <li class="list-group-item-info my-li" id="{{ uid }}">{{ user.name }}目前的票数是: {{ user.count }}</li>
            {% endfor %}
        </div>
    </div>
</div>

<script>
    // 投票
    function vote(uid) {
        // 向后端发送投票请求
        axios.request({
            url: '/vote',
            method: 'post',
            data: {
                uid: uid
            }
        }).then(function (response) {
            console.log(response.data);
        })
    }

    // 获取最新的投票结果
    function get_vote() {
        axios.request({
            url: '/get_vote',
            method: 'get'
        }).then(function (response) {
            // 获取后端传过来的新数据
            // 重新渲染页面
            let users = response.data;
            for (let uid in users) {
                //根据uid获取li标签 改变innerText
                let liEle = document.getElementById(uid);
                liEle.innerText = `${users[uid]['name']}目前的票数是: ${users[uid]['count']}`
            }
        });
    }

    // 页面加载完后，立刻获取数据
    window.onload = function () {
        setInterval(get_vote, 2000)
    }

</script>

</body>
</html>

3、轮询

特点：每隔一段时间不断向后端发送请求
缺点：消耗大有延迟

二、长轮询

由于上面的轮询是不能实时查看到投票情况的，存在一定的延迟性
长轮询可以实现实时查看投票情况

1、后端代码

from flask import Flask, render_template, request, jsonify, session
import uuid
import queue


app = Flask(__name__)
app.secret_key = '切克闹'


USERS = {
    1: {'name': '小米', 'count': 300},
    2: {'name': '小康', 'count': 200},
    3: {'name': '小明', 'count': 600},
}


Q_DICT = {
    # uid: q对象
}


@app.route('/')
def index():
    # 模拟用户登录
    # 模拟用户登录后的唯一id
    user_id = str(uuid.uuid4())
    # 每个用户都有自己的Q对象
    Q_DICT[user_id] = queue.Queue()
    # 把用户的id存到session
    session['user_id'] = user_id
    # 页面展示投票的人的信息
    return render_template('longPoll.html', users=USERS)


@app.route('/vote', methods=['POST'])
def vote():
    # 处理投票，给票数 +1
    # 用户提交Json数据过来，用request.json获取
    uid = request.json.get('uid')
    USERS[uid]['count'] += 1
    # 投票成功后，给每个用户的Q对象put最新的值进去
    for q in Q_DICT.values():
        q.put(USERS)
    return "投票成功"


@app.route('/get_vote')
def get_vote():
    # 请求进来，从session获取用户的id
    user_id = session.get('user_id')
    # 根据用户的id 获取用户的Q对象
    q = Q_DICT.get(user_id)
    # try:
    #     ret = q.get(timeout=30)
    # except queue.Empty:
    #     ret = ''
    ret = q.get()
    return jsonify(ret)


if __name__ == '__main__':
    app.run()

2、前端代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>投票系统</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
    <script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.js"></script>
</head>
<style>
    .my-li {
        list-style: none;
        margin-bottom: 20px;
        font-size: 18px;
    }
</style>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <h1>最晒男人投票</h1>
            {% for (uid, user) in users.items() %}
                <button class="btn btn-success" onclick="vote({{ uid }})">投票</button>
                <li class="list-group-item-info my-li" id="{{ uid }}">{{ user.name }}目前的票数是: {{ user.count }}</li>
            {% endfor %}
        </div>
    </div>
</div>

<script>
    // 投票
    function vote(uid) {
        // 向后端发送投票请求
        axios.request({
            url: '/vote',
            method: 'post',
            data: {
                uid: uid
            }
        }).then(function (response) {
            console.log(response.data);
        })
    }

    // 获取最新的投票结果
    function get_vote() {
        axios.request({
            url: '/get_vote',
            method: 'get'
        }).then(function (response) {
            // 判断后端的数据是否为空
            if (response.data != '') {
                // 获取到最新的数据
                let users = response.data;
                for (uid in users) {
                    // 根据uid找到每个li标签
                    let liEle = document.getElementById(uid);
                    // 给每个li标签设置最新的数据
                    liEle.innerText = `${users[uid]['name']}目前的票数是: ${users[uid]['count']}`
                }
            }
            // 获取完数据后，再发送请求，看还有没有人投票，有的话再去获取最新的数据
            get_vote()
        });
    }

    // 页面加载完后，立刻获取数据
    window.onload = function () {
        get_vote()
    }

</script>

</body>
</html>

3、长轮询

特点：满足实时更新
缺点：消耗大
实现：
　　利用queue对象实现请求夯住
　　每个请求进来都要生成一个q对象
　　如果有人投票给所有的q对象put数据
　　拿数据请求从自己的q对象get数据

三、websocket

1、介绍

http协议
　　短连接无状态基于TCP/UDP协议进行传输数据(TCP/UDP: 传输协议)

socket
　　socket不是传输协议跟websocket是两个完全不一样的东西 socket是套接字 API接口

websocket
　　H5出的新协议浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输
　　解决轮询问题
　　特点：
　　　　1. 握手基于HTTP进行握手(因此websocket与Http有一定的交集，但不是同一个东西)
　　　　2. 发送数据加密
　　　　3. 保持连接不断开

2、在Flask中使用websocket

1. Flask没有websocket,需要安装包  pip install gevent-websocket


2. 后端怎样建立一个支持websocket协议连接
from geventwebsocket.handler import WebSocketHandler
from gevent.pywsgi import WSGIServer

# 拿到websocket对象
ws = request.environ.get("wsgi.websocket")
# 后端发送数据
ws.send(xxx)
# 后端接收数据
ws.receive()

if __name__ == '__main__':
    # app.run()
    # 即支持HTTP 也支持websocket
    http_server = WSGIServer(('0.0.0.0', 5000), app, handler_class=WebSocketHandler)
    http_server.serve_forever()


3. 前端怎么发起websocket连接
let ws = new WebSocket("ws://127.0.0.1:5000")
# 前端发送数据
ws.send("xxx")
# 前端接收数据
ws.onmessage = function(event){
    # 从接受的对象中获取数据       
    let data = event.data
}


4. 收发消息
1, 前端发送数据给后端
    前端发送：ws.send('数据')
    后端接收：ws.receive()
    

2, 后端发送数据给前端
    后端发送：ws.send('数据')
    前端接收的是对象：ws.onmessage = function(event){
        let data = event.data
    }

3、Demo

from flask import Flask, render_template, request
from geventwebsocket.handler import WebSocketHandler
from gevent.pywsgi import WSGIServer
import json


app = Flask(__name__)

USERS = {
    1: {'name': '小米', 'count': 300},
    2: {'name': '小康', 'count': 200},
    3: {'name': '小明', 'count': 600},
}

WEBSOCKET_LIST = []


@app.route('/')
def index():
    return render_template('websocket.html', users=USERS)


@app.route('/vote')
def vote():
    # 处理websocket
    # 判断是什么类型的请求，HTTP还是websocket
    # 看能否获取得到websocket的对象
    ws = request.environ.get("wsgi.websocket")
    if not ws:
        return "这是HTTP协议的请求"
    # 把所有用户的ws对象存到一个列表
    WEBSOCKET_LIST.append(ws)
    while True:
        # 获取前端传过来的uid，给打野票数 +1
        uid = ws.receive()
        # 如果前端主动断开连接
        # 那么后端也关闭与前端的连接
        if not uid:
            WEBSOCKET_LIST.remove(ws)
            ws.close()
            break
        uid = int(uid)
        USERS[uid]["count"] += 1
        data = {
            "uid": uid,
            "name": USERS[uid]["name"],
            "count": USERS[uid]["count"]
        }
        for ws in WEBSOCKET_LIST:
            # 给前端发送新的数据
            ws.send(json.dumps(data))


if __name__ == '__main__':
    # app.run()
    # 这样启服务的意思是：即支持HTTP协议，也支持websocket协议
    http_server = WSGIServer(('127.0.0.1', 5000), app, handler_class=WebSocketHandler)
    http_server.serve_forever()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>投票系统</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
    <script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.js"></script>
</head>
<style>
    .my-li {
        list-style: none;
        margin-bottom: 20px;
        font-size: 18px;
    }
</style>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <h1>最晒男人投票</h1>
            {% for (uid, user) in users.items() %}
                <button class="btn btn-success" onclick="vote({{ uid }})">投票</button>
                <li class="list-group-item-info my-li" id="{{ uid }}">{{ user.name }}目前的票数是: {{ user.count }}</li>
            {% endfor %}
        </div>
    </div>
</div>

<script>
    // 向后端发送一个websocket连接请求
    let ws = new WebSocket('ws://127.0.0.1:5000/vote');
    function vote(uid) {
        // 向后端发数据
        ws.send(uid)
    }
    ws.onmessage = function (event) {
        let data = JSON.parse(event.data);
        let liEle = document.getElementById(data.uid);
        liEle.innerText = `${data.name}目前的票数是: ${data.count}`
    }
</script>

</body>
</html>

标签：__,websocket,uid,get,轮询,ws,vote,name
From： https://www.cnblogs.com/mengdie1978/p/17400769.html

轮询、长轮询、websocket

轮询、长轮询、websocket

一、轮询

1、后端代码

2、前端代码

3、轮询

二、长轮询

1、后端代码

2、前端代码

3、长轮询

三、websocket

1、介绍

2、在Flask中使用websocket

3、Demo

相关文章

赞助商

阅读排行