Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

including js files with html and node.js

I am performing messaging via websockets between a HTML5 client and server running on node.js. Naturally I chose JSON as the message format and as such created common javascript code, defining the various message content types and transformation operations. The javascript code is shared between both projects.

I created my web client as one git project and my server as another git project. Partly because I am using phonegap to build a webkit based client for various touch based environments. It's also a nice separation of the various logic.

To share the common code I created a separate project for the common logic and used git's subprojects to 'import' the code into the other two projects.

Now this works fine for the html5 based project, as I can just do the following to include the code:

<script src="common/js/comms.js" type="text/javascript"></script>

However with node I've had problems trying to get the code. to get the code, I've ended up doing the following:

var fs = require('fs');
eval(fs.readFileSync('./common/js/comms.js').toString());

While the approach I have taken works, I've noticed that it's starting to get very messy when I have dependencies (as in, I need x.js, y.js and x.js if I want a.js), and I have to do it for every single node.js js file that wishes to use any of these entities.

I'm also not comfortable using the eval approach. I don't have a security issue with it, though I would like to use strict mode and it's my understanding that eval and strict mode go together like oil and water.

So my question is, what is the best method to include shared js files between html projects and node.js projects? I would prefer something that follows strict.

I should note that while there are several questions that are kinda around this topic, I could not find any that address the specific issues I'm raising. I should also add that I do not wish to 'serve' the files from the 'server'. The HTML5 client is to be 'standalone'.


To clarify, what I have in the 'common js files' is something like the following:

var Comms = function (options) {
   ...
}

In HTML5 I can then just reference is via new Comms(), which is what I desire to do in node.js as well.

like image 315
Metalskin Avatar asked Jan 25 '13 23:01

Metalskin


People also ask

How do I include an HTML file in node JS?

We will attach the HTML file to the response object, as shown here. Copy let http = require('http'); let fs = require('fs'); let port = 8080; const server = http. createServer((request, response) => { response. writeHead(200, { 'Content-Type': 'text/html' }); fs.

Where should I include js file in HTML?

To include an external JavaScript file, we can use the script tag with the attribute src . You've already used the src attribute when using images. The value for the src attribute should be the path to your JavaScript file. This script tag should be included between the <head> tags in your HTML document.

Can we connect HTML with node js?

Conclusion: With simple File IO operations we can read HTML file in Node. js and by using simple modules, we can send a HTML response back to client.


1 Answers

Have you researched how Node modules work? If you're developing using this pattern, it's fairly simple to use require('./common/js/comms') on the server while still including it on your client as well.

This article should point you in the right direction: https://caolan.org/posts/writing_for_node_and_the_browser.html


The following is the code that Tyler linked to in his comments below.

The example (example.js):

if(typeof exports == "undefined"){
    exports = this;
}

Example = function() {
    this.init();
};

Example.prototype = {
    init: function() {
         console.log('hello world');
    }
};

exports.Example = new Example();

The node.js usage of example.js (app.js):

example = require('./example');

The html usage of example.js (index.html):

<html>
    <head>
        <title></title>
    </head>
    <body>
        <script src="./example.js"></script>
    </body>

The change by the OP was to assign exports.Example to Example instead of to an new instance. Thus the node.js logic can use the following:

var Example = require('./example.js').Example;
var foo = new Example();

Thus the original question is solved.

like image 145
Tyler Hughes Avatar answered Oct 05 '22 14:10

Tyler Hughes