Handling .js and .css in Node.js

Question

I'm trying to create a simple chat application with node.js and jQuery but I'm getting an error in my console saying '$ is not defined'. I'm following a tutorial where the authr is using jquery without a problem.

My chat.js (the server):

var http = require('http'),
sys = require('sys'),
fs = require('fs'),
ws = require('./ws.js');


var clients = [];
http.createServer(function(req,res){
    res.writeHead(200,{
        'Content-Type': 'text/html'
    });
    var rs = fs.createReadStream(__dirname + '/test.html');
    sys.pump(rs, res);
}).listen(4000);

    ws.createServer(function(websocket){

    websocket.on('connect', function(resource){
        clients.push(websockets);
        websocket.write('Welcome');
    });

    websocket.on('data', function(data){
        clients.forEach(function(client){
            client.write(data);
        });
    });

    websocket.on('close',function(){
        var pos = clients.indexOf(websocket);
        if(pos >= 0){
            clients.splice(pos, 1);
        }
    });
}).listen(8081);

test.html (the client):

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(e) {
        ws = new WebSocket("ws://localhost:8080");
        ws.onmessage = function(event){
            var data = data.replace(/&/g, "&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;");

            $('#log ul').append('<li>' + data + '</li>');
            }
    });
</script>
</head>

<body>
<div id="log"><ul></ul></div>
  <div id="console">
  <input type="text" id="entry"/>
  </div>
  </div>

</body>
</html>

I was getting errors before I stripped out all the .css and other .js src so I'm pretty sure the problem is with the 'Content-Type' code in the server.

Tom · Accepted Answer · 2012-08-08 22:52:46Z

1

I suspect the problem is that you are not serving jquery-1.7.2.min.js from your server, so the web page is not loading jquery, hence no $. First, try referencing a hosted jquery and see if that fixes your problem.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

Although not totally relevant to your problem, if you are building a public website, then it is generally a good idea to reference hosted jquery (and other libs) as your users will probably have a locally cached copy already (thanks to other sites which did the same thing). See http://encosia.com/3-reasons-why-you-should-let-google-host-jquery-for-you/ for a reasonable explanation of this.

Generally, though, you are going to want to serve some static files: your own css and js, images and the like. There are --plenty--of--posts-- describing how to do this longhand with node, but you may want to look at a dedicated module like this: https://github.com/cloudhead/node-static

edited Aug 8, 2012 at 22:52

answered Aug 8, 2012 at 17:01

Tom

4,79027 silver badges33 bronze badges

This resolved the $ error but thank you for the other comments as well, I'm going to look into this more

RapsFan1981
– RapsFan1981

08/08/2012 17:16:14
Commented Aug 8, 2012 at 17:16
This solves the jQuery problem, but doesn't address the question which also talks about CSS files. This is a workaround for not serving static files locally and won't work if you have custom CSS on your page.

Ruan Mendes
– Ruan Mendes

08/08/2012 17:28:50
Commented Aug 8, 2012 at 17:28
True, but the question doesn't ask about serving css files (the asker just mentioned that they removed css refs as part of debugging). Besides, now they know the problem relates to serving static resources, they can solve the other problems themself. Googling probably finds them this link pretty quickly: sitepoint.com/serving-static-files-with-node-js

Tom
– Tom

08/08/2012 17:53:16
Commented Aug 8, 2012 at 17:53
@Tom The question is "Handling .js and .css in Node.js"

Ruan Mendes
– Ruan Mendes

08/08/2012 22:16:01
Commented Aug 8, 2012 at 22:16
I have edited my answer to deal with the general question of serving static files from node.js -- does that help?

Tom
– Tom

08/08/2012 22:53:40
Commented Aug 8, 2012 at 22:53

Add a comment |

Laurent Perrin · Accepted Answer · 2012-08-08 16:56:49Z

1

On the server side, the code you are using is very old. sys.pump has been deprecated for at least over a year.

I'd advise you to read the examples from socket.io. There happens to be a chat server as well in the examples.

answered Aug 8, 2012 at 16:56

Laurent Perrin

14.9k5 gold badges53 silver badges49 bronze badges

Add a comment |

Ruan Mendes · Accepted Answer · 2012-08-08 16:58:43Z

1

Who's serving your static files? From the code you have, it looks like the only static file you're serving is the HTML page.

You need to add some code to handle all static files at a specific location. Basically, you need to handle all static files within your

http.createServer(function() {...})

See: http://www.sitepoint.com/serving-static-files-with-node-js/

answered Aug 8, 2012 at 16:58

Ruan Mendes

92.6k31 gold badges160 silver badges223 bronze badges

Add a comment |

Collectives™ on Stack Overflow

Handling .js and .css in Node.js

3 Answers 3

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Your Answer

Sign up or log in

Post as a guest

Related