Handling .js and .css in Node.js

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.

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.

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/

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