python+html实现轮询长轮询 websocket 服务端+客户端

当我们要实现一个实时投票系统，或者是实时通讯系统，我们的页面数据总需要更新~~

我们不能让用户一直去刷新页面~所以有了轮询，长轮询，以及websock的出现~~

###轮询
既然我想要实时获取后端的数据，那我就每隔2秒给后端发一次请求~~

这种我们就叫轮询~那它会有一些缺点就是存在延时~就算每秒发一次~也会存在一定的延迟~~

我们看下轮询的实现~~

####app.py
```
# by gaoxin
from flask import Flask, render_template, request, jsonify

app = Flask(__name__)

USERS = {
    1: {"name": "苑昊", "count": 0},
    2: {"name": "苑昊2", "count": 0},
    3: {"name": "苑昊3", "count": 0},

}

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

@app.route("/vote", methods=["POST"])
def vote():
    uid = request.json.get("uid")
    USERS[uid]["count"] += 1
    return "投票成功"

@app.route("/get_vote")
def get_vote():
    return jsonify(USERS)

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

```

####client.html
```
<!DOCTYPE html>
<html lang="en">

<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>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.js"></script>

</head>
<body>
<h1>跟老男孩最丑的老师投票</h1>

<ul>
    {% for key, value in users.items()%}
        <li id="{{key}}" onclick="vote({{key}})">{{value.name}} ({{value.count}})</li>
    {% endfor %}
</ul>

function get_vote() {
        axios.request({
            url: "/get_vote",
            method: "GET"
        }).then(function (res) {
             console.log(res)
            for(let key in res.data){
                 let liEle = document.getElementById(key);
                 let username = res.data[key]["name"]
                 let count = res.data[key]["count"]
                 liEle.innerText = `${username} (${count})`
            }
        })
    }

window.onload = function () {
        setInterval(get_vote, 2000)
    }

</script>

</body>
</html>

index.html
```

###长轮询
轮询缺点就是延迟~那么如果前端发送过来请求~如果没有数据的更新~

后端就夯住请求~直到有数据返回或者超时再返回~这样延迟就可以得到很好的解决~~

python中有个queue对象~~ 当我们从这个队列里拿不到值的时候~可以夯住请求的~~~

####queueDemo.py
```
# by gaoxin
import queue
from flask import Flask

app = Flask(__name__)
q = queue.Queue()

@app.route("/get")
def index():
    try:
        val = q.get(timeout=20)
    except queue.Empty:
        val = "超时"
    return val

@app.route("/vote")
def vote():
    q.put("10")
    return "投票成功"

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

queueDemo.py
```
如果我为每个请求都建立一个q对象~~ 
然后夯住他们的请求~有数据更新的时候~给他们的q对象返回值就可以了~

####server.py
```
# by gaoxin
from flask import Flask, render_template, request, jsonify, session
import queue
import uuid

app = Flask(__name__)
app.secret_key = "lajdgia"

USERS = {
    1: {"name": "苑昊", "count": 0},
    2: {"name": "苑昊2", "count": 0},
    3: {"name": "苑昊3", "count": 0},

}
# 为每个用户建立一个q对象
# 以用户的uuid为key 值为q对象
Q_DICT = {}

@app.route("/")
def index():
    user_uuid = str(uuid.uuid4())
    session["user_uuid"] = user_uuid
    Q_DICT[user_uuid] = queue.Queue()
    return render_template("index2.html", users=USERS)

@app.route("/vote", methods=["POST"])
def vote():
    # 投票 循环q对象的dict 给每个q对象返回值
    uid = request.json.get("uid")
    USERS[uid]["count"] += 1
    for q in Q_DICT.values():
        q.put(USERS)
    return "投票成功"

@app.route("/get_vote", methods=["POST", "GET"])
def get_vote():
    # 获取投票结果 去自己的q对象里取值 没有夯住 知道有或者超时返回
    user_uuid = session.get("user_uuid")
    q = Q_DICT[user_uuid]
    try:
        users = q.get(timeout=30)
    except queue.Empty:
        users = ""
    return jsonify(users)

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

app2.py
```

####client.html
```
<!DOCTYPE html>
<html lang="en">

</head>
<body>
<h1>跟老男孩最丑的老师投票</h1>

<ul>
    {% for key, value in users.items()%}
        <li id="{{key}}" onclick="vote({{key}})">{{value.name}} ({{value.count}})</li>
    {% endfor %}
</ul>

function get_votes() {
        axios.request({
            url: "/get_vote",
            method: "POST"
        }).then(function (res) {
             console.log(res);
            if(res.data != ""){
                 for(let key in res.data){
                 let liEle = document.getElementById(key);
                 let username = res.data[key]["name"]
                 let count = res.data[key]["count"]
                 liEle.innerText = `${username} (${count})`
                }
            }
            get_votes()
        })
    }

window.onload = function () {
        get_votes()
    }

</script>

</body>
</html>

index2.html
```

###websocket
websocket是一个协议~~ 协议规定~
连接的时候需要握手~~ 发送的数据需要加密~~ 连接之后不断开~~
Flask不带websocket，我们需要下载~

pip install gevent-websocket

####server.py
```
# by gaoxin
from flask import Flask, request, render_template
from geventwebsocket.handler import WebSocketHandler
from gevent.pywsgi import WSGIServer
import json

app = Flask(__name__)

USERS = {
    1: {"name": "苑昊", "count": 0},
    2: {"name": "苑昊2", "count": 0},
    3: {"name": "苑昊3", "count": 0},

}

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

WEBSOCKET_LIST = []
@app.route("/vote")
def vote():
    ws = request.environ.get("wsgi.websocket")
    if not ws:
        return "HTTP请求"
    WEBSOCKET_LIST.append(ws)
    while True:
        uid = ws.receive()
        if not uid:
            WEBSOCKET_LIST.remove(ws)
            ws.close()
            break
        uid = int(uid)
        USERS[uid]["count"] += 1
        name = USERS[uid]["name"]
        new_count = USERS[uid]["count"]
        for client in WEBSOCKET_LIST:
            client.send(json.dumps({"uid": uid, "name": name, "count": new_count}))

if __name__ == '__main__':
    http_server = WSGIServer(('127.0.0.1', 5000), app, handler_class=WebSocketHandler)
    http_server.serve_forever()

app3.py
```

####client.html
```
<!DOCTYPE html>
<html lang="en">

<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>
    <script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.js"></script>

</head>
<body>
<h1>最丑的男人投票系统</h1>

<ul>
        {% for (key, value) in users.items() %}
            <li onclick="vote({{key}})" id="{{key}}">{{value.name}} ({{value.count}})</li>
        {% endfor%}

</ul>

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>

index3.html
```

python+html实现轮询长轮询 websocket 服务端+客户端

添加新评论

仅有一条评论

关于博主

文章分类

最受欢迎的文章

最近回复

其它

python+html实现 轮询 长轮询 websocket 服务端+客户端

添加新评论

仅有一条评论

关于博主

文章分类

最受欢迎的文章

最近回复

其它

python+html实现轮询长轮询 websocket 服务端+客户端