📜  flask socketio 使用 javascript (1)

📅  最后修改于: 2023-12-03 15:30:47.038000             🧑  作者: Mango

在 Flask 中使用 SocketIO

简介

Flask 是一个轻量级的 Web 框架,而 SocketIO 是一个用于实时应用程序的库。在这篇文章中,我们将会学习如何在 Flask 中使用 SocketIO,以便于构建实时应用程序。

安装

要在 Flask 中使用 SocketIO,可以通过 pip 命令安装 Flask 和 Flask-SocketIO:

pip install Flask Flask-SocketIO
提供基本应用程序

首先,让我们创建一个简单的 Flask 应用程序。创建一个名为 app.py 的新文件,并使用以下代码添加一个基本的 Flask 应用程序。

from flask import Flask, render_template

app = Flask(__name__)

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

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

此应用程序将在根路径上呈现 index.html 模板。我们还需要创建一个名为 index.html 的新文件,它将作为基本 HTML 模板。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Flask SocketIO</title>
</head>
<body>
    
</body>
</html>

现在启动 Flask 应用程序,并在浏览器中导航到 http://localhost:5000/,应该显示一个空白页面。这意味着我们已经成功设置了一个基本的 Flask 应用程序。

初始化 SocketIO

现在,我们将初始化 Flask-SocketIO 并将其添加到应用程序中。在 Flask 应用程序的顶部添加以下内容。

from flask_socketio import SocketIO

socketio = SocketIO(app)

这将通过 SocketIO 进行创建,使用 Flask 应用程序 get_app() 函数。我们还需要将 SocketIO 作为一个全局参数传递给 render_template 函数。

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

此时的应用程序现在已经配置好在单页应用程序中使用 SocketIO。

在 JavaScript 中使用 SocketIO

现在,我们需要在 JavaScript 中启用 SocketIO,并确保它能够连接到我们的 Flask 应用程序。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Flask SocketIO</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.min.js"></script>
    <script>
        var socket = io.connect('http://' + document.domain + ':' + location.port);
    </script>
</head>
<body>

</body>
</html>

在 中添加上述代码,它将加载 SocketIO 并启用连接到我们的 Flask 应用程序。

测试连接是否建立。在 JavaScript 中添加以下代码:

socket.on('connect', function() {
    console.log('Connected!');
});

在控制台输出 Connected! 表示我们的连接建立成功。

结论

通过这篇文章,我们已经了解了如何在 Flask 中使用 SocketIO。在接下来的内容中,我们将学习如何使用 SocketIO 处理实时通信。