Andy's blog

最近看到可能会有这种需要实时消息的需求，至于后面会不会用到还不一定，就利用周末看看，写了个简单的示例。

记得以前写过django的版本，用的应该是channels，据说django3.0已经默认支持websocket了，但没去了解。 django版的旧例：https://github.com/Andy963/wechat.git

下面是flask socketio版本的： index.html 客户端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>
        flask socketio demo
    </title>
    <script src="https://cdn.bootcss.com/jquery/3.2.0/jquery.js">
    </script>
    <script crossorigin="anonymous" integrity="sha256-yr4fRk/GU1ehYJPAs8P4JlTgu0Hdsp4ZKrx8bDEDC3I="
            src="//cdnjs.cloudflare.com/ajax/libs/socket.io/2.2.0/socket.io.js">
    </script>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"
            integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
            crossorigin="anonymous"></script>
    </meta>
</head>
<body>
<h3>
    <h3>flask socketio demo</h3>
    <div>
        <label for="time">当前时间</label>
        <input id="time" disabled>
    </div>

    <form action="#">
        <label>发送信息</label>
        <input name="message" id="send">
        <button id="submit">提交</button>
    </form>
    <form action="#">
        <label>收到消息</label>
        <input name="res_msg" id="res">
    </form>
</h3>
<script>
    // 初始化连接
    var socket = io.connect('http://127.0.0.1:5000/test');

    socket.on('connect', function () {
        // 连接事件
    });

    $("#submit").click(function (event) {
        // 将要发送的消息发送给my event事件
        event.preventDefault();
        socket.emit('my event', {data: $("#send").val()})
    });

    socket.on('my event', function (message) {
        // 将接收到的消息写入到接收消息的框中
        var data = message.data;
        $("#res").val(data);

        //同时触发了timer事件，但消息为空，目的是让服务端返回时间，这个事件一直在继续，达到同步时间显示
        socket.emit('timer', {data: ''})
    });

    socket.on('timer', function (message) {
        // 服务端发送回来的时间字符串在网页上显示出来，同时又发送空消息继续触发服务端的timer事件
        $("#time").val(message.data);
        socket.emit('timer', {data: ''})
    })

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

服务端：flask

from flask import Flask, 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('index.html')


@socketio.on('connect', namespace='/test')
def test_connect():
    # connect是事件名，namespace是命名空间
    print('建立连接...connect')


@socketio.on('timer', namespace='/test')
def sync_time(message):
    # time 是另一个事件，这里返回当前时间字符串
    from datetime import datetime
    now_str = datetime.now().strftime('%Y-%m-%d %H:%M:%S')
    emit('timer', {'data': now_str})


@socketio.on('my event', namespace='/test')
def test_message(message):
    # my event事件 将client发送过来的信息原路返回
    print('get message', message['data'])
    emit('my event', {'data': message['data']})


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


if __name__ == '__main__':
    socketio.run(app, debug=True)

其实flask socketio还支持聊天室，广播等功能，用到时再去了解吧，本篇的目的是了解基本的使用，原理。本篇github地址：

Flask socketio简单示例