Javascript 使用NodeJS的文件路径问题_Javascript_Node.js_Sockets_Websocket

Javascript 使用NodeJS的文件路径问题

javascript node.js sockets websocket

Javascript 使用NodeJS的文件路径问题,javascript,node.js,sockets,websocket,Javascript,Node.js,Sockets,Websocket,在下面的客户端代码中，我试图显示一个image space.jpg，它与index.js和index.html位于同一目录中。当我访问服务器和am served index.html时，图像显示断开的链接。在提供静态HTML时，节点的本机文件结构是否有一些我在这里没有考虑的地方我正在OS X 10.10.5上的本地环境中进行测试我有以下服务器代码index.js： var app = require('express')(); var http = require('http').Serve

在下面的客户端代码中，我试图显示一个image space.jpg，它与index.js和index.html位于同一目录中。当我访问服务器和am served index.html时，图像显示断开的链接。在提供静态HTML时，节点的本机文件结构是否有一些我在这里没有考虑的地方

我正在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>

这是因为当浏览器尝试请求space.jpg时，服务器不会做出任何响应，因为您只为/创建了一个侦听器，在其中为index.html提供服务

为了发送图像，您必须将以下内容添加到代码中：

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

或者，您可以使用它并将其设置为包含静态内容（例如图像）的特定路径。然后将提供相应的文件。

您已经提供了index.html文件，但尚未在node.js代码中设置任何静态文件服务功能

这类和的npm包很少。如果愿意，可以将其用作中间件

在项目中安装以下各项：

$npm安装快速静态-保存

然后，您可以编辑index.js以使用ExpressStatic作为中间件。这将为项目根目录中/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不适合处理大型资源文件。

控制台是否记录了错误消息？它说了什么？那么您的问题是您的express服务器不提供图像文件？然后，您可以从您的问题中删除所有聊天客户端代码吗？这是无用的杂物。聚焦。@Elizerwohl是的，它显示：GET 404 Not Found谢谢您的回复：