在Node.js中处理.js和.css

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'. 我正在尝试使用node.js和jQuery创建一个简单的聊天应用程序，但是我的控制台出现一个错误，提示“未定义$”。 I'm following a tutorial where the authr is using jquery without a problem. 我正在跟踪一个教程，其中authr使用jquery没有问题。

My chat.js (the server): 我的chat.js（服务器）：

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): test.html（客户端）：

<!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. 在删除所有.css和其他.js src之前，我遇到了错误，因此，我很确定问题出在服务器中的“ Content-Type”代码上。

Answer 1

On the server side, the code you are using is very old. 在服务器端，您使用的代码很旧。 sys.pump has been deprecated for at least over a year. sys.pump已被弃用至少一年以上。

I'd advise you to read the examples from socket.io . 我建议您阅读socket.io中的示例。 There happens to be a chat server as well in the examples. 在示例中也有一个聊天服务器。

Answer 2

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. 从您拥有的代码看来，您正在提供的唯一静态文件是HTML页面。

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/ 请参阅： http ： //www.sitepoint.com/serving-static-files-with-node-js/

Answer 3

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 $. 我怀疑问题是您没有从服务器提供jquery-1.7.2.min.js，因此网页未加载jquery，因此没有$。 First, try referencing a hosted jquery and see if that fixes your problem. 首先，尝试引用托管的jquery，看看是否可以解决您的问题。

<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). 尽管与您的问题并不完全相关，但是如果您正在构建一个公共网站，则通常最好参考托管的jQuery（和其他库），因为您的用户可能已经拥有本地缓存的副本（这要归功于其他网站）一样的东西）。 See http://encosia.com/3-reasons-why-you-should-let-google-host-jquery-for-you/ for a reasonable explanation of this. 有关此问题的合理说明，请参见http://encosia.com/3-reasons-why-you-should-let-google-host-jquery-for-you/ 。

Generally, though, you are going to want to serve some static files: your own css and js, images and the like. 通常，尽管如此，您将要提供一些静态文件：您自己的css和js，图像等。 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 有大量的帖子描述了如何使用node进行此操作，但是您可能希望查看如下专用模块： https : //github.com/cloudhead/node-static

在Node.js中处理.js和.css

问题描述

3 个解决方案

解决方案1
1 2012-08-08 16:56:49

解决方案2
1 2012-08-08 16:58:43

解决方案3
1 已采纳 2012-08-08 17:01:24

在Node.js中处理.js和.css

问题描述

3 个解决方案

解决方案1 1 2012-08-08 16:56:49

解决方案2 1 2012-08-08 16:58:43

解决方案3 1 已采纳 2012-08-08 17:01:24

解决方案1
1 2012-08-08 16:56:49

解决方案2
1 2012-08-08 16:58:43

解决方案3
1 已采纳 2012-08-08 17:01:24