flask上使用websocket

Flask-SocketIO服务端

安装Flask-Sockets很容易：

pip install flask-socketio

注意Flask-SocketIO依赖gevent库，目前它仅可以在python2上运行（译者注：python3.6测试也可以）。gevent很快也会对python3支持。

下面是一个Flask-SocketIO在Flask应用上的实现例子：

from flask import Flask, request, jsonify,render_template
from flask_socketio import SocketIO, emit


app = Flask(__name__)
app.config['SECRET_KEY'] = 'secret!'
socketio = SocketIO(app)


@app.route('/')
def index():
    return render_template('test.html')

#触发事件my event：回复只发送此连接
@socketio.on('my_event', namespace='/chat')
def test_message(message):
    print(message)
    emit('my_response', {'data': message['data']})


#触发事件my broadcast event：：回复所有链接（广播）
@socketio.on('my_broadcast event', namespace='/chat')
def test_message(message):
    print(message)
    emit('my_response', {'data': message['data']}, broadcast=True)

##################################################################
#自动连接和自动断开触发
@socketio.on('connect', namespace='/chat')
def test_connect():
    print("连接到来")
    emit('my_response', {'data': 'Connected'})

@socketio.on('disconnect', namespace='/chat')
def test_disconnect():
    print("连接断开")
    print('Client disconnected')

if __name__ == '__main__':
    socketio.run(app,host='0.0.0.0',port=8200,debug=True)

对应的test.html,注意一个问题：flask是从与启动文件同级的templates查找模板的。

<!DOCTYPE HTML>
<html>
<head>
    <title>Flask-SocketIO Test</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/socket.io/2.2.0/socket.io.js" integrity="sha256-yr4fRk/GU1ehYJPAs8P4JlTgu0Hdsp4ZKrx8bDEDC3I=" crossorigin="anonymous"></script>
    <script type="text/javascript" charset="utf-8">
            $(document).ready(function(){
         var socket = io.connect('http://' + document.domain + ':' + location.port + '/chat');
             socket.on('my_response', function(msg) {
                 $('#log').append('<p>Received: ' + msg.data + '</p>');
        });

            $('form#emit').submit(function(event) {
                socket.emit('my_event', {data: $('#emit_data').val()});
                return false;
            });

            $('form#broadcast').submit(function(event) {
                socket.emit('my_broadcast event', {data:$('#broadcast_data').val()});
                return false;
            });

    });
    </script>
</head>
<body>
    <h1>Flask-SocketIO Test</h1>
    <p>Async mode is: <b>{{ async_mode }}</b></p>
    <p>Average ping/pong latency: <b><span id="ping-pong"></span>ms</b></p>
    <h2>Send:</h2>
    <form id="emit" method="POST" action='#'>
        <input type="text" name="emit_data" id="emit_data" placeholder="Message">
        <input type="submit" value="Echo">
    </form>
    <form id="broadcast" method="POST" action='#'>
        <input type="text" name="broadcast_data" id="broadcast_data" placeholder="Message">
        <input type="submit" value="Broadcast">
    </form>

    <form id="disconnect" method="POST" action="#">
        <input type="submit" value="Disconnect">
    </form>
    <h2>Receive:</h2>
    <div id="log"></div>
</body>
</html>

test.html