Call function in JS file from Node.js

Question

What I am trying to do is when index.html sends a message back to the server, I want to call a function in app.js called changeButton() that will update a header color on index.html.

Here is my node.js file:

var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);
var express=require('express');

var tools = require('./assets/js/app.js');
app.use(express.static(__dirname + '/assets'));

app.get('/', function(req, res){
  res.sendFile(__dirname + '/index.html');
});

io.on('connection', function(socket){
    socket.on('chat message', function(msg){
      console.log('message: ' + msg);
      if(msg == "color") {
        socket.emit("changeButton"); //working now
      }
    });
});

http.listen(3000, function(){
  console.log('listening on localhost:3000');
});

app.js is in assets/js folder.

function getMessage() {
    $('form').unbind('submit').bind('submit', function(){
      socket.emit('chat message', $('#m').val());
      $('#m').val('');
        return false;
    });
}

function changeButton() {
  $('#status').css("background-color", "red");
}

Here is index.html

<!DOCTYPE html>
<html>
  <head>
    <!-- app.js -->
    <script src="js/app.js"></script>
    <!-- app.css -->
    <link rel="stylesheet" type="text/css" href="css/app.css"/>
</head>
<body>
    <h1 id="status"> Node Test </h1>

    <ul id="messages"></ul>
        <form action="">
            <input id="m" autocomplete="off" /><button onclick="getMessage();">Send</button>
        </form>

    <script>
        var socket = io();
        socket.on("changeButton", changeButton);
    </script>
</body>

WORKING NOW!
THANKS!!!

Tony Nardi · Accepted Answer · 2015-03-31 17:28:21Z

2

Where is changeButton defined? If it is defined in index.html, then you'll need to do something like:

if (msg == "add") {
  socket.emit("changeButton")
}

and on the client side:

socket.on("changeButton", changeButton);

answered Mar 31, 2015 at 17:28

Tony Nardi

4332 silver badges7 bronze badges

I edited the question a little. changeButton is defined in app.js. I imported the code via @joemfb answer. jQuery is not defined now, which I believe is probably the wrong was to go about doing this. Loading jQuery on the server.
– NorCalKnockOut
Commented Mar 31, 2015 at 17:35
Ok cool. If you want to change the color of an element, then the Javascript must have access to the HTML element. If the HTML element is in index.html, then you will need to run the Javascript on the client side. You can still use sockets to control this however, like in my answer. Once you get a message "color", simply emit back to the client an event that will execute changeButton (which must be defined in the index.html scope). Does that make sense? I could be misunderstanding what you want to accomplish.
– Tony Nardi
Commented Mar 31, 2015 at 17:46
This makes sense, kinda. Ill update the question with all the code
– NorCalKnockOut
Commented Mar 31, 2015 at 17:49

Add a comment |

joemfb · Accepted Answer · 2015-03-31 17:47:53Z

2

Update: while this answer is technically correct with regards to importing server-side JS libraries, that appears not to be the problem you need solved. @tony-nardi has explained how you can emit a server-side event over a websocket connection, and react to it client-side. You should do that, and import app.js into your index.html.

You need to import the code where changeButton() is defined:

var lib = require('assets/app.js')

And then reference that variable when invoking the function:

lib.changeButton()

edited Mar 31, 2015 at 17:47

answered Mar 31, 2015 at 17:27

joemfb

3,05621 silver badges19 bronze badges

Thank you for the help. Im mixing my questions up, sorry!
– NorCalKnockOut
Commented Mar 31, 2015 at 17:54

Add a comment |

Collectives™ on Stack Overflow

Call function in JS file from Node.js

2 Answers 2

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Your Answer

Sign up or log in

Post as a guest

Related