d3.js - flask-socketio 和 d3 之间的数据握手

Question

我正在使用 flasks-socketio(server) 和 d3.js(client) 作为我的研究项目的一部分来开发实时应用程序，并且努力在服务器和 clinet 之间执行数据握手，并且它不工作并且对于 websockets 来说是新的. 请帮助我使用flask-io和d3的数据共享方法，谢谢。

输出截图： 输出

如果我在客户端分配数据值，可以从服务器端读取，但如果我在服务器端分配数据，客户端无法读取它。为什么 ？

服务器代码：

from flask import Flask, render_template
from flask_socketio import SocketIO, emit, send
import json, os
import pandas as pd


app = Flask(__name__)
app.config['SECRET KEY'] = 'help!'
socketio = SocketIO(app)
port = int(os.getenv('VCAP_APP_PORT', 2021))

# df = pd.read_csv("stocks.csv", usecols=['Symbol','Name','Sector','Price'])
# stocks = pd.DataFrame(data=df)
# print(stocks.head())


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

@socketio.on('connect', namespace='/app')
def connect():
    emit('check_connection', {'data': 'Connected'})

@socketio.on('sum', namespace='/app')
def sum(data):
    result = data['numbers'][0] + data['numbers'][1]
    # emit('sum_result', {'result': result})
    return {'result': result}


@socketio.on('stocks', namespace='/app')
def send_data():
    df = pd.read_csv("stocks.csv", usecols=['Symbol','Name','Sector','Price'])
    data = pd.DataFrame(data=df)
    # print(df.head())
    emit ('stock_data', {'stock_data': data}, broadcast=True)


@socketio.on('disconnect', namespace='/app')
def disconnect():
    print('Clinet disconnected!')

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


client_code: 

        <script src="https://d3js.org/d3.v5.min.js" charset="utf-8"></script>
        <script src="//cdnjs.cloudflare.com/ajax/libs/socket.io/2.2.0/socket.io.js" integrity="sha256-yr4fRk/GU1ehYJPAs8P4JlTgu0Hdsp4ZKrx8bDEDC3I=" crossorigin="anonymous"></script>
        <script type="text/javascript" charset="utf-8">

const sio = io.connect('http://' + document.domain + ':' + location.port + '/app');

        sio.on('check_connection', function(msg){
            console.log(msg);
            sio.emit('sum', {numbers: [1, 2]}, (result) => {
                console.log(result);
            });
        });
        
        sio.on('stock_data', (data) => {
            const stockData = data;
            console.log(stockData);
        });

        sio.on('disconnect', function(msg){
            console.log(msg);
        });
</script>


    


  [1]: https://i.stack.imgur.com/lCNs9.png

最终输出截图

标签： d3.jsflask-socketio