使用NodeJS的文件路徑問題

Question

在下面的客戶端代碼中，我嘗試顯示與index.js和index.html位於同一目錄中的圖像（space.jpg）。 當我訪問服務器並獲得index.html時，圖像顯示斷開的鏈接。 提供靜態HTML時，Node的本機文件結構是否存在某些問題，我在這里沒有考慮？

我正在OS X（10.10.5）的本地環境中進行測試。

我有以下服務器代碼（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');
});

以及以下客戶端代碼（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

您已提供index.html文件，但尚未在node.js代碼中設置任何靜態文件服務功能。

很少有npm軟件包，例如node-static和express-static 。 如果願意，可以將其用作中間件。

在您的項目中以下列方式安裝其中的任何一個：

$ npm install express-static --save

然后，您可以編輯index.js以將express-static用作中間件。 這將為您的項目根目錄下/ public下的所有文件提供服務。 因此，您可以將所有資產（即圖像，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'));

在生產中，建議使用前端的http服務器或像nginx或apache之類的反向代理來服務靜態文件，因為node.js不適用於大型資源文件。

Answer 2

這是因為當瀏覽器嘗試請求space.jpg ，服務器將不會響應任何內容，因為您只為/為其創建index.html的偵聽器。

為了發送圖像，您必須將其添加到代碼中：

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

或者，您可以使用express.static並將其設置為包含靜態內容（例如圖像）的特定路徑。 然后將其作為相應文件。

使用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