0

練習用に Flask でチャット アプリケーションを作成しています。ページ全体を更新するだけでなく、新しいチャット メッセージを自動的に取得するには、チャット ページに HTML div が必要です。

私が見つけたものから、サーバー側で作成された JSON ファイルを頻繁に読み取り、AJAX と JQUERY を使用して div のテキストを更新することをお勧めします。ただし、私のコードは GET リクエストを自動的に行っているようには見えません。でchat.html：

<body>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type=text/javascript>
  var $SCRIPT_ROOT = {{ request.script_root|tojson|safe }};
</script>
<script type="text/javascript">
setInterval(
    function()
    {
        $.getJSON(
            $SCRIPT_ROOT+'/_chat_update',
            {
                ChatId: $({{ chatid }}).val()
            },
            function(data)
            {
                $("#chat-main").text(data.updated);
            });

    },
    500);
</script>
<div id="chat-main">
{% for line in chatLines %}
<p>{{ line.sent_by }}: {{ line.line_text }}</p>
{% else %}
<em>there's nothing here...</em>
{% endfor %}
</div>
...

そしてサーバーサイド

@app.route('/c/<chatid>', methods=['POST', 'GET'])
def chat(chatid):
    c = chatid
    thisChat = Chat.query.get(chatid)
    thisUser = User.query.filter_by(user_email=session['signed-in-user']).first()
    chatLines = Line.query.filter_by(chat_line=thisChat).all()
    if request.method == 'POST':
        newLine = Line(published_date=datetime.datetime.utcnow(), chat_line=thisChat, line_author=thisUser, line_text=request.form['newline-input'])
        db.session.add(newLine)
        db.session.commit()
        return redirect(url_for('chat', chatid=c))
    return render_template('chat.html', chatLines=chatLines, chatid=c)

@app.route('/_chat_update')
def chat_update():
    ChatId = request.args.get('ChatId', 0, type=int)
    thisChat = Chat.query.get(ChatId)
    newChatLines=Line.query.filter_by(chat_line=thisChat).all()
    return jsonify(updated=newChatLines)

私が予想していたのは、500 ミリ秒ごとに JSON が取得され/_chat_update、HTML div が結果で更新されることです。後サイトでは、これは JSON が現在のバージョンと異なる場合にのみ発生するはずですが、それはまた別の機会に. 今のところ、1. 私は正しい軌道に乗っており、どこで間違っていたのか、2. そのようなデータベースの追加を有効にするためのより良い方法があるかどうかを考えています. 助けてくれて本当にありがとうございます。

編集

1 秒間に 2 回発生するバグがあるため、上記で実行しようとしている呼び出しに関連している必要があります。それは：

Uncaught TypeError: Cannot call method 'toLowerCase' of undefined  jquery.min.js:1
st.fn.extend.val                                                   jquery.min.js:1
(anonymous function)
4

0 に答える 0