2016-12-31 2 views
0

В приведенном ниже коде клиента я пытаюсь отобразить изображение (space.jpg), которое находится в том же каталоге, что и index.js и index.html. На экране отображается некорректная ссылка, когда я обращаюсь к серверу, и я подал index.html. Есть ли что-то относительно собственной файловой структуры Node при обслуживании статического HTML, который я не учитываю здесь?Ошибка пути к файлу с использованием NodeJS

Я тестирую локальную среду на 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> 
+0

Произошла ли консоль с сообщением об ошибке? что он говорит? –

+0

Итак, ваша проблема заключается в том, что ваш экспресс-сервер не служит файлу изображения? Не могли бы вы удалить весь этот код клиента чата из вашего вопроса? Это бесполезный беспорядок. Фокус. – Tomalak

+0

@EliezerWohl Да, это показывает: GET http: // localhost: 3000/space.jpg 404 (не найдено) – nicktendo

ответ

3

Это потому, что, когда браузер пытается запросить space.jpg , сервер ничего не ответит, поскольку вы создали только слушателя для /, в котором вы обслуживаете index.html.

Для того, чтобы отправить изображение, которое вы должны добавить это в ваш код:

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

Альтернативой будет использовать express.static и установить его на определенный путь, содержащий статический контент (например, изображения). Затем он будет обслуживать соответствующий файл.

+0

Благодарим за отзыв :) – nicktendo

4

Вы подали файл index.html, но в своем коде node.js вы не настроили никаких функций для работы с файлами.

Существует несколько НПМ пакетов для этого, как node-static и express-static. Вы можете использовать это как промежуточное ПО, если хотите.

Установите любой из них в проекте как:

$ npm install express-static --save

Затем вы можете редактировать index.js использовать экспресс-статичным, как ППО. Это будет обслуживать все файлы под/public в корне вашего проекта. Таким образом, вы можете поместить все свои активы, то есть изображения, css, клиентские js внутри/общедоступный каталог.

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 или апача обслуживать статические файлы, так как Node.js не хорошо с большими файлами ресурсов.

Смежные вопросы