Nodered: 无法使用事件监听器将数据从前端发送到后端

huangapple go评论64阅读模式
英文:

Nodered: can't send data from frontend to backend using eventlistener

问题

I have created a custom node for the Node-RED editor and am trying to listen to an emitter from the frontend.
However, the listener only seems to work for events from the backend.
Switch it around and it seems to work. The frontend listener receives the data I am trying to send.

Is it perhaps not possible to listen for events coming from the frontend?

The backend looks like this:

module.exports = function(RED) {
    function TestingNode(config) {
        RED.nodes.createNode(this, config);
        let node = this;

        // Listener works fine, if the emitter is also in the backend
        RED.events.on("runtime-event", function(event) {
            if (event.id === 'mySuperCreativeId') {
                // Emit the event to the node's output
                node.send({ payload: event.payload });
                node.warn("works fine");
            }
        });

        // Emitter works for backend and frontend
        node.on('input', function(msg) {
            RED.events.emit("runtime-event", {
                id: 'mySuperCreativeId',
                retain: false,
                payload: "some payload"
            });
        });
    }
    RED.nodes.registerType("testingNode", TestingNode);
};

The frontend looks like this:

<script type="text/javascript">   

    // This listener works fine
    RED.comms.subscribe("notification/#", function (topic, payload) {
        if (topic.startsWith("notification/mySuperCreativeId")) {
            alert(payload);
        }
    });

    RED.nodes.registerType('testingNode',{
        category: 'function',
        color: '#e2d96e',
        defaults: {
            name: {value:""}
        },
        inputs:1,
        outputs:1,
        icon: "white-globe.png",
        label: function() {
            return this.name || "testingNode";
        }
    });

    
    function start() {
        // Nothing seems to happen here
        RED.events.emit("runtime-event", {
            id: 'mySuperCreativeId',
            retain: false,
            payload: "some payload"
        });
    }

    RED.sidebar.addTab({
        id: "123456789",
        label: "Testing",
        name: "Testing",
        iconClass: "fa fa-tasks",
        content:'<button onclick="start()">start</button></div>'   
    });
</script>

(Note: I have removed the HTML encoding for better readability.)

英文:

I have created a custom node for the nodered editor and am trying to listen to an emitter from the frontend.
However, the listener only seems to work for events from the backend.
Switch it around and it seems to work. The frontend listener receives the data I am trying to send.

Is it perhaps not possible to listen for events coming from the frontend?

The backend looks like this:

module.exports = function(RED) {
    function TestingNode(config) {
        RED.nodes.createNode(this, config);
        let node = this;

        //Listener works fine, if the emitter is also in the backend
        RED.events.on(&quot;runtime-event&quot;, function(event) {
            if (event.id === &#39;mySuperCreativeId&#39;) {
                // Emit the event to the node&#39;s output
                node.send({ payload: event.payload });
                node.warn(&quot;works fine&quot;);
            }
        });

        //Emitter works for backend and frontend
        node.on(&#39;input&#39;, function(msg) {
            RED.events.emit(&quot;runtime-event&quot;, {
                id: &#39;mySuperCreativeId&#39;,
                retain: false,
                payload: &quot;some payload&quot;
            });
        });
    }
    RED.nodes.registerType(&quot;testingNode&quot;, TestingNode);
};

The frontend like this:

&lt;script type=&quot;text/javascript&quot;&gt;   

    //this listener works fine
    RED.comms.subscribe(&quot;notification/#&quot;, function (topic, payload) {
        if (topic.startsWith(&quot;notification/mySuperCreativeId&quot;)) {
            alert(payload);
        }
    });

    RED.nodes.registerType(&#39;testingNode&#39;,{
        category: &#39;function&#39;,
        color: &#39;#e2d96e&#39;,
        defaults: {
            name: {value:&quot;&quot;}
        },
        inputs:1,
        outputs:1,
        icon: &quot;white-globe.png&quot;,
        label: function() {
            return this.name||&quot;testingNode&quot;;
        }
    });

    
    function start() {
        // nothing seems to happen here
        RED.events.emit(&quot;runtime-event&quot;, {
            id: &#39;mySuperCreativeId&#39;,
            retain: false,
            payload: &quot;some payload&quot;
        });
    }

    RED.sidebar.addTab({
        id: &quot;123456789&quot;,
        label: &quot;Testing&quot;,
        name: &quot;Testing&quot;,
        iconClass: &quot;fa fa-tasks&quot;,
        content:&#39;&lt;button onclick=&quot;start()&quot;&gt;start&lt;/button&gt;&lt;/div&gt;&#39;   
    });
&lt;/script&gt;

答案1

得分: 0

这不是这种方式工作的,前端和后端代码完全分离。

如果您想从编辑器发送事件到后端,您需要在后端代码中实现一个HTTP端点,并在前端进行HTTP调用。

核心节点中有多个此模式的示例,例如注入节点:

https://github.com/node-red/node-red/blob/master/packages/node_modules/%40node-red/nodes/core/common/20-inject.js

英文:

It doesn't work this way, the frontend/backend code are totally separate.

If you want to send events from the editor to the backend, you need to implement a HTTP endpoint in the backend code, and make a HTTP call in the frontend.

There a multiple examples of this pattern in the core nodes e.g. the inject node

https://github.com/node-red/node-red/blob/master/packages/node_modules/%40node-red/nodes/core/common/20-inject.js

huangapple
  • 本文由 发表于 2023年7月20日 20:48:47
  • 转载请务必保留本文链接:https://go.coder-hub.com/76730082.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定