Question

我不知道在哪里将用于设置react和“ uibuilder”的套接字连接代码放在节点红色中。

“ uibuilder”是由TotallyInformation（朱利安·奈特）创建的节点，用于Node-red（用于连接IoT设备的可视工具）。 “ uibuilder”用于使用前端库创建Web UI。 https://github.com/TotallyInformation/node-red-contrib-uibuilder

我正在按照示例步骤来设置React以与Node-red中的“ uibuilder”节点一起使用。（https://github.com/TotallyInformation/node-red-contrib-uibuilder/wiki/Example:-ReactJS）在第4步中，有此代码段，但我不知道将其放在何处。

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { findDOMNode } from 'react-dom';

import uibuilder from '../../libs/uibuilder/uibuilderfe.js'

class UserData extends Component{
    constructor(props){
        super(props)

        this.state = {
            msg:'payload Hello World',
            UIBuilderVersion: '',
            webSocket : '',
            msgReceived : '',
            controlMsgReceived : '',
            msgSent : '',
            lastMsgReceived : '',
            lastCtlMsgReceived : '',
            lastMsgSent : ''
        }

        uibuilder.onChange('msg', (newVal) => {

            this.setState({
              msg: newVal
            })
            this.forceUpdate();
            console.info("console.info: " + JSON.stringify(newVal))
        })


        uibuilder.onChange('msgsReceived',(newVal) =>{
            console.info('New msg sent to us from Node-RED over Socket.IO.TotalCount:',newVal)
            this.setState({
              msgReceived: newVal
            })
            this.forceUpdate();
        })

        //IfSocket.IOconnects/disconnects
        uibuilder.onChange('ioConnected',(newVal) =>{
            console.info('Socket.IOConnectionStatusChanged:',newVal)
            this.setState({
              webSocket: newVal
            })
            this.forceUpdate();
        })

        //IfamessageissentbacktoNode-RED
        uibuilder.onChange('msgsSent',(newVal) =>{
            console.info('New msg sent to Node-RED over Socket.IO.TotalCount:',newVal)
            this.setState({
              msgSent: newVal
            })
            this.forceUpdate();
        })

        //IfwereceiveacontrolmessagefromNode-RED
        uibuilder.onChange('msgsCtrl',(newVal) =>{
            console.info('New control msg sent to us from Node-RED over Socket.IO.TotalCount:',newVal)
            this.setState({
              controlMsgReceived: newVal
            })
            this.forceUpdate();
        })

    //  //Manually send a message back to Node-RED after 2 seconds
    //  window.setTimeout(function(){
    //  console.info('Sending a message back to Node-RED-after2sdelay')
    //  uibuilder.send({'topic':'uibuilderfe','payload':'I am a message sent from the uibuilder front end'})
    //  },2000)
    }


    render(){
        return(

            <div ref="root"style={{height:"50vh"}}>
                <div>{'msg: ' + this.state.msg.payload}</div>
                <div>{'msg Received: ' + this.state.msgReceived}</div>
                <div>{'control MsgReceived: ' + this.state.controlMsgReceived}</div>
                <div>{'msg Sent: ' + this.state.msgSent}</div>
                <div>{'last Msg Received: ' + this.state.lastMsgReceived}</div>
                <div>{'last Ctl Msg Received: ' + this.state.lastCtlMsgReceived}</div>
                <div>{'last Msg Sent: ' + this.state.lastMsgSent}</div>

            </div>
        );

    }

    componentWillUnmount(){
        this.state.ui.destructor();
        this.state.ui=null;
    }

    shouldComponentUpdate(){
        //ascomponentisnotlinkedtotheexternaldata,thereisnoneedinupdates
        return false;
    }
}

export default UserData

我尝试将其放在我的应用程序项目目录的“ index.js”中。但是，当我编译自己的react项目时，出现一个错误，提示“ uibuilderfe.js”的相对路径不应位于“ src”目录之外。我用一个符号链接解决了这个问题，但是现在我的react应用程序找不到上面的代码应该导出的UserData对象……我在这里头……应该在哪里放置这段代码？

在节点红色中为uibuilder“在哪里创建套接字连接React Component”

0 个答案: