Отправка вложенного запроса на веб-сервер node.js

Я собираюсь научить создавать простой веб-сервер в node.js моим ученикам. Я делаю это изначально, используя http-модуль и возвращаю статическую страницу. Серверный код выглядит следующим образом:Отправка вложенного запроса на веб-сервер node.js

var http = require('http'); 
var fs = require('fs'); 

http.createServer(function(request, response) { 
    getFile(response); 
}).listen(8080); 

function getFile(response) { 
    var fileName = __dirname + "/public/index.html"; 
    fs.readFile(fileName, function(err, contents) { 
     if (!err) { 
      response.end(contents); 
     } else { 
      response.end(); 
      console.log("ERROR ERROR ERROR"); 
     } 
    }); 
}

index.html выглядит следующим образом:

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Static Page</title> 
    </head> 
    </body> 
     <h1>Returned static page</h1> 
     <p>This is the content returned from node as the default file</p> 
     <img src="./images/portablePhone.png" /> 
    </body> 
</html>

Как я ожидал, я получаю дисплей index.html страницы без изображения (потому что я не являюсь обработка мим-типа). Это отлично; что меня смущает, когда я смотрю на сетевой трафик, я ожидаю, что index.html вернется три раза (первоначальный запрос, запрос изображения и один для запроса favicon.ico). Это должно произойти, потому что единственное, что должен вернуть веб-сервер, - это страница index.html в текущей папке. Я зарегистрировал имя __dirname и fileName var, и они вышли правильно по каждому запросу, и действительно было три запроса.

Так что мой вопрос: что мне не хватает? Почему я не вижу три объекта ответа index.html в сетевом мониторе в Chrome? Я знаю, что один из учеников спросит, и я бы хотел, чтобы у него был правильный ответ.

источник

2016-09-28 A. McDonald

Изображение не работает, потому что ваш веб-сервер не имеет маршрута, определенного для обработки запроса для../images/protablePhone.png'. Помните, что веб-сервер node.js по умолчанию загружает NO файлы. Если вы хотите, чтобы ваш веб-сервер на сервере отображал изображение по запросу браузера, вы должны иметь код, который специально служит для этого изображения. Фактически, ваш веб-сервер обслуживает один и тот же 'index.html' для ВСЕХ запрошенных путей, независимо от того, какой путь был запрошен. Поэтому, когда запрашивается это изображение, вы отправите браузер index.html, который, очевидно, не будет работать для вашего изображения. – jfriend00

