jquery - 使用 socket.io 提供静态文件的问题

Question

我正在创建一个用户可以登录的 Web 应用程序(密码/用户名)。登录后，他可以选择 2 个可用应用程序之一。第一个应用程序在客户端和服务器之间使用 http 连接。第二个使用网络套接字。因此，当用户单击第二个应用程序时，应该建立一个 websocket。我的第一个应用程序运行良好，第二个应用程序也运行良好，但是当我将所有应用程序放在一起时。我有一个问题。

这是我到目前为止所做的:

服务器.js

var app = express();
var server = http.createServer(app, function(req, res) {
  //serves static files
  //processes GET and POST requests of both the login page and the 1st app 
}

server.listen(80, function() {
   console.log("Server listening on port 80.");
}); 

app.configure(function () {
    app.use(express.cookieParser());
    app.use(express.session({secret: 'secret', key: 'express.sid'}));
});

 app.get('/', function (req, res) {
   var filePath = '../client/index.html';
   if (filePath){
      var absPath = './' + filePath;
      serveStatic(res, cache, absPath); //function that serves static files
   } 
}); 
io = io.listen(server);
io.set('authorization', function (handshakeData, accept) {
  //code
});

io.sockets.on('connection', function(socket) { 
  console.log('Client connected.');
});

index.html

    <script src="../third-party/jquery-1.9.1.min.js"></script>
    <script src="/socket.io/socket.io.js"></script>

<script>
    $(document).ready(function() {

    tick = io.connect();
          tick.on('data', function (data) {
              console.log(data);
          });

          tick.on('error', function (reason){
            console.error('Unable to connect Socket.IO', reason);
          });

          tick.on('connect', function (){
            console.info('successfully established a working and authorized connection');
          });
    });
</script>

在客户端，我使用jquery。

当我连接到本地主机时，我收到登录页面，并且 chrome 调试器工具上显示一条错误消息:$ 未定义(在 index.html 中)，GET http://localhost/third-party/jquery-1.9.1.min.js 404(未找到)

这是我的应用程序的架构:

- server
   - server.js
-client
     -index.html (login page)
     -firstApp 
       -index.html
     -secondApp (uses websocket)   
         -index.html
     - third-party
         -jquery-1.9.1.min.js

我相信，我没有以正确的方式提供静态文件。不过，在将 websocket 添加到我的代码之前，我对此没有任何问题。我不明白的是当我在

下记录一些内容时

var server = http.createServer(app, function(req, res) {
   console.log('TEST')
});

控制台上没有显示任何内容。以下是该函数如何提供静态文件:

function sendFile(res, filePath, fileContents) {
   res.writeHead(200, {"content-type": mime.lookup(path.basename(filePath))});
   res.end(fileContents);
} 

function serveStatic(res, cache, absPath) {
   //checks if file is cached in memory
   if (cache[absPath]) {
      sendFile(res, absPath, cache[absPath]); //serves file from memory
   }else {
      fs.exists(absPath, function(exists) { //checks if file exists
         if (exists) { 
            fs.readFile(absPath, function(err, data) { //reads file from disk
               if (err) {
               }else {
                  cache[absPath] = data;
                  sendFile(res, absPath, data); //serves file from disk
               }
            });
         }else {
            console.log('cannot find the file')
            send404(res);
         }
      });
   }
} 

Answer 1

只需添加

app.use(express.static(__dirname+'../client'));

到您的中间件链，并从相对于客户端目录的 index.html 请求文件，如下所示:

secondApp/index.html

<script src="/third-party/jquery-1.9.1.min.js"></script>
<script src="/socket.io/socket.io.js"></script>

express.static 是对 connect.static 的引用

恕我直言，请至少清理您的 server.js 代码

var app = express()
  , server = http.createServer(app)
  , io = io.listen(server)
;

app.configure(function () {
    app.use( express.cookieParser() );
    app.use( express.session({secret: 'secret', key: 'express.sid'}) );
    app.use( app.router )
    app.use( express.static(__dirname+'../client') );
});


app.get('/', function (req, res) {
    res.sendFile( __dirname+'../client/index.html' ) 
});

app.get('/whatever/url/path/you/want', function (req, res) {
    // this will match GET requests to /whatever/url/path/you/want
});

app.get('*', function (req, res) {
    // this will match GET requests to any path
    // take care if you use middlewares after app.router as here
});

app.post('/whatever/url/path/you/want', function (req, res) {
    // this will match POST requests to /whatever/url/path/you/want
});

app.post('*', function (req, res) {
    // this will match POST requests to any path
});

io.set('authorization', function (handshakeData, accept) {
});

io.sockets.on('connection', function(socket) { 
  console.log('Client connected.');
});

server.listen(80, function() {
   console.log("Server listening on port 80.");
});

警告:上面的代码既不是最干净的，也不是最好的代码

看看 http.createServer documentation

它只接受 1 个监听器的请求。您可以注册 2 个监听器，但由于您使用的是 Express，所以最好的方法是使用其功能，请参阅上面的 server.js 示例代码中的示例

您不需要提到的那些 serveStatic 函数

express.static 对你来说就足够了。

旁注

您不需要在客户端将 io.connect 包装在 $.ready 下