Flask WebSocket 跨域访问示例：实现与客户端交互

Flask 实现支持跨域访问的 WebSocket 示例

本示例演示如何使用 Flask 和 SocketIO 实现一个支持跨域访问的 WebSocket 服务，并提供客户端代码示例。通过 WebSocket，服务器和客户端可以进行实时双向通信。

服务器端代码

from flask import Flask, render_template
from flask_socketio import SocketIO, emit

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

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

@socketio.on('connect')
def test_connect():
    emit('my_response', {'data': 'Connected'})

@socketio.on('disconnect')
def test_disconnect():
    print('Client disconnected')

@socketio.on('my_event')
def handle_my_custom_event(json):
    print('Received message: ' + str(json))
    socketio.emit('my_response', json)

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

客户端代码

<!doctype html>
<html>
  <head>
    <title>Flask-SocketIO Example</title>
    <script src='https://cdn.socket.io/4.0.1/socket.io.min.js' integrity='sha384-9sKsRZ1s/6Lirg6TfT6U2jKU3q6l2Ssu9XWl1clrvDfHFi6SoE4n4bF4YhYm4KzL' crossorigin='anonymous'></script>
    <script src='//code.jquery.com/jquery-1.11.1.js'></script>
  </head>
  <body>
    <script type='text/javascript'>
      var socket = io('http://localhost:5000');
      socket.on('connect', function() {
        socket.emit('my_event', {data: 'Connected'});
      });
      socket.on('my_response', function(msg) {
        console.log(msg.data);
      });
    </script>
  </body>
</html>

解释：

服务器端使用 SocketIO 库，设置 cors_allowed_origins='*' 允许所有域名的访问。
客户端使用 socket.io.min.js 库，连接到服务器地址 http://localhost:5000。
服务器在客户端连接时发送 my_response 消息，并在收到客户端的 my_event 消息时进行处理并回传 my_response。
客户端在连接时发送 my_event 消息，并在收到服务器的 my_response 消息时将数据输出到控制台。

注意：

确保服务器端代码已启动，并监听端口 5000。
客户端代码需要在浏览器中打开，并允许访问 http://localhost:5000。
可以根据实际需求修改 my_event 和 my_response 等事件名称。

本示例仅为基础的 WebSocket 跨域访问实现，可以根据需要进行扩展和定制。