flask框架实现websocket

最新推荐文章于 2024-04-08 09:38:02 发布

啥啥都喜欢

最新推荐文章于 2024-04-08 09:38:02 发布

阅读量387

点赞数 1

本文链接：https://blog.csdn.net/m0_53707852/article/details/130323820

版权

本篇文章使用flask框架实现websocket。

配置：

1.python3.8

2.flask 2.2.2

3.flask-socketIO 5.1.0

文件结构：

app.py文件代码：

# -*- coding: UTF-8 -*-
# 请看下面代码
import random
import time

from flask import Flask
from flask_socketio import SocketIO, emit

app = Flask(__name__)
socket = SocketIO(app, cors_allowed_origins='*') # 第二个参数解决跨域问题


@socket.on('c', namespace='/test')
def c(data):
    print('连接成功')
    print(f'从前端传来的信息:{data}')


@socket.on('wx', namespace='/test')
def wx(data):
    print(data)
    while 1:
        emit('message', random.randint(0, 100), broadcast=True)
        time.sleep(1)


if __name__ == '__main__':
    socket.run(app, port=5000, debug=True)

index.html文件内容：

引入的socketIO和jquery请自行下载！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <script src="socket.io-3.1.2.js"></script>
    <script src="jquery.js"></script>
</head>
<body>
<ul id="text"></ul>
<script>
    var url = 'http://127.0.0.1:5000/test';
    var socket = io.connect(url);

    socket.emit('c', '请求连接...');

    socket.emit('wx', '请求数据...');

    socket.on('message', function (data) {
        console.log('从后端传递过来的数据：' + data);
        $('#text').append('<li>' + data + '</li>');
    });

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

实现效果：

先运行app.py文件