使用 Flask 和 Server-Sent Events 构建轻量级的实时 Web 应用-JavaScript中文网-JavaScript教程资源分享门户

在现代 Web 应用中，实时性已经成为了一个非常重要的需求。通过实时更新数据，应用可以更加及时地反映用户的操作，提供更加流畅的体验。在本文中，我们将介绍如何使用 Flask 和 Server-Sent Events 构建一个轻量级的实时 Web 应用。

Flask 简介

Flask 是一个 Python Web 应用框架，它提供了一组简单而灵活的工具，帮助我们构建 Web 应用。Flask 的设计理念是“micro”，即微框架。这意味着 Flask 提供的工具非常基础，但是可以通过插件扩展来满足更加复杂的需求。

Server-Sent Events 简介

Server-Sent Events 是一种 Web 技术，它允许服务器向客户端推送事件。与传统的轮询相比，Server-Sent Events 更加高效，因为它不需要客户端不断地向服务器发送请求。Server-Sent Events 可以用于实现实时更新数据的功能。

构建实时 Web 应用

我们将使用 Flask 和 Server-Sent Events 来构建一个实时 Web 应用。具体来说，我们将实现一个简单的聊天室应用，用户可以在聊天室中发送消息，并且所有在线的用户都可以实时地看到新的消息。

1. 安装 Flask

首先，我们需要安装 Flask。可以使用 pip 命令来安装：

pip install Flask

2. 创建 Flask 应用

接下来，我们创建一个 Flask 应用。在项目根目录下创建一个名为 app.py 的文件，并写入以下内容：

// javascriptcn.com 代码示例
from flask import Flask, render_template, request, jsonify

app = Flask(__name__)

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

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

这段代码创建了一个名为 app 的 Flask 应用，并定义了一个路由 /，当用户访问根路径时返回一个名为 index.html 的模板。if __name__ == '__main__': 判断是为了确保只有在直接运行 app.py 时才启动 Flask 应用。

3. 创建前端页面

接下来，我们需要创建一个前端页面，让用户可以在页面上发送消息。在项目根目录下创建一个名为 templates 的文件夹，并在其中创建一个名为 index.html 的文件，写入以下内容：

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
  <head>
    <title>Chat Room</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  </head>
  <body>
    <h1>Chat Room</h1>
    <div id="messages"></div>
    <input type="text" id="message-input">
    <button id="send-button">Send</button>

    <script>
      var messageInput = document.getElementById('message-input');
      var sendButton = document.getElementById('send-button');
      var messagesDiv = document.getElementById('messages');

      sendButton.onclick = function() {
        var message = messageInput.value;
        $.ajax({
          url: '/send-message',
          type: 'POST',
          data: JSON.stringify({ message: message }),
          contentType: 'application/json',
          success: function(response) {
            messageInput.value = '';
          }
        });
      };

      var source = new EventSource('/stream');
      source.onmessage = function(event) {
        var message = JSON.parse(event.data);
        messagesDiv.innerHTML += message + '<br>';
      };
    </script>
  </body>
</html>

这段代码创建了一个简单的聊天室页面，包括一个消息输入框、一个发送按钮和一个消息列表。当用户点击发送按钮时，页面会向服务器发送一个 POST 请求，请求的路由为 /send-message，并且发送的数据为一个 JSON 对象，包含一个名为 message 的字段。当服务器有新的消息时，会通过 Server-Sent Events 推送到客户端，并在页面上显示。

4. 处理消息发送请求

接下来，我们需要处理来自客户端的消息发送请求。在 app.py 文件中添加以下代码：

messages = []

@app.route('/send-message', methods=['POST'])
def send_message():
    message = request.json.get('message')
    messages.append(message)
    return jsonify(success=True)

这段代码定义了一个名为 messages 的列表，用于保存所有的聊天消息。当客户端发送消息时，服务器会将消息保存到 messages 列表中，并返回一个 JSON 对象，表示消息发送成功。

5. 推送实时消息

最后，我们需要使用 Server-Sent Events 推送实时消息。在 app.py 文件中添加以下代码：

// javascriptcn.com 代码示例
import time

@app.route('/stream')
def stream():
    def event_stream():
        while True:
            if messages:
                yield 'data: {}\n\n'.format(messages[-1])
            time.sleep(1)

    return app.response_class(event_stream(), mimetype='text/event-stream')

这段代码定义了一个名为 stream 的路由，当客户端请求该路由时，服务器会返回一个 text/event-stream 类型的响应，表示这是一个 Server-Sent Events 流。在 event_stream 函数中，服务器会不断地检查 messages 列表是否有新的消息，如果有，则通过 Server-Sent Events 推送到客户端。

运行应用

现在，我们已经完成了实时 Web 应用的构建。在命令行中进入项目根目录，运行以下命令启动应用：

python app.py

然后在浏览器中访问 http://localhost:5000，就可以看到聊天室页面了。在页面中输入消息并点击发送按钮，就可以实时地向其他在线用户发送消息了。

总结

在本文中，我们介绍了如何使用 Flask 和 Server-Sent Events 构建一个轻量级的实时 Web 应用。通过这个应用，我们学习了如何使用 Flask 创建 Web 应用、如何使用 Server-Sent Events 推送实时消息。希望这篇文章可以对你有所帮助，也希望你可以将这些知识应用到实际的项目中。完整的代码示例可以在 GitHub 上查看。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6563c03ad2f5e1655dd39945