如何让后端的回复在前端实时显示

我做了一个poe逆向的chatgpt网站
这是python后端代码；

from flask import Flask, render_template, request, jsonify
import logging
import sys
import poe
poe.logger.setLevel(logging.INFO)
app = Flask(__name__)

@app.route('/sendMessage')
def send_message():
    message = request.args.get('message')
    print(message)
    botName = request.args.get('botName')
    token = request.args.get('token') or "E47ev1yLsYFCv8M4k3pn5Q%3D%3D"
    client = poe.Client(token, proxy="socks5://127.0.0.1:7890")
    response = client.send_message(botName, message)  
    text = ''
    for msg in response:
        text += msg['text_new']
    return jsonify(text)

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

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

这是前端；

<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Expires" content="0">
    <title>POE Chat Client</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js"></script>
    <style>
        input {
            width: 300px;
        }
        .message {
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <input id="message" placeholder="输入问题">
    <select id="botName">
        <option value="capybara" selected>Sage</option>
        <option value="a2">Claude-instant</option>
        <option value="nutria">Dragonfly</option>
        <option value="a2_100k">Claude-instant-100k</option>
        <option value="beaver">GPT-4</option>
        <option value="chinchilla">ChatGPT</option>
        <option value="a2_2">Claude+</option>
    </select>
    <input id="token" placeholder="输入token">
    <button onclick="sendMessage()">发送</button>
    <div id="response"></div>
    <div id="responseContainer" style="height:200px; overflow:auto;"></div>

    <script>
       async function sendMessage() {
         let message = document.getElementById("message").value;
         let botName = document.getElementById("botName").value;
         let token = document.getElementById("token").value;
         let response = await axios.get('/sendMessage', {
           params: {
             message: message,
             botName: botName,
             token: token
           }
         })
         
           document.getElementById("response").innerHTML = response.data;
         
       }
    </script>
</body>
</html>


想问下要如何让后端的回复在前端实时显示，而不是在回复完成后显示

源于ChatGPT仅供参考
您可以使用WebSocket来实现后端的消息在前端实时显示。WebSocket是 HTML5 新增的协议，它实现了浏览器和服务器之间全双工通信，也就是可以实现服务器主动推送信息给客户端。

具体步骤如下：

1.在前端HTML中添加 WebSocket 相关代码

<script>
    var ws = new WebSocket("ws://localhost:5000/ws");  // 连接到后端WebSocket服务

    ws.onopen = function() {
        console.log("连接成功");
    };

    ws.onmessage = function(evt) {   // 接收到服务器发送的消息后执行的操作
        var responseContainer = document.getElementById('responseContainer');
        responseContainer.innerHTML += '<p>' + evt.data + '</p>';
    };

    ws.onclose = function() {
        console.log("连接关闭");
    };
    
    function sendMessage() {
         let message = document.getElementById("message").value;
         let botName = document.getElementById("botName").value;
         let token = document.getElementById("token").value;

         ws.send(JSON.stringify({     // 将输入框中的消息发送到后端WebSocket服务
             message: message,
             botName: botName,
             token: token
         }));
         
         document.getElementById("response").innerHTML = "正在加载，请稍等...";
       }
</script>

2.在后端Python代码中添加WebSocket相关代码


from flask import Flask, render_template, request, jsonify
from flask_socketio import SocketIO, emit
import logging
import sys
import poe
import json

app = Flask(__name__)
app.config['SECRET_KEY'] = 'secret!'
socketio = SocketIO(app)

@socketio.on('connect')
def test_connect():
    print('Websocket连接成功')

@socketio.on('disconnect')
def test_disconnect():
    print('Websocket连接断开')

@socketio.on('message')   # 接收来自前端的消息
def handleMessage(msg):
    message = msg['message']
    botName = msg['botName']
    token = msg['token'] or "E47ev1yLsYFCv8M4k3pn5Q%3D%3D"
    client = poe.Client(token, proxy="socks5://127.0.0.1:7890")
    response = client.send_message(botName, message)  
    text = ''
    for msg in response:
        text += msg['text_new']
    emit('message', text)  # 发送处理后的消息到前端

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

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

这样就可以实现后端的回复在前端实时显示了,若有帮助希望采纳。

有帮助的话 采纳一下

  1. Flask-SocketIO: 这是一个Flask的插件,可以建立WebSocket连接,用于双向通信。
  2. WebSocket: 是一个网络技术标准,允许在单一TCP连接上进行全双工通信。可以在客户端与服务器之间建立持久连接,并在两端异步传送数据。
    具体实现步骤:
  3. 安装Flask-SocketIO
pip install flask-socketio
  1. 修改Flask app创建时传入的参数
socketio = SocketIO(app)
  1. 定义SocketIO事件处理函数
@socketio.on('connect')
def connect():
    print('Client connected')

@socketio.on('disconnect') 
def disconnect():
    print('Client disconnected')
  1. 在视图函数中发送SocketIO事件
@app.route('/sendMessage')
def send_message():
    # ...
    socketio.emit('response', text)  # 发送response事件及响应文本
    return jsonify(text)
  1. 在前端监听SocketIO事件并更新
<script src="https://cdn.socket.io/4.3/socket.io.min.js"></script>
<script>
  let socket = io();
  socket.on('connect', function() {
    socket.emit('join', 'some room');
  });
  socket.on('response', function(text) {
    document.querySelector('#response').innerText = text;
  });
</script>

监听到response事件后,前端将更新#response元素的文本内容,达到实时显示效果。

不知道你这个问题是否已经解决, 如果还没有解决的话:
  • 这篇博客: chatGPT对于一个python初学者有什么用?中的 一、前言 部分也许能够解决你的问题, 你可以仔细阅读以下内容或者直接跳转源博客中阅读:

    我最近开始学习python，感觉python整体语法啥的还是很好学的，但是正是由于太简单，且我还有多年的java编程基础，便很难沉下心去学习。想到之前看到的一段话：人性总是趋利避害的，做一件事情没有短期、中期、长期的正反馈。不利于一致坚持做下去。 想到之前搞java 的经验：想快速上手java，并对java程序产生兴趣 那就是拿java写出各种各样的小工具，获取短期的正反馈，培养学习Java的兴趣，故我在学习python的时候，也想这样切入，再次感叹python的GUI类库真是太全面，语法使用啥的都很简单，故写了一篇

    python干饭神器—今天吃什么？python告诉你 ，写完以后还是小有成就感，但是想着我这样写的是不是不太正规？会不会代码结构不够规范呢？身边认识的也没有会python的，正在苦思冥想之际，突然刷到一个 chatGPT的相关的推文，这不是巧了吗？😎 我可以让chatGPT 当我的老师，帮我检查我的代码或者给我一个代码示例，同时还可以检验一下chatGPT真的有大家说的那么厉害吗? 一箭双雕岂不是美哉？😎😎😎
  • 以下回答来自chatgpt:

    针对问题，可以使用WebSocket来实现后端的实时回复在前端页面的实时展示。WebSocket是一种在单个TCP连接上进行全双工通信的协议，允许Web应用程序的客户端和服务器进行实时通信，可以在客户端和服务器之间创建持久连接。

    具体步骤如下：

    1. 在前端页面中引入WebSocket对象，建立WebSocket连接：
    var ws = new WebSocket('ws://localhost:8000/');
ws.onmessage = function(event) {
    var message = event.data;
    // 将后端回复展示在前端页面上
    document.getElementById("message").innerHTML = message;
};
    1. 在后端Python代码中启动WebSocket服务，接收来自WebSocket客户端的消息，并将消息实时发送回去：
    import asyncio
import websockets

async def echo(websocket, path):
    async for message in websocket:
        # 处理客户端发送的消息
        response = handle_message(message)
        # 将回复发送给客户端
        await websocket.send(response)

async def start_websocket_server():
    async with websockets.serve(echo, "localhost", 8000):
        await asyncio.Future()

def handle_message(message):
    # 处理客户端发送的消息的逻辑
    return response

if __name__ == '__main__':
    asyncio.run(start_websocket_server())

    以上代码示例仅供参考，具体实现根据实际情况进行调整。

    需要注意的是，WebSocket的通信是基于TCP连接的，所以需要确保客户端和服务器之间的网络连接是稳定的。同时，WebSocket通信中传输的数据需要进行适当的加密和验证，以确保数据的安全性。


如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^