Я скопировал ваш код, и я получаю 3 запроса index.html (как и ожидалось). Если вы проверите каждый ответ, вы можете ясно видеть, что все они index.html. Может быть, если вы попытаетесь обновить или отключить фильтр? [screenshot] (http://i.imgur.com/2ptPs71.png) – ippi

Спасибо, я это знаю. Мой вопрос в том, почему объект ответа в запросе изображения не имеет данных (я ошибочно думал о значке тоже, но и он, и локальный (начальный) запрос имеют содержимое индекса в объекте ответа. Так почему бы мне не увидеть, что в объект ответа в Chrome для изображения? Кстати, то, что вы не видите, - это следующие три примера, где мы получаем обработку ошибок, типы mime, протоколирование и т. д. Они доберутся туда. –

, что сбивает с толку меня есть, когда я смотрю на сетевой трафик, я бы ожидать, чтобы иметь index.html вернулся в три раза (первоначальный запрос, запрос изображения и один для запроса favicon.ico)

Когда я запускаю ваше приложение, я вижу ровно три сетевых запроса на вкладке сети в отладчике Chrome, точно так же, как вы предлагали, и точно так же, как и HTML-страница и веб-сервер. Один для начального запроса страницы, один для изображения и один для favicon.ico.

Изображение не работает, потому что вы фактически не используете изображение (вы используете index.html для всех запросов), но, возможно, вы уже это знаете.

Так что мой вопрос: что мне не хватает? Почему я не вижу три объекта ответа index.html в сетевом мониторе в Chrome?

Вот мой скриншот из вкладки сети отладчика Chrome при запуске приложения:

источник

2016-09-28 05:41:44 jfriend00

Я получаю то же самое но мой вопрос в том, почему объект ответа в запросе portablePhone.png не является index.html. Когда я выбираю файл изображения и смотрю под вкладкой ответа, он говорит, что нет предварительного просмотра. Как для первоначального запроса (localhost) и favicon.ico это страница index.html. Почему изображение ведет себя по-другому? –

@ A.McDonald - Забавно, что это то, что вы говорите, вы спрашиваете, потому что ваш реальный вопрос не спрашивает об этом. вероятно, потому, что в запросе для изображения есть следующие заголовки: 'Accept: image/webp, image/*, */*; q = 0.8', а поскольку index.html не является одним из этих типов, ничего не отправляется или отправляется браузер игнорируется, потому что это неправильный тип. – jfriend00

@ A.McDonald - Когда браузер запрашивает изображение, он знает, что он запрашивает изображение. Он не будет обрабатывать ответ, который не является изображением. – jfriend00

код, который вы на самом деле написали (первоначально, не может быть уверен, что вы не будете отредактируйте вопрос) просто служит index.html. Там нет ничего, что могло бы читать любой другой файл (например, изображение).

Я не думаю, что вы должны учить студентов тому синтаксису/механизму, потому что он устарел. Во-первых, не преподавайте им отступы с вкладками или четырьмя пробелами. Отступ с двумя пробелами для JavaScript. Кроме того, на данный момент нет смысла преподавать ES5. Они должны изучить ES2015 или более поздние версии (ES6/ECMAScript 2016/все, что они называют). Для текущей версии узла из коробки (6.6 в письменной форме), это будет эквивалент того, что Вы писали:

const http = require('http'); 
const fs = require('fs-promise'); 

http.createServer((request, response) => { 
    fs.readFile(`${__dirname}/public/index.html`) 
    .then(data => {response.end(data)}) 
    .catch(console.error); 
}).listen(8080);

Но что вы, кажется, пытаетесь сделать, это создать скрипт галереи.

Другое, что касается узла, доступно более 300 000 модулей.Поэтому просто не имеет смысла начинать с 0 и игнорировать все 300 000+ модулей.

Кроме того, в течение примерно трех месяцев, максимум 6, async/await приземлится в Узел 7, не требуя babel. И люди будут утверждать, что дети будут смущены, если у них не будет достаточно времени для работы с обещаниями, но я не думаю, что я их купила. Я думаю, вам следует просто научить их, как настроить babel и использовать async/await. В целом, это будет иметь больше смысла, и они научатся намного более ясному способу делать что-то. И тогда, в следующий раз, когда вы будете преподавать класс, вам не понадобится babel.

Так что это один из способов я хотел бы сделать простой скрипт галереи, который не игнорирует все модули на npm и использует уточненный синтаксис:

import {readFile} from 'fs-promise'; 
import listFilepaths from 'list-filepaths'; 
import Koa from 'koa'; 

const app = new Koa(); 

app.use(async (ctx) => { 
    if (ctx.request.querystring.indexOf('.jpg')>0) { 
    const fname = ctx.request.querystring.split('=')[1]; 
    ctx.body = await readFile(`images/${fname}`); 
    } else { 
    let images = await listFilepaths('./images',{relative:true}); 
    images = images.map(i=>i.replace('images/','')); 
    ctx.body = `${images.map(i=> `<img src = "/?i=${i}" />`)}`; 
    } 
}); 

app.listen(3000);

источник

2016-09-28 06:05:48

Благодарим вас за ответ, но меня интересует, почему я получаю ответ, а не в дискуссию о версиях и модулях. Это лучший разговор на другом форуме. Я знаю о тысячах модулей в узле и о ES6, но это не то место, где сейчас находятся эти ученики. –

Вы прочитали первые два предложения моего ответа? –

Мне любопытно, где вы получаете, что отступ двух пространств за уровень является стандартным для Javascript. Можете ли вы привести ссылку для этого?Я лично нахожу это намного сложнее, чтобы выровнять уровни отступа только в 2-х местах, и код, который имеет сильно вложенное отступы, должен быть упрощен, так что в моем коде никогда не бывает проблем с четырьмя пробелами. Какова ваша ссылочная ссылка на то, что 2 пробела являются стандартом для Javascript? – jfriend00

Отправка вложенного запроса на веб-сервер node.js

ответ

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