python之轮询、长轮询、websocket

轮询

ajax轮询，ajax轮询的原理非常简单，让浏览器隔个几秒就发送一次请求，询问服务器是否有新信息。

1、后端代码

from flask import Flask,render_template

app = Flask(__name__)

UUUU = {
    '1':{'name':'王','count':1},
    '2':{'name':'李','count':1},
    '3':{'name':'赵','count':1},
}


@app.route('/index')
def index():
    return render_template('index.html',user_list = UUUU)

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

2、前端代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>最帅的</title>
</head>
<body>
    <ul>
        {% for k,v in user_list.items() %}
            <li>{{k}}: {{v.name}} {{v.count}} </li>
        {% endfor %}
    </ul>
    <script>
        # 重点2秒重新请求
        function reload() {
            window.location.reload()
        }
        setInterval(reload,2000)

    </script>
</body>
</html>

长轮询

long poll 其实原理跟 ajax轮询差不多，都是采用轮询的方式，不过采取的是阻塞模型（一直打电话，没收到就不挂电话），也就是说，客户端发起连接后，如果没消息，就一直不返回Response给客户端。直到有消息才返回或超时，返回完之后，客户端再次建立连接，周而复始，基于事件的触发，一个事件接一个事件。

Ajax轮询与long poll都属于不断发送http请求，然后等待服务器处理，可以看到http协议一个特点，被动性，服务端不能主动联系客户端，只有客户端发起。

缺点：Ajax轮询需要服务器有很快的处理速度与快速响应。long poll需要很高的并发，体现在同时容纳请求的能力。

1、后端代码

from flask import Flask,render_template,request,session,redirect,jsonify
from uuid import uuid4
from queue import Queue,Empty
import json
app = Flask(__name__)
app.secret_key = "asdfasdfasdf"
UUUU = {
    '1':{'name':'王','count':1},
    '2':{'name':'李','count':1},
    '3':{'name':'赵','count':1},
}

# 为每个登录用户保存
# dfasdfadsfasdfadf: Queue()
USER_QUEUE_DICT = {

}

@app.before_request
def check_login():
    if request.path == '/login':
        return None
    user_info = session.get('user_info')
    if not user_info:
        return redirect('/login')

@app.route('/login',methods=['GET','POST'])
def login():
    if request.method == "GET":
        return render_template('login.html')
    else:
        user = request.form.get('user')
        nid = str(uuid4())
        USER_QUEUE_DICT[nid] = Queue()
        session['user_info'] = {'nid':nid, 'user':user }
        return redirect('/index')


@app.route('/index')
def index():
    return render_template('index.html',user_list = UUUU)

@app.route('/query')
def query():
    """每个用户查询最新投票信息"""
    ret = {'status':True,'data':None}
    current_user_nid = session['user_info']['nid']
    queue = USER_QUEUE_DICT[current_user_nid]
    try:
        # {'uid':1, 'count':6}
        ret['data'] = queue.get(timeout=10) #十秒后断开，再连
    except Empty as e:
        ret['status'] = False
    # return jsonify(ret)
    return json.dumps(ret)


@app.route('/vote')
def vote():
    """
    用户投票
    :return:
    """
    uid = request.args.get('uid')
    old = UUUU[uid]['count']
    new = old + 1
    UUUU[uid]['count'] = new

    for q in USER_QUEUE_DICT.values():
        q.put({'uid':uid, 'count':new})

    return "投票成功"


if __name__ == '__main__':
    app.run(host='0.0.0.0',threaded=True)

2、前端代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>最帅</title>
</head>
<body>
    <ul>
        {% for k,v in user_list.items() %}
            <li style="cursor: pointer;" ondblclick="doVote('{{k}}')" id="user_{{k}}">{{k}}: {{v.name}} <span>{{v.count}}</span> </li>
        {% endfor %}
    </ul>
    <!--<script src="/static/jquery-1.12.4.js"></script>-->
    <script src="{{ url_for('static',filename='jquery-1.12.4.js') }}"></script>
    <script>
        
        $(function () {
            get_data();
        })
        
        /*
        查询最新信息
         */
        function get_data() {
            $.ajax({
                url: '/query',
                type:'GET',
                dataType:'json',
                success:function (arg) {
                    if(arg.status){
                        var liId = "#user_" + arg.data.uid;
                        $(liId).find('span').text(arg.data.count);
                    }
                    get_data();
                }
                
            })
        }

        /*
        投票
         */
        function doVote(uid) {
            $.ajax({
                url:'/vote', //     /vote?uid=1
                type:'GET',
                data:{
                    uid:uid
                },
                success:function (arg) {

                }
            })
        }
    </script>
