How to execute node function using html button

Question

I'm new at nodejs and I want to write to a serial port using node but now I want it to be triggered by a button. And the data is coming from a textbox. My node script is doing fine when I run it in the console/terminal. But can't do it with a button in a webpage. Here's my nodejs embedded in html

<!DOCTYPE html>
<html>
<head>
    <title>Node x HTML</title>
</head>
<body>

    <script>
    function write_serial() 
    {
        var serialport = require("serialport");
        var SerialPort = serialport.SerialPort;

        var sp = new SerialPort("/dev/ttyACM0", {
          baudrate: 9600,
          parser: serialport.parsers.readline("\n")
        });

            var text = document.getElementById("textbox1").value;

            sp.on('open', function() 
            {
                sp.on('data', function (data) 
                {
                    sp.write(name);
                });
            });
    }

    </script>

    <Input Type = "text" id = "textbox1" >
    <BR>
    <br><button onclick="write_serial();" href="javascript:;">Go!</button>
</body>
</html>

Here's the error I got when I open the console of the page (F12)

ReferenceError: require is not defined

Thanks in advance for your help. :)

Max Koretskyi · Accepted Answer · 2017-01-14 08:15:21Z

3

Node.js is a hosting environment, that can execute JS and provides Node.js specific API. Browser, is a different hosting environment, with different API's. You can't use Node's specific API in a browser, and JS that uses Node API will result in an error in a browser.

For example, your script is using global require function, which is not available in a browser API's. And that's why:

ReferenceError: require is not defined

Conversely, your script can't be executed on Node as well, since it uses browser API:

document.getElementById("textbox1")

You've mixed API's from different environments in one script.

However, if your JS script doesn't use Node or browser specific API, it can be executed in both Node and a browser without an error. But it's not the case with your script.

The solution to your problem can be to split your script into two separate scripts, run one in a browser, and the other in Node.js, and to exchange data between them using XMLHttpRequest.

edited Jan 14, 2017 at 8:15

answered Jan 14, 2017 at 8:08

Max Koretskyi

106k69 gold badges356 silver badges524 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Blank Over a year ago

Hi, thanks for the reply. In your last paragraph, did you mean that I need to open the console/terminal to run the NodeJS script(the node js script that I will separate from <script> tag )?

Max Koretskyi Over a year ago

@Blanket, no, it's a bit more work than that. You'll have to setup a server that can listen for an http connections, read this

Blank Over a year ago

Can I do that without installing another module like Express? I actually want another device(that is also connected to the same network) to access the webpage. Is Express is the best solution for a beginner like me? What is the easier way? Thanks.

Max Koretskyi Over a year ago

@Blanket, the article I linked shows how to setup a basic server without express

Blank Over a year ago

Hi, thanks. I accepted your answer for providing me an useful link. I will start learning first about http request. I think that might help. Thanks a lot for the effort. :)

T.J. Crowder · Accepted Answer · 2017-01-14 08:09:14Z

1

NodeJS is a non-browser JavaScript environment. You can't use most NodeJS features in a browser environment, because they aren't designed for it.

Instead, you'd have a local NodeJS process providing a web endpoint (e.g., a web server; perhaps using Express, but you don't have to) and run that NodeJS process so it's listening for web requests. Then you'd have a button on your web page that makes an ajax call to the NodeJS server, which performs the work.

Naturally, this would only allow you to perform the work on the machine where the server process is running.

answered Jan 14, 2017 at 8:09

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

3 Comments

Blank Over a year ago

Hi, thanks for the reply. I actually want another device(that is also connected to the same network) to access the webpage. Is Express is the best solution for a beginner like me?

T.J. Crowder Over a year ago

@Blanket: Can't say "best" or not, but it's fairly simple to use and very frequently used for building web servers with NodeJS.

Blank Over a year ago

Hi, just to add some question, can you give me links of simple tutorials how to do this without express. All the links I saw is quite confusing for beginners like me. Advance thanks.

Mech45 · Accepted Answer · 2017-01-14 08:16:39Z

0

Maybe import the serialport module from https://wzrd.in/standalone/serialport@latest

In other hand, try to seperate the logic from the view, i don't know if your app will grow or if it's just a POC, but use a messageBroker or sockets to bind your actions'view with the engine ?

Hope it helps

answered Jan 14, 2017 at 8:16

Mech45

3491 silver badge9 bronze badges

3 Comments

Blank Over a year ago

Hi thanks for the reply. Did your link also means the npmjs.com/serialport

Mech45 Over a year ago

Hey :) yes same thing ! I don't like people who put -1 without any explications :(

Blank Over a year ago

i don't know bro im not the one who -1 you.

Collectives™ on Stack Overflow

How to execute node function using html button

3 Answers 3

5 Comments

3 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

3 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related