В onchange я открываю сокет и могу отправлять и извлекать данные.но в любом случае открывается новый сокет.
Без открытия нового сокета мне нужно отправить данные из того же идентификатора сокета.
Могу ли я знать, что я делаю неправильно
В _dashboardStoreChange я открывал сокет, и яя могу подключиться к сокету и выполнить генерацию, и я могу получить данные сокета.
в функции showfilter у меня есть событие, в этом событии я хочу отправить только fetch_graph_data, но новый сокет открывается и не можетспособен излучать с первого сокета данных.данные обоих сокетов поступают, когда открыты 2 сокета, которые я хочу выдать из первого сокета.
При отсоединении сокета открывается новый сокет вместо того, чтобы закрывать старый открытый сокет, так что всегда один сокет открыт всевремя
import { Link, browserHistory } from 'react-router';
import socketIOClient from "socket.io-client";
class UpdateDashboard extends React.Component {
constructor(props) {
super(props);
this.state = {
};
this._dashboardStoreChange = this._dashboardStoreChange.bind(this);
}
componentWillMount() {
DashboardStore.on('change', this._dashboardStoreChange);
}
componentWillUnmount() {
DashboardStore.removeListener('change', this._dashboardStoreChange);
let ns = '/dashboard';
let access_token = localStorage.getItem("auth_token");
let user_id = localStorage.getItem("connected_socket_id");
let query_data = {access_token : access_token};
const socket = socketIOClient('http://0.0.0.0:9000'+ns,{query:query_data});
let disconnect_query_data = {access_token : access_token, socket_id: user_id}
socket.emit('disconnect_socket', disconnect_query_data);
}
componentDidMount() {
DataConnectionAction._getDataSourcesList();
}
_dashboardStoreChange(type){
if (type == 'SingleDashboard') {
let singledashboard = DashboardStore._getSingleDashboard() || {};
this.setState({ singledashboard }, ()=>{
localStorage.setItem("dashboardIdforloadchart", this.state.singledashboard.data.dashboard_id);
this.setState({
dashboard_id: this.state.singledashboard.data.dashboard_id,
}, ()=>{
let ns = '/dashboard';
let access_token = localStorage.getItem("auth_token");
let query_data = {access_token : access_token};
const socket = socketIOClient('http://0.0.0.0:9000'+ns,{query:query_data});
socket.on("connection_data", data => this.setState({ socketresponse: data }, ()=>{
localStorage.setItem("connected_socket_id", this.state.socketresponse.connected_socket_id);
console.log(this.state.socketresponse);
let chart_query_data = {"access_token":access_token, 'socket_id' : this.state.socketresponse.connected_socket_id, dashboard_id: this.state.dashboard_id}
socket.emit('fetch_graph_data', chart_query_data);
socket.on('fetch_data_ack', data => this.setState({response: data}, ()=>{
}));
socket.on('dashboard_data', data => this.setState({response: data}, ()=>{
var layout = this.generateLayout(this.state.response.data.length, this.state.response);
this.setState({layout});
}));
}));
});
});
}
}
generateLayout(chartCount,layoutObj) {
console.log("generateLayout",chartCount, layoutObj);
var layout = [], y, i;
if(layoutObj && layoutObj.dashboard_layout!=null)
{
var keysArr=[];
Object.keys(layoutObj.dashboard_layout)
.forEach(function eachKey(key) {
keysArr.push(key);
});
for (i = 0; i <= chartCount - 1; i++) {
y = Math.ceil(Math.random() * 4) + 1;
layout[i] = {x:layoutObj.dashboard_layout[keysArr[i]].x, y:layoutObj.dashboard_layout[keysArr[i]].y, w: layoutObj.dashboard_layout[keysArr[i]].w, h: layoutObj.dashboard_layout[keysArr[i]].h, minW: 2, maxW: 6, minH:10, maxH: 100, isResizable: true, isDraggable: true, i: i.toString()};
}
}
else
{
for (i = 0; i <= chartCount - 1; i++) {
y = Math.ceil(Math.random() * 4) + 1;
layout[i] = {x: i * 2 % 12, y: Math.floor(i / 6) * y, w: 2, h: 6, minW: 2, maxW: 6, minH:6, maxH: 100, isResizable: true, isDraggable: true, i: i.toString()};
}
}
return {lg:layout};
}
showFilter(ds_id, index, bardata1){
let xname = this.state.response.data[index].axis_details.x;
let value = bardata1.variable;
this.setState({
filterClickData: [{
condition: "equals",
value:value ,
field_name:xname
}]
}, ()=>{
let data = {
dashboard_name: this.state.dashboardName,
dashboard_layout: this.state.response.dashboard_layout,
graphs: this.state.singledashboard.data.graphs,
filter_definitions: [
{
"ds_id": ds_id,
"filter_obj": this.state.filterClickData
}
],
"created_by": localStorage.getItem("user_id")
}
DashboardAction._UpdateDashboard(data, (data)=>{
let ns = '/dashboard';
let access_token = localStorage.getItem("auth_token");
let user_id = localStorage.getItem("connected_socket_id");
let query_data = {access_token : access_token};
const socket = socketIOClient('http://0.0.0.0:9000'+ns,{query:query_data});
socket.on("connection_data", data => this.setState({ socketresponse: data }, ()=>{
localStorage.setItem("connected_socket_id", this.state.socketresponse.connected_socket_id);
let chart_query_data = {"access_token":access_token, 'socket_id' : this.state.socketresponse.connected_socket_id, dashboard_id: this.state.dashboard_id}
socket.emit('fetch_graph_data', chart_query_data);
socket.on('fetch_data_ack', data => this.setState({response: data}, ()=>{
}));
socket.on('dashboard_data', data => this.setState({response: data}, ()=>{
var layout = this.generateLayout(this.state.response.data.length, this.state.response);
this.setState({layout});
}));
}));
})
});
}
_loadSavedChart(){
return (
<ResponsiveReactGridLayout>
{this.state.response && this.state.response.data && this.state.response.data.map((data, i) =>
<Paper id='resizer' key={i} className="paper_panel">{this._renderChart(data)}
</Paper>
)}
</ResponsiveReactGridLayout>
)
}
render() {
return (
<div>
<div>
<section className="content_block">
<div className="container-fluid">
<div className="row dashboard_list">
<div>{this._loadSavedChart()}</div>
</div>
</div>
</section>
</div>
</div>
);
}
}
export default UpdateDashboard;
Ожидается открытие только 1 сокета, при событии showFilter я хочу отправлять данные из того же сокета, открытого первым, вместо открытия нового сокета.