include javascript code to html in node.js using http module

Question

I am writing a chat-room code which uses the npm module http to create a http server and serve a web page and mosquitto to transfer the data. But I am unable to get my javascript code to work with the html. This is my html code

<!DOCTYPE html>
<html>
<head>
 <style type="text/css">
  body{
   background-color: black;
  }
  .inp{
   background-color: black;
   color: yellow;
   width: 500px;
   height: 90px
  }
  .hld{
   width: 400px;
   height: 60px;
  }
 </style>
 <title>
  Gobal Chats
 </title>
</head>
<body>
 <div class="hld">
  <input id="tpc" type="text" style="height: 50px; background-color: yellow; color: black; font-size: 25px; border: 2px solid gold" placeholder="enter topic here"><br><br>
  <button onclick="conn()">Connect</button>
  <input  type="text" style="height: 50px; background-color: orange; color: black; font-size: 25px; border: 2px solid gold" placeholder="enter username here" onchange="setName(this.value)"><br><br>
 </div><br><br><br><br><br><br>
 <div class="hld">  
 <input type="text" id="msg" class="inp" placeholder="Type your message here" maxlength="300"></input>
 <button onclick="sendMsg()">Send</button> 
 </div><br><br>
 <div id="messages"></div>
</body>
</html>

and this is my Javascript code

var fs = require('fs');
var http = require('http');
var content = "";
 fs.readFile("./index.html", function read(err,data){
  if(err) throw err;
  content = data;
  console.log(data.toString())
 });  
http.createServer(function(req,res){
 res.writeHead(200, {
  'Content-Type': 'text/html'
 });
 res.write(content);
 res.end();
}).listen(8080,'127.0.0.1');
var mqtt = require('mqtt');
var client = mqtt.connect("mqtt://test.mosquitto.org");
var topic = "";
var name = "";  
 client.on('connect',function(){
  client.subscribe(topic);
  console.log('subscribed')
 })
 function conn(){
  topic = document.getElementById('tpc').value;
 }
 function sendMsg(){
  var mss = document.getElementById('msg').value;
  client.publish(mss);  
 }
 function setName(a){
  name = a;
 }
console.log("server ready")

But when I run the code and access the webpage on the browser, I get errors saying that the functions I have written cannot be defined such as

Uncaught ReferenceError: conn is not defined

where conn is one of the functions. This means that the html code is not accessing the Javascript code. I cannot put the Javascript code within the <script> tags of html as mqtt,http and fs are node modules. So how can I get the html code to access the Javascript code?

is the conn() function you are trying to execute on click global? — Yehia Awad, Mar 25 '18 at 06:39
Defining a function in the code that runs your HTTP server is not going to make that function appear in the browser for client side code to run. They are two different programs, usually running on two different computers. Writing both programs in the same programming language (JavaScript) doesn't change that. — Quentin, Mar 25 '18 at 16:55

damitj07 · Answer 1 · 2018-03-25T07:45:50.793

1

The javascript code you are writing is a NodeJS code, and I don't think you will be able to run that script in the browser. And the function you have created like conn and other which make use of npm modules will not be accessible in your HTML because the code is supposed to work on the server side in a nodejs environment.

If you are keen on using npm modules on the client side, you may want to take a look at this library.

Here is a similar reference you can read through.

And I think this article will clear what you are trying to mix.

edited Mar 25 '18 at 07:45

answered Mar 25 '18 at 06:37

damitj07

2,689
1
21
40

I used browserify as you suggested. But I am still getting the same error – RishiC Mar 25 '18 at 07:37
Did you read through this .. https://github.com/browserify/browserify#compatibility – damitj07 Mar 25 '18 at 07:40
And browesirfy won let you run nodejs code in the browser, it lets you use the node modules. I think an easier solution will be to just sperate out the conn function from the `HTTP` and fs node code, and then you can include the js files and use it.. – damitj07 Mar 25 '18 at 07:44
I think you should read this https://stackoverflow.com/questions/23959868/differences-between-node-environment-and-browser-javascript-environment – damitj07 Mar 25 '18 at 07:45

include javascript code to html in node.js using http module

1 Answers1