使用NodeJS的文件路径问题

Question

In the client code below I attempt to display an image (space.jpg) which is located in the same directory as index.js and index.html. 在下面的客户端代码中，我尝试显示与index.js和index.html位于同一目录中的图像（space.jpg）。 The image is showing a broken link when I access the server and am served index.html. 当我访问服务器并获得index.html时，图像显示断开的链接。 Is there something about Node's native file structure when serving static HTML which I am not taking into account here? 提供静态HTML时，Node的本机文件结构是否存在某些问题，我在这里没有考虑？

I am testing in a local environment on OS X (10.10.5). 我正在OS X（10.10.5）的本地环境中进行测试。

I have the following server code (index.js): 我有以下服务器代码（index.js）：

var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);

app.get('/', function(req, res){
  res.sendfile('index.html');
});

io.on('connection', function(socket){
  console.log('a user connected');

  socket.on('chat message', function(msg){
      console.log('message: ' + msg);
      io.emit('chat message', msg);
  });

  socket.on('disconnect', function(){
  console.log('user disconnected');
  });

});

http.listen(3000, function(){
  console.log('listening on *:3000');
});

And the following client code (index.html): 以及以下客户端代码（index.html）：

<!doctype html>
<html>
  <head>
    <title>Infinium</title>
    <style>

    </style>
  </head>
  <body>
      <div id="chat" style="background-color:rgba(0,0,0,0.7);width:500px;top:0px;left:0px;position:absolute;">
    <div style="width:500px;px;height:100px;overflow-y:auto;color:#FFFFFF" id="messages"></div>
      <form action="">
      <input id="m" autocomplete="off" /><button>Send</button>
    </form>
      </div>
      <img src="space.jpg">

      <script src="/socket.io/socket.io.js"></script>
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script>
  var socket = io();

  $('form').submit(function(){
    socket.emit('chat message', $('#m').val());
    $('#m').val('');
    return false;
  });

  socket.on('chat message', function(msg){
    $('#messages').append($('<li>').text(msg));
    var element = document.getElementById("messages");
    element.scrollTop = element.scrollHeight;
  });
</script>
  </body>
</html>

Answer 1

You have served index.html file but you haven't set up any static file serving functionality in your node.js code. 您已提供index.html文件，但尚未在node.js代码中设置任何静态文件服务功能。

There is few npm packages for this like node-static and express-static . 很少有npm软件包，例如node-static和express-static 。 You can use this as middleware if you like. 如果愿意，可以将其用作中间件。

Install any of these in your project as: 在您的项目中以下列方式安装其中的任何一个：

$ npm install express-static --save $ npm install express-static --save

Then you can edit your index.js to use express-static as middleware. 然后，您可以编辑index.js以将express-static用作中间件。 This will serve all the files under /public in your project root. 这将为您的项目根目录下/ public下的所有文件提供服务。 So, you can put all your assets ie images, css, client-side js inside /public directory. 因此，您可以将所有资产（即图像，css，客户端js）放在/ public目录中。

var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);

var static  = require('express-static');
app.use(static(__dirname + '/public'));

In production, it is recommended to use a front facing http server or reverse proxy like nginx or apache to serve static files since node.js is not good with big resource files. 在生产中，建议使用前端的http服务器或像nginx或apache之类的反向代理来服务静态文件，因为node.js不适用于大型资源文件。

Answer 2

That's because when the browser tries to request space.jpg , the server won't respond with anything, since you only created a listener for / in which you serve your index.html . 这是因为当浏览器尝试请求space.jpg ，服务器将不会响应任何内容，因为您只为/为其创建index.html的侦听器。

In order to send your image you will have to add this to your code: 为了发送图像，您必须将其添加到代码中：

app.get('/space.jpg', function(req, res) {
    res.sendfile('./space.jpg');
});

Alternatively, you could use express.static and set it up for a certain path that contains static content (eg images). 或者，您可以使用express.static并将其设置为包含静态内容（例如图像）的特定路径。 This will then serve the according file. 然后将其作为相应文件。

使用NodeJS的文件路径问题

问题描述

2 个解决方案

解决方案1
4 2016-12-31 18:01:08

解决方案2
3 已采纳 2016-12-31 17:58:01

使用NodeJS的文件路径问题

问题描述

2 个解决方案

解决方案1 4 2016-12-31 18:01:08

解决方案2 3 已采纳 2016-12-31 17:58:01

解决方案1
4 2016-12-31 18:01:08

解决方案2
3 已采纳 2016-12-31 17:58:01