使用flask实现WebSocket

CH_happy

已于 2024-05-29 18:05:40 修改

阅读量615

点赞数 7

文章标签： flask websocket python

于 2024-05-29 18:02:51 首次发布

本文链接：https://blog.csdn.net/CH_happy/article/details/139302473

版权

使用flask实现WebSocket

游览器端HTML代码

游览器接收到服务器的消息后进行的处理

      socket.on('message', (message) => {
            const messagesList = document.getElementById('messagesList');
            const messageItem = document.createElement('li');
            messageItem.textContent = `前端Received: ${message}`;
            messagesList.appendChild(messageItem);
        });

游览器向服务器发送信息的代码

function sendMessage() {
            const messageInput = document.getElementById('messageInput');
            const message = messageInput.value;
       
            socket.send(message);

            const messagesList = document.getElementById('messagesList');
            const messageItem = document.createElement('li');
            messageItem.textContent = `前端Sent: ${message}`;
            messagesList.appendChild(messageItem);

            messageInput.value = '';
        }

详细代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebSocket Client</title>
    <script src="https://cdn.socket.io/4.0.0/socket.io.min.js"></script>
</head>
<body>
    <h1>WebSocket Client</h1>
    <input id="messageInput" type="text" placeholder="Type a message">
    <button onclick="sendMessage()">Send</button>
    <ul id="messagesList"></ul>

    <script>
        const socket = io('http://localhost:5000');

        socket.on('connect', () => {
            console.log('Connected to WebSocket server');
        });
	   
        socket.on('message', (message) => {
            const messagesList = document.getElementById('messagesList');
            const messageItem = document.createElement('li');
            messageItem.textContent = `前端Received: ${message}`;
            messagesList.appendChild(messageItem);
        });

        socket.on('disconnect', () => {
            console.log('Disconnected from WebSocket server');
        });

        function sendMessage() {
            const messageInput = document.getElementById('messageInput');
            const message = messageInput.value;
       
            socket.send(message);

            const messagesList = document.getElementById('messagesList');
            const messageItem = document.createElement('li');
            messageItem.textContent = `前端Sent: ${message}`;
            messagesList.appendChild(messageItem);

            messageInput.value = '';
        }
    </script>
</body>
</html>

服务器端代码

服务器接收到游览器信息时的处理

@socketio.on('message')
def handle_message(message):
    print(f"Received message: {message}")
    send(f"后端已接收: {message}", broadcast=True)

其他模块请求该路由实现向游览器推送特定信息

@app.route('/send_message', methods=['POST'])
def send_message():
    data = request.get_json()
    if not data or 'message' not in data:
        return jsonify({"error": "Invalid request, missing 'message'"}), 400

    message = data['message']
    # 发送后端想发送的信息
    socketio.emit('message', message)
    return jsonify({"status": "message sent"}), 200

后端服务器完整代码

from flask import Flask, request, jsonify
from flask_socketio import SocketIO, send, emit

app = Flask(__name__)
app.config['SECRET_KEY'] = 'secret!'
socketio = SocketIO(app, cors_allowed_origins="*")  # Allow CORS

connected_clients = []


@app.route('/send_message', methods=['POST'])
def send_message():
    data = request.get_json()
    if not data or 'message' not in data:
        return jsonify({"error": "Invalid request, missing 'message'"}), 400

    message = data['message']
    # 发送后端想发送的信息
    socketio.emit('message', message)
    return jsonify({"status": "message sent"}), 200


@socketio.on('connect')
def handle_connect():
    print('Client connected')
    connected_clients.append(request.sid)


@socketio.on('disconnect')
def handle_disconnect():
    print('Client disconnected')
    connected_clients.remove(request.sid)


@socketio.on('message')
def handle_message(message):
    print(f"Received message: {message}")
    send(f"后端已接收: {message}", broadcast=True)


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

测试代码：实现在使用其他模块时调用websocket向游览器发送消息

import requests
import json

if __name__ == '__main__':
    url = 'http://localhost:5000/send_message'
    message = {'message': '后端信息hello'}
    # 将python对象变为json
    json_message = json.dumps(message)
    response = requests.post(url, json=message)