Javascript 数据库更新后是否有刷新页面内容的解决方案？瓶子

我有一个webhook，它接收HTTP请求（POST方法）并将它们放入数据库。我用烧瓶来实现它。请求详情（如ip、正文、内容/类型、日期、方法）需要显示在网页上。我的应用程序执行查询并从数据库中提取数据，并使用render_模板和jinja2显示所有需要的信息。 在收到请求并将其放入数据库后，我希望应用程序在页面上附加一个新的请求详细信息，而无需重新加载

这是我的服务器端代码

routes.py

@app.route('/get_webhook', methods=['POST'])
def webhook():
        uuid_id = uuid4()
        auth = request.authorization
        if auth:
            user_login = auth.username
            user_password = auth.password
        else:
            user_login = user_password = None
        if request.content_type == 'application/json':
            json = request.json
            decoded_xml = None
        elif request.content_type == 'application/xml' or 'text/xml':
            decoded_xml = bytes.decode(request.data, encoding='utf-8')
            json = None
        data_db_input = WebhookRequests(id=uuid_id, method=request.method, json_body=json,
                                            xml_body=decoded_xml, ip=request.remote_addr, content_type=request.content_type,
                                            login=user_login, password=user_password,
                                            user_agent=request.headers.get('User-Agent'))
        db.session.add(data_db_input)
        db.session.commit()
        return 'ok',  200


@app.route('/webhook')
def webhook_main():
    page = request.args.get('page', 1, type=int)
    last_request = WebhookRequests.query.order_by(WebhookRequests.date.desc()).paginate(page, app.config['REQUESTS_PER_PAGE'], False)
    next_page = url_for('webhook_main', page=last_request.next_num) \
        if last_request.has_next else None
    prev_page = url_for('webhook_main', page=last_request.prev_num) \
        if last_request.has_prev else None
    return render_template("index.html", last_request=last_request.items, next_page=next_page, prev_page=prev_page,
                           title='All Webhooks')


@app.route('/webhook/request/<string:id>')
def message_id(id):
    req = WebhookRequests.query.get(id)
    if req is None:
        return render_template("404_request.html", req=id)
    else:
        return render_template("detailed_request.html", req=req)

index.html

{% extends 'base.html' %}


{% block content %}
<script type="text/javascript" charset="utf-8">
    var socket = io();
    namespace = '/test';
    socket.on('connect', function() {
        socket.emit('my event', {data: 'I\'m connected!'});
    });
    socket.on('my response', function(msg) {
        console.log(msg);
    });
</script>



{%for el in last_request %}
<div class="container-fluid">
    <div class="row no-gutters">
  <div class="col-sm-2 border-bottom col-color-bg">
      <a href="/webhook/request/{{el.id}}" class="text-dark text-decoration-none"><div class="row"><p> <span
              class="font-italic badge bg-success">{{el.method}}</span> {{el.ip}}<br>{{ moment(el.date).format('L')}}
          {{ moment(el.date).format('LTS')}}
          <br>{{el.content_type}}</p></div></a>
  </div>
  <div class="col text-dark">
    <p>Raw Content:</p>
    {%if el.content_type == "application/json" %}
    <p>{{el.json_body | tojson}}</p>
    {%else%}
    <p>{{el.xml_body}}</p>
    </div>
    {% endif %}
  </div>
    </div>
        </div>
</div>

{% endfor %}


<nav aria-label="...">
  <ul class="pagination pagination-lg justify-content-center">
      {% if prev_page %}
        <li class="page-item"><a class="page-link" href="{{ prev_page }}">Newer requests</a></li>
      {% else %}
      <li class="page-item disabled"><a class="page-link" href="#">Newer requests</a></li>
      {% endif %}
      {% if next_page %}
        <li class="page-item"><a class="page-link" href="{{ next_page }}">Older requests</a></li>
      {% else %}
      <li class="page-item disabled"><a class="page-link" href="#">Older requests</a></li>
      {% endif %}
  </ul>
</nav>


{% endblock %}

---

该页面只有在收到新请求后才会刷新，其详细信息应与jinja2模板相同。我知道JS或socketIO可能会帮助我，但到目前为止我还不知道如何实现它。

也许可以帮助你了解你需要什么？@Miguel谢谢你的推荐。我在尝试使用Socket.IO时遇到了一些问题。服务器端从客户端接收数据，但当服务器发出一些数据时，它不会以相反的方向工作。我编辑了我的文章并添加了新的代码行（index.html和init.py）

{% extends 'base.html' %}


{% block content %}
<script type="text/javascript" charset="utf-8">
    var socket = io();
    namespace = '/test';
    socket.on('connect', function() {
        socket.emit('my event', {data: 'I\'m connected!'});
    });
    socket.on('my response', function(msg) {
        console.log(msg);
    });
</script>



{%for el in last_request %}
<div class="container-fluid">
    <div class="row no-gutters">
  <div class="col-sm-2 border-bottom col-color-bg">
      <a href="/webhook/request/{{el.id}}" class="text-dark text-decoration-none"><div class="row"><p> <span
              class="font-italic badge bg-success">{{el.method}}</span> {{el.ip}}<br>{{ moment(el.date).format('L')}}
          {{ moment(el.date).format('LTS')}}
          <br>{{el.content_type}}</p></div></a>
  </div>
  <div class="col text-dark">
    <p>Raw Content:</p>
    {%if el.content_type == "application/json" %}
    <p>{{el.json_body | tojson}}</p>
    {%else%}
    <p>{{el.xml_body}}</p>
    </div>
    {% endif %}
  </div>
    </div>
        </div>
</div>

{% endfor %}


<nav aria-label="...">
  <ul class="pagination pagination-lg justify-content-center">
      {% if prev_page %}
        <li class="page-item"><a class="page-link" href="{{ prev_page }}">Newer requests</a></li>
      {% else %}
      <li class="page-item disabled"><a class="page-link" href="#">Newer requests</a></li>
      {% endif %}
      {% if next_page %}
        <li class="page-item"><a class="page-link" href="{{ next_page }}">Older requests</a></li>
      {% else %}
      <li class="page-item disabled"><a class="page-link" href="#">Older requests</a></li>
      {% endif %}
  </ul>
</nav>


{% endblock %}

from flask import Flask
from config import Config
from flask_sqlalchemy import SQLAlchemy
from flask_migrate import Migrate
from flask_bootstrap import Bootstrap
from flask_moment import Moment
from flask_socketio import SocketIO

app = Flask(__name__)
app.config.from_object(Config)
db = SQLAlchemy(app)
migrate = Migrate(app, db)
bootstrap = Bootstrap(app)
moment = Moment(app)
socketio = SocketIO(app)


from app import routes, models, errors


@socketio.on('my event')
def handle_my_custom_event(json):
    print('received json: ' + json['data'])
    socketio.emit('my response', {'data': 'got it'}, namespace='/test')


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