</body>
</html>

websocket

webSocket是html5一种新的协议，实现了浏览器与服务器之间的全双工通信，能很好的节省服务器资源与带宽，并在服务器端与浏览器端实现实时通行，他建立在TCP之上，同http一样，通过tcp来传输数据。

只需要一次HTTP握手，所以说整个通讯过程是建立在一次连接/状态中，服务器端会知道连接的信息，知道客户端关闭请求，同时由服务器主动推送，当有信息需要发送时，直接发送。客户端的连接通过session对象存储，能够实现实时推送。

1、安装

pip3 install gevent-websocket

2、后端代码

from flask import Flask,render_template,request,session,redirect,jsonify
import uuid
from geventwebsocket.handler import WebSocketHandler
from gevent.pywsgi import WSGIServer
import json


app = Flask(__name__)
app.secret_key = 'xfsdfqw'

USERS = {
    '1':{'name':'王','count':0},
    '2':{'name':'李','count':0},
    '3':{'name':'赵','count':0},
}


@app.before_request
def before_request():
    if request.path == '/login':
        return None
    user_info = session.get('user_info')
    if user_info:
        return None
    return redirect('/login')


@app.route('/login',methods=['GET','POST'])
def login():
    if request.method == "GET":
        return render_template('login.html')
    else:
        uid = str(uuid.uuid4())
        session['user_info'] = {'id':uid,'name':request.form.get('user')}
        return redirect('/index')


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

# 为每个登录用户保存socket字典
WS_DICT = {

}

@app.route('/message')
def message():
    if request.environ.get('wsgi.websocket'):
        ws = request.environ['wsgi.websocket']
        # 1. 刚连接成功
        uid = session.get('user_info').get('id')
        WS_DICT[uid] = ws

        from geventwebsocket.websocket import WebSocket
        while True:
            # 2. 等待用户发送消息，并接受
            message = ws.receive()
            # 关闭：message=None
            if not message:
                del WS_DICT[uid]
                break

            old = USERS[message]['count']
            new = old + 1
            USERS[message]['count'] = new

            data = {'user':message,'count':new}

            for k,v in WS_DICT.items():
                # 3. 向客户端推送消息
                v.send(json.dumps(data))

    return "Connected!"

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

3、前端代码

#login
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form method="post">
    <input type="text" name="user">
    <input type="submit" value="提交">
</form>
</body>
</html>

# index
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>投票系统</h1>
    <a onclick="closeConn();">关闭连接</a>
    <a onclick="createConn();">创建连接</a>
    <ul>
        {% for k,v in users.items() %}
            <li id="user_{{k}}"  ondblclick="vote('{{k}}')">{{v.name}} <span>{{v.count}}</span> </li>
        {% endfor %}

    </ul>

    <script src="{{ url_for('static',filename='jquery-3.3.1.min.js')}}"></script>
    <script>

        var socket = null;

        function socketInit() {
            socket.onopen = function () {
            /* 与服务器端连接成功后，自动执行 */
        };

            socket.onmessage = function (event) {
                /* 服务器端向客户端发送数据时，自动执行 */
                var response = JSON.parse(event.data); // {'user':1,'count':new}
                var nid = '#user_' + response.user;
                $(nid).find('span').text(response.count)
            };

            socket.onclose = function (event) {
                /* 服务器端主动断开连接时，自动执行 */
            };

        }

        /*
        我要投票
        id：帅哥id
         */
        function vote(id) {

            socket.send(id);
        }

        function closeConn() {
            socket.close()
        }
        function createConn() {
            socket = new WebSocket("ws://127.0.0.1:5000/message");
            socketInit();
        }
    </script>
</body>
</html>

python之轮询、长轮询、websocket

轮询

长轮询

websocket

猜你喜欢