【flask】flask_socketIO总结

前端

使用socket.io.min.js是node.js的一个websocket库。首先创建socket, emit是向后端发送消息, message是该条消息的名称,后面是发送消息的数据。on是注册接受消息的事件,获取后端传过来的数据。namespace为websocket的命名空间,可理解为可与此类的namespace进行通信。当连接成功时,会触发connect事件,连接关闭时,触发disconnect事件。

namespace = "/wechat"
var socket = io.connect('http://' + document.domain + ':' + location.port + namespace);
socket.emit("message", {"data": "zhangsan"})
socket.on('connect', function (data) {
    socket.emit('message', {'data': 'I\'m connected!'});
});
socket.on('disconnect', function (data) {
    socket.emit('message', {'data': 'I\'m disconnected!'});
});

后端

send 和 emit区别,send发送的是无命名的数据,而emit是发送有命名的数据。on是注册接收前端消息的方法,message是指接收的信息的名称,和前端对应。namespace是指一类的消息,和前端对应。emit是指向前端发送消息,对应的消息的名称、数据和namespace。默认的两个事件,connect和disconnect,当websocket连接成功和失败时,自动触发这两个事件。

  示例代码

# socketIO.py
from flask import Flask, render_template
from flask_socketio import SocketIO

app = Flask(__name__)
app.config['SECRET_KEY'] = 'secret!'
socketio = SocketIO(app)
@app.route('/')
def index():
    return render_template('socketIO.html')
    
@socketio.on('message', namespace="/wechat")
def handle_message(message):
    print('received message: ' + message['data'])
    socketio.emit("response", {'age': 18},namespace="/wechat")
    
@socketio.on('connect', namespace="/wechat")
def connect():
    print("connect..")
    
@socketio.on('disconnect', namespace="/wechat")
def connect():
    print("disconnect...")

@app.route('/push')
def push():
    event_name = "eventname"
    data = {'data':"test message!"}
    socketio.emit(event_name, data, namespace="/wechat")
    return "OK!"

if __name__ == '__main__':
    socketio.run(app, port=8080)
# socketIO.html
<html>
<head>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.4.0.min.js"></script>
    <script type="text/javascript"
            src="//cdnjs.cloudflare.com/ajax/libs/socket.io/3.1.0/socket.io.min.js"></script>
</head>
<body>
<h1>Demo of SocketIO</h1>
<div id="t"></div>
<script type="text/javascript" charset="utf-8">
    $(document).ready(function () {
        namespace = "/wechat"
        var socket = io.connect('http://' + document.domain + ':' + location.port + namespace);
        socket.emit("message", {"data": "zhangsan"})

        socket.on('connect', function (data) {
            socket.emit('message', {'data': 'I\'m connected!'});
        });

        socket.on('disconnect', function (data) {
            socket.emit('message', {'data': 'I\'m disconnected!'});
        });

        socket.on('response', function (data) {
            console.log(data.age)
        });

        socket.on('eventname', function (data) {
            var t = data.data;
            if (t){
                $("#t").append(t).append('<br/>')
            }
        });
    });
</script>
</body>
</html>

 运行socketIO.py文件,浏览器打开127.0.0.1:8080即可访问。

运行结果如下:

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值