html写一个向flask_socketio发送消息和接收消息并显示在页面上-Toy模板网

这篇具有很好参考价值的文章主要介绍了html写一个向flask_socketio发送消息和接收消息并显示在页面上。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

以下是一个简单的HTML页面，它包含一个输入框、一个发送按钮和一个显示区域。用户可以在输入框中输入消息，点击发送按钮，然后这个消息会被发送到 Flask-SocketIO 服务器。当服务器回应消息时，它会在页面的显示区域显示出来。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flask-SocketIO Chat</title>
    <!-- Import the Socket.IO client library -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js"></script>
    <script type="text/javascript">
        document.addEventListener("DOMContentLoaded", function() {
            const socket = io.connect('http://localhost:5000');
            const messagesDiv = document.getElementById('messages');
            const inputElem = document.getElementById('messageInput');
            const buttonElem = document.getElementById('sendButton');

            // Listen for a 'response' event from the server
            socket.on('response', function(msg) {
                const pElem = document.createElement('p');
                pElem.innerText = msg.data;
                messagesDiv.appendChild(pElem);
            });

            // Send the input message to the server on button click
            buttonElem.addEventListener('click', function() {
                const message = inputElem.value;
                socket.emit('send_message', {data: message});
                inputElem.value = ''; // Clear the input
            });
        });
    </script>
</head>
<body>
    <h1>Flask-SocketIO Chat</h1>
    <input type="text" id="messageInput" placeholder="Type your message here...">
    <button id="sendButton">Send</button>
    <div id="messages"></div>
</body>
</html>

此外，Flask-SocketIO 服务器端代码可以处理客户端发送的 send_message 事件，并返回一个 response 事件。例如：

from flask import Flask
from flask_socketio import SocketIO

app = Flask(__name__)
socketio = SocketIO(app)

@socketio.on('send_message')
def handle_message(message):
    print('Received message:', message['data'])
    socketio.emit('response', {'data': 'Server received: ' + message['data']})

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