Import JavaScript library into node-red

[abra]

Can somebody please explain how can a third party plugin library like for instance Chart.js be locally installed into node-red? If I download Chart.js from github I get actually a Chart.js-master root directory with a lot of subdirectories and files. Do I have to copy everything into the node-red installation directory ?
I would like to use some charts from Chart.js into a UI template.

[knolleary]

Hi @abra

If you want to use third party libraries as part of your node-red dashboard then you need to:

1. copy those libraries to a directory of your choosing
2. set httpStatic in your node-red settings file to point at that directory.

The node-red runtime will then serve the files from the directory.

You can then add the appropriate <script> and <style> tags to a ui_template node in order to load that content into your dashboard.

For example,

1. create a directory called /home/user/node-red-static/charts/
2. copy all of the chart.js content into that directory - lets assume that includes a file called chart.js.
3. set httpStatic in your settings file to /home/user/node-red-static
4. restart Node-RED
5. check you can load http://localhost:1880/charts/chart.js in your browser.

In your ui_template you'd need:

<script src="http://localhost:1880/charts/chart.js"></script>

Of course, you'll have to refer to the chart.js documentation to understand exactly what files need including in your html page.

[Colin]

I think you only need the file referenced in the readme dist/Chart.min.js (or the similar one with moment included), which you can find in the Releases section on github https://github.com/chartjs/Chart.js/releases

[mvargasevans]

Hello everyone,

I have been struggling with adding third party libraries such as chart.js and Leaflet.
So far I have been loading them directly from the source, instead of having them locally as this post indicates.

After searching, I am still not able to solve this one.
Is there a known way to import scripts and have the node to wait for libraries to be loaded?

Regards

[Colin]

You can put the library in a folder such as .node-red/static, then in settings.js set httpStatic to the full path to that folder, for example
httpStatic: '/home/pi/.node-red/static/',
then the library can be accessed via
http://localhost:1880/libraryname.js
or possibly just as libraryname.js, I am not sure about that.
There may well be alternatives, in which case someone else will point that out.

You may still have to make sure that you wait for it to loaded in your page, depending on what you are doing with it. It should load much quicker than across the internet, but it will still take time.

[zenofmud]

Here is a sample flow using chart.js so you can see how it was used.https://gist.github.com/juggledad/d1b9f2c606e536ce4a3960abcd887754

[mvargasevans]

Thanks both.
Clear now

[Miliks]

Hi @knolleary, i was trying to create a flow with the node able to get notification on changes using SSE technology. I created a function node and added the script

var source = new EventSource("http://localhost:8080/api/2/things?ids=smart:factory_lwb"); source.onmessage = function(msg) { console.log('recieved: ' + msg.data); };
i have a node modules for eventsource installed in node-red (at least i can see the folder with this name in the .node-red/node-modules directory. But when i start the flow i get the following error:

function : (error)
"ReferenceError: EventSource is not defined (line 4, col 14)"

when i run this short script odirectly in terminal i need to add the line: var EventSource = require("eventsource"); othrwise i'm getting hte same error, but adding the same line in node-red i'm getting an error: function : (error) "ReferenceError: require is not defined (line 3, col 19)"
import giving me the same error.

Could you please help me to undestand what i'm doing wrong?
Thanks a lot in advance,
Mila

[knolleary]

Hi @Miliks

installing a node module does not make it automatically available to the Function node.

The docs show the additional steps you have to do through: https://nodered.org/docs/writing-functions#loading-additional-modules

Nick

[Miliks]

Thank you very much for your response, it was really helpful!
So i put the following code into the function node:

msg.options = [];
var EventSource = global.get('oseventsource');
var source = new EventSource("http://localhost:8080/api/2/things?ids=smart:factory_lwb");
source.onmessage = function(msgs) {
msg.options.push(msgs.data);    
};
msg.payload = msg.options;
return msg;

and from the syntax point of view everything fine, but the array returned (i print it into the debug pannel) is empty. Is there something wrong with the server side where messages are generated or there is some error in the message payload assignment?
Could you please take a look?
Thanks again,
Mila

[moebius]

You have to use node.send() inside the callback to get the values...

[Miliks]

Could you please explain what do u mean?

[moebius]

Maybe you could search for "node.send" on the same page Nick gave you? Or maybe "callback"?

A little activity (like reading the basic docs or using search and / or google) before, would help us all

[Colin]

The function as you have it will return immediately, before onmessage gets called, so you need to build the message inside the onmessage function and then use node.send to send it. Note though that there will only ever be one entry in the array if you do it like that. If you want to build a complete array then you will need some way of knowing when the last one arrives and wait till then to send it.
You also need return null (or no return at all) at the end of your function so it doesn't send anything immediately.

[Andrei]

@Miliks

i was trying to create a flow with the node able to get notification on changes using SSE technology.

Did you consider using the existing SSE node for that purpose ?

[ANNOUNCE] node-red-contrib-sse-client

Hi folks, A couple of weeks ago there was a topic on this forum about listening to an SSE stream (Server Sent Events). Seemed that there was no real SSE client available in Node-Red, so I decided to create node-red-contrib-sse-client. Will publish it to NPM in a couple of days. Until then it can be installed directly from my Github account: npm install bartbutenaers/node-red-contrib-sse-client All 'constructive' feedback is more than welcome ! P.S. I have a minor CSS issue. My config scr…

[Miliks]

Thanks for the suggestion, i didn't know about this specific node. I tryed it out, but i'm getting the 401 error during deployment phase. The URL i'm trying to get notification about is password protected, so i added the header to the form as on image attached. Do i miss something or there some problem with the url i'm trying to work with? using REST client i'm getting this encoding of the username/password, so i suppose they are correct.

[Andrei]

You say it works using REST client, then I suggest doing a test where you configure the authentication in the msg headers.

The doc for the node says:

When the Http headers are not specified in the config screen, they can be specified in the msg.headers field.

If it fails then you may try to troubleshoot using a tool that Nick mentioned in an earlier post : https://requestbin.fullcontact.com/

[Miliks]

Dear @Andrei, thanks for the suggestion, i'll try it out.
I think the problem however is somehow related to the missing argument in the interpretation of the node definition. If you see the information screen of the sse-client node u can see what the partHeaders is empty, unless i use the wrong syntax, but from the list of HTTP headers it looks the correct (i tryed with quotation marks and without). Moreover, when i'm changing something in this field the Deploy button is not getting updated, so it looks like this parameters are not considered at all. Any thoughts?
Thanks a lot!

[Miliks]

I tryed also to define in the change node parameters of the request as you suggested, but still 401 error on deployment phase.

[Andrei]

@Miliks

I tryed also to define in the change node parameters of the request as you suggested, but still 401 error on deployment phase.

The config you tried with the change node for the http header is not correct. I suggest using a function node instead.

Please remove the http header information from the SSE node (leave empty) and add a function node configured like below in front of the SSE node

Just replace YOUR_ACCESS_TOKEN, of course

msg.headers = {};
msg.headers['Authorization'] = "Basic "+ "YOUR_ACCESS_TOKEN"
return msg;