[MÚSICA]
En este ejercicio, vamos a explorar algunos de los módulos del nodo de código.
En particular, veremos el módulo HTTP que está integrado en Node y
usaremos el módulo HTTP para configurar e iniciar un servidor web simple.
También veremos cómo podemos servir archivos estáticos desde nuestro servidor HTTP de nodo.
También veremos ese módulo del sistema de archivos y el módulo de ruta y
cómo pueden ayudarnos a servir archivos estáticos en nuestro servidor HTTP basado en Nodo.
Así que vamos a explorar algunos de los módulos de nodo de código en este ejercicio.
Para comenzar con este ejercicio, vaya a una ubicación conveniente en su computadora.
Así que iremos a la carpeta NodeJS que ya hemos creado en uno de
los ejercicios anteriores.
Y en la carpeta NodeJS, voy a crear una nueva carpeta llamada node-http.
Y luego, vamos a configurar esto como una aplicación Node.
Además, moviéndose a la carpeta node-http,
vamos a crear una subcarpeta allí llamada public que continuará
algunos de los archivos html que vamos a servidor de nuestra aplicación HTTP Node.
Ahora moviéndose a un terminal, navegue hasta el nodo,
carpeta -http.
Y vamos a inicializar esta carpeta para que esté en nuestra aplicación.
Así que comenzaremos con npm init e
inicializaremos ese paquete a nuestro archivo JSON aquí.
Y luego le daremos el nombre del paquete como node-http y
aceptaremos la versión estándar, y
la descripción es Node HTTP Module Ejemplo.
Y el punto de partida es index.js, sin comando de prueba,
sin repositorio git por el momento, y autor,
escriba su nombre y acepte el resto tal como está.
Y eso debería crear el paquete para un archivo de manifiesto JSON.
Ahora vamos a abrir este proyecto en nuestro editor favorito.
Así que permítanme iniciar mi código de Visual Studio en esta carpeta.
Y en el código de Visual Studio, vayamos al paquete a nuestro archivo JSON.
Y luego agregaremos otro script al paquete,
a nuestro archivo JSON llamado start y
que ejecutaría el índice del nodo.
Y recuerda poner una coma después del enganche de prueba.
Y guarde los cambios en el archivo package.json.
Ahora en donde Project,
cree un nuevo archivo llamado index.js.
Vamos a configurar este index.js para usar el módulo HTTP Node.
Entonces, en este archivo, escribamos const
http = require («http»).
Así que puede ver que estamos usando el módulo de código HTTP, y
lo estamos requiriendo simplemente especificando el nombre del módulo de código HTTP allí.
Además, vamos a declarar,
Un par de constantes aquí y luego,
Vamos a llamar nombre de host y
el número de puerto como 3000 por defecto.
Ahora vamos a configurar el servidor.
Para configurar el servidor, diremos const server = http.
El módulo HTTP admite un método llamado CreateServer,
por lo que van a utilizar el método CreateServer en eso.
Este método CreateServer tomará una función como parámetro y
esta función toma dos
valores como parámetros, solicitud y respuesta.
Y como puede ver, estoy escribiendo una función de flecha aquí.
Entonces la solicitud y la respuesta son los dos parámetros a la función que proporcionamos
como parámetro al método CreateServer aquí.
Y dentro de esto, diremos
console.log (req.headers).
Entonces, aquí, el req y res son la solicitud HTTP entrante al servidor.
Y tipo de objeto de respuesta que va
a ser construido por este servidor y devuelto al cliente
que se conecta a este servidor HTTP que estamos creando aquí.
Así que la solicitud es la solicitud entrante desde cualquier navegador o
desde cualquier lugar que esté intentando acceder a este servidor que vamos a iniciar
usando esta aplicación HTTP Node que estamos desarrollando aquí.
Entonces, a partir de la solicitud,
el objeto de solicitud nos da acceso a los encabezados en la solicitud HTTP entrante.
Así que voy a registrar los
encabezados entrantes de la solicitud HTTP que vienen usando este console.log.
Sólo para mi información, sólo para saber de dónde viene esta solicitud.
A partir de entonces, podemos construir la respuesta utilizando el res y
esto nos proporcionará un método llamado StatusCode.
El StatusCode nos permitirá configurar el StatusCode para el mensaje de respuesta.
Entonces, en este caso, configuraré el StatusCode como 200.
Si recuerdas de la discusión anterior sobre los elementos esenciales de redes,
sabrás que StatusCode de 200 significa que todo está bien.
Por lo tanto, configuramos el código de estado aquí para el mensaje de respuesta y
luego también configuraremos el encabezado para el mensaje de respuesta.
Y uno de los temores de cabecera que vamos
a configurar se llama Content-Type.
Y el tipo de contenido,
especificaremos que esto sea 'text/html'.
Entonces, el cuerpo de respuesta contendrá los datos en forma de html aquí.
Entonces, el encabezado está configurado para informar al cliente que está enviando
la respuesta y el cuerpo está formateado en formato html.
Y luego, finalmente, diremos res.end ('').
Así que esto termina la respuesta aquí, y cuando esto se hace,
esta información se enviará de vuelta al cliente.
Así que aquí, permítanme construir una página html en línea aquí,
así que diré <Hola,
mundo! .
Y cierre la etiqueta h1, la etiqueta del cuerpo,
y la etiqueta html, justo ahí.
Y esa es una respuesta HTML válida que
se puede enviar de vuelta desde nuestro servidor aquí.
Así que este servidor, como usted espera simplemente va a enviar un hola mundo al cliente.
Así que ahora que hemos configurado el servidor, tenemos que iniciar este servidor.
Para iniciar este servidor en nota,
tenemos que decir server.listen.
Y esto iniciará el puerto de escucha en el que el servidor escuchará las
solicitudes entrantes.
Y esto se iniciaría en el número de puerto dado mi puerto,
que ya hemos establecido aquí en el puerto const.
Y el segundo parámetro es el nombre de host que ya configuramos anteriormente.
Y el tercer parámetro es una función que se
ejecutará cuando se inicie el servidor.
En esta función sólo vamos a imprimir la información sobre el servidor.
Así que aquí sólo voy a decir console.log.
Y en el console.log,
voy a imprimir la información, así que usaré una cita inversa.
Así que tenga en cuenta el uso de la cita atrás no la cita normal.
La razón por la que estamos usando eso es porque vamos a usar
algunas variables dentro de la cadena que vamos a construir aquí.
Entonces diremos que el servidor se ejecuta en http://.
Y luego diremos $ y
luego el nombre del host.
Recuerde que este nombre de host, ya ha declarado anteriormente.
Y luego la segunda parte,
diremos: $ y puerto.
Por lo tanto, estos dos valores serán sustituidos por los valores correspondientes.
Y ya que estamos adjuntando esto entre comillas.
Y si incluye algo dentro de aumentos de dólares,
eso será reemplazado por su valor en esta cadena aquí.
Eso es todo.
Tenemos un servidor HTTP simple en funcionamiento.
Así que vamos a guardar los cambios en esto.
E iremos a poner en marcha nuestra aplicación y veremos qué sirve.
Al ir al terminal, escribamos npm start, y
esto debería iniciar nuestra aplicación.
Y notamos que imprime nuestro dicho que el servidor se ejecuta
en http://localhost:3000.
Ahora puede acceder a esta URL escribiéndola en la barra de direcciones de cualquier navegador.
Así que déjame iniciar una ventana del navegador Chrome y luego escribir esto y
ver lo que el servidor devolverá.
Iniciando una nueva ventana.
Déjame escribir http://
localhost: 3000.
Y eso debería devolver un Hello World como esperamos.
Ahora, cuando vamos a la consola, ves que en la consola hay
detalles del encabezado de solicitudes entrantes se imprimen aquí.
Algunas cosas son muy fáciles de localizar aquí.
Entonces, este es el host, localhost: 3000, y también ves que el «user-agent»
está configurado en «Chrome» aquí, la versión de Chrome que estoy usando aquí.
Así que esa es una ilustración interesante del mensaje de solicitud HTTP.
Y lo que está contenido en el encabezado del mensaje de solicitud que vino aquí.
Tan interesante observar lo que su servidor está
imprimiendo en la pantalla aquí.
Con esto, completamos la primera mitad de este ejercicio.
Ahora podemos inicializar esta aplicación en un repositorio de Git,
y luego guardar los cambios en el repositorio de Git.
Así que sigamos adelante y hagamos eso a continuación.
En el tipo de símbolo, get init, y eso inicializó el repositorio.
Y luego diremos estado de git y verás que estos dos archivos son nuevos.
Entonces diremos git add.
Y hacer git commit
-m «Node HTTP Ejemplo 1".
Y luego verifique esto en nuestro repositorio de Git.
Ahora otra herramienta que es muy útil
cuando estamos mirando aplicaciones del lado del servidor se llama Postman.
Ahora Postman viene en forma de una extensión del navegador Chrome o
una herramienta independiente que puede descargar e instalar en su computadora.
Entonces, para hacer eso, en nuestro navegador vamos a escribir http.
getpostman.com.
Y aquí es donde puede obtener la
herramienta Postman para su sistema operativo específico e instalarlo.
La herramienta Postman le permite crear solicitudes HTTP y luego enviarlas.
Y también le da la flexibilidad de configurar los encabezados para
su solicitud HTTP antes de enviarla.
Y luego, cuando la respuesta regrese, puede examinar la respuesta,
incluidos los encabezados de la respuesta que regresa desde el lado del servidor.
Así que me parece que el cartero es muy útil.
Hay algunas otras herramientas como esta,
pero Postman parece ser el mejor del mercado en este momento.
Así que voy a hacer uso de Cartero durante el resto de este curso.
Si no desea instalarlo,
también puede instalar la extensión del navegador Chrome de Postman y luego usarla.
Voy a descargar la versión de macOS de Postman y
luego instalarla en mi máquina y luego hacer uso de ella.
Una vez que tenga
instalado el Postman, ya sea la versión independiente o la extensión del navegador Chrome, puede iniciarlo.
Y verá que la interfaz de usuario es más o menos la misma
tanto para la versión estándar como para la extensión del navegador Chrome.
Y una vez que tenga el Cartero en funcionamiento,
escriba en el cuadro URL de solicitud,
localhost: 3000.
Y envíate la solicitud a ti mismo.
Asegúrese de que el servidor HTTP de nodo esté activo y en ejecución.
Entonces, cuando envíe la solicitud,
obtendría inmediatamente una respuesta del servidor con el código HTML aquí.
Ahora la ventaja, como puede ver,
con el uso de Postman es que se puede ver el cuerpo real del mensaje.
También puede mirar los encabezados para ver lo que se ha enviado desde el servidor.
También puedes configurar una gran cantidad de detalles en Postman cuando estás enviando.
Solicitud del servidor.
Ahora muchos de estos pueden no ser muy fáciles de hacer usando una ventana estándar del navegador.
Entonces, esa es la razón por la que prefiero usar [INAUDIBLE] para
generar las solicitudes HTTP a mi servidor.
Y luego observando la respuesta que regresa desde el lado del servidor.
También tenga en cuenta que muestra el código de estado aquí y otra información sobre
la solicitud y el tiempo de respuesta desde el lado del servidor.
Ahora que hemos creado su servidor HTTP basado en nodo simple,
vamos a ampliarlo más, vamos a crear un par de archivos HTML en la carpeta pública.
Lo llamaremos así como index.html.
Y luego también aboutus.html,
y luego simplemente incluya algo de información de huesos desnudos aquí.
Así que diremos html, y
título como Esto es index.html.
Y luego escribiremos el cuerpo de la página html.
Diga h1 Index.html y
el cuerpo y entonces este es
el contenido de este archivo.
Algún código html básico aquí, permítanme copiar esto y
luego pegar también en la página aboutus.html.
Y el contenido del archivo aboutus.html, eso es todo.
Acabamos de crear dos páginas HTML, y
estas son páginas HTML estáticas que hemos creado en la carpeta pública.
Ahora, ¿podemos configurar nuestro servidor HTTP de nodo para poder servir páginas estáticas?
Así que esto es lo que vamos a configurar en la segunda parte de este ejercicio.
Así que volviendo al archivo index.js,
además del módulo de código HTTP,
también voy a importar el módulo de código del sistema de archivos.
Y ese módulo de código de ruta.
La ruta permite especificar la parte de un archivo en el sistema de archivos local.
El módulo del sistema de archivos le permite leer y
escribir archivos desde su sistema de archivos local.
Entonces, con esto, dirán servidor constante, http.CreateServer.
Para el registro de la consola, en lugar de escribir encabezados de solicitud completos,
simplemente
escribiré información suficiente, así que diré, Solicitar,
Solo la URL de esa solicitud.
Por método.
Entonces, el método sería obtener la publicación del puerto o eliminar los métodos.
Así que esto registrará esta información.
Ahora, lo que vamos a hacer es en lugar de enviar
esta respuesta, la respuesta estándar hola world.
Aquí, vamos a examinar el método y
luego vamos a decir si req.method es igual a GET.
Por lo tanto, solo serviremos las solicitudes GET en este ejemplo.
De lo contrario, diremos que hay un si.
Entonces, si hay una solicitud GET que entra,
entonces examinaremos,
La URL que viene,
así que diremos si req.url es/,
diremos FileURL igual a html.
Entonces, si no obtiene un nombre de archivo específico, pero
simplemente envía la solicitud al código de host local 3000.
Se establecerá por defecto en index.html, de
lo contrario dirá FileURL es igual a req.url.
Así que de esta manera, ha construido qué archivo al servidor.
Ahora, diremos que encontraremos la ruta del archivo,
diremos ruta, Resolver,
por lo que el módulo de ruta admite este método de resolución, por lo que
esto traducirá esto en el archivo completo de carpetas de ruta,
el archivo que acabamos de construir,
el fileURL que acabamos de construir.
Así que esto nos dará la ruta completa para el archivo, y
luego diremos constante FileExtension.
Así que si desea asegurarse de que
la extensión del nombre de archivo es HTML.
Así que desde FilePath,
examinaremos la extensión del nombre de archivo y
luego diremos si FileExt ==.
Entonces, si se trata de un archivo HTML, entonces sabemos cómo servirlo desde esta
relación particular del servidor HTTP nodo.
Así que diremos si la extensión de archivo es HTML, entonces sabemos que
el archivo es un archivo HTML y tenemos los dos archivos, índice y aboutus.html.
Así que vamos a comprobar si este archivo existe, así que
vamos a decir si el archivo existe, FilePath.
Entonces, el método existe comprobará si el archivo existe,
así que diremos fs.exists (FilePath),
y este tomará
como segundo parámetro, una función de devolución de llamada.
Así que observe el uso de la primera función de devolución de llamada en nuestro ejemplo.
Así que esta función de devolución de llamada se llamará con este parámetro existe allí.
Entonces, dentro de este parámetro de devolución de llamada, esto existe será verdadero o falso.
Así que este es el parámetro de retorno para esta función de devolución de llamada.
Así que aquí, Vamos a comprobar, y
vamos a decir si (! existe), por lo
que significa que el archivo no existe,
entonces diremos Res.statusCode = 404.
Recuerde que si el archivo no existe, enviará un código de estado de 404 diciendo que
no puede encontrar el archivo.
Y luego diremos Res.setHeader,
y estableceremos el encabezado en 'Content-Type',
'text/html'.
Y luego tenemos que enviar el, archivo HTML aquí, o el código HTML.
Así que voy a hacer el código HTML básico, html body h1.
Error 404,
diremos, + FileURL +
'no encontrado'.
Y cerrar, La página HTML.
Así que aquí, como notará, está usando la función existente
del módulo del sistema de archivos para verificar si el archivo existe.
Entonces da la ruta del archivo como el primer parámetro, y
el segundo es la función de devolución de llamada.
Dentro de esta función de devolución de llamada, si dice que existe es falso, entonces va a
enviar de vuelta el mensaje de error 404 estándar, diciendo que no puede encontrar el archivo.
Y después de hacer esto, simplemente,
devolveremos, de lo contrario,
Diremos Res.statusCode
= 200, Res.setHeader,
('Content-Type', 'text/html').
Ahora, tenemos que leer el archivo y luego enviar el archivo.
Así que aquí es donde, desde el módulo del sistema de archivos,
usaremos el CreateReadStream,
que tomará el FilePath como parámetro.
Por lo tanto, este método CreateReadStream leerá en el archivo de esta FilePath.
Y luego convertirlo en flujo de bytes,
y luego canalizarán esto a través de la respuesta.
Así que eso se incluirá en la respuesta, en el cuerpo de la respuesta.
Así que de esa manera acabamos de tomar el archivo y
luego lo construimos en la respuesta aquí.
Y eso es todo, el archivo está listo para ser enviado, ¿de acuerdo?
Así que esto es si la extensión del archivo es html,
estamos comprobando para asegurarnos de que maneja esto correctamente.
Así que aquí es donde leerás en el archivo y luego lo enviarás.
Si la extensión del archivo no es html, entonces, por supuesto, necesitamos enviar un mensaje de error.
Así que ahí mismo veremos, vamos a copiar este
código en particular, desde aquí.
Y luego pégalo ahí.
Diremos, de lo contrario StatusCode = 404, Texto/html de contexto,
y el mensaje de error dice, Error 404, FileURL.
No se encuentra, pero
no es un archivo HTML.
Así que ese es el error que vamos a enviar de vuelta en este caso.
Y, por último, para el último caso,
así que aquí estamos diciendo el método.
Entonces, esto más corresponde al método de solicitud.
Entonces, si el método de solicitud no es GET, sino algún otro método de solicitud,
entonces no manejaremos eso en esta versión nuestra aplicación Node.
Así que enviaremos de vuelta StatusCode 404,
Content html, y diremos Error 404.
Y vamos a decir, método req,
No, Soportado,
no soportado por este servidor HTML nodo aquí, eso es todo.
Con estos cambios, ahora estamos listos para reiniciar nuestro navegador.
Y luego dejar que sirva los archivos HTML aquí.
Así que vamos a guardar los cambios, y luego ir y reiniciar nuestro servidor, y
luego examinar lo que envía cuando enviamos varias solicitudes al servidor. Al
ir al terminal, si el servidor se está ejecutando,
deténgalo escribiendo Ctrl+C y, a continuación, reinicie el servidor.
Y cuando el servidor esté en funcionamiento, le enviemos algunas solicitudes.
Primero, desde un navegador, y luego desde Postman.
Vaya a la ventana de su navegador, escriba localhost: 3000, y
vea que esto devuelve el archivo index.html como esperamos.
Y luego diremos localhost: 3000/index.html,
y esto también devolverá el archivo index.html.
Ahora, si enviamos aboutus.html, dice Aboutus.html, y lo devuelve correctamente.
Ahora enviemos una solicitud para aboutus.txt, y veamos qué hace.
Entonces dice que /aboutus.txt no es un archivo HTML.
Entonces enviemos una solicitud a test.html.
Y sabemos que test.html no existe, por lo que dice /test.html no encontrado.
Así que vemos que mediante el uso del navegador, somos capaces de buscar
los archivos que existen, y el servidor es capaz de enviar los archivos al navegador.
Vamos ahora a Postman y tratar de generar las mismas solicitudes,
y ver la respuesta del servidor.
A continuación, yendo a Postman, enviemos una solicitud GET a localhost: 3000/.
Y ves que esto devuelve el archivo index.html.
Vamos a enviar una solicitud a aboutus.html.
Y luego ves que devuelve el archivo aboutus.html.
Y luego enviaremos una solicitud al archivo de texto,
y luego dice error 404, no un archivo HTML.
Y verá que el estado aquí dice, 404 no encontrado.
Y luego, en lugar de enviar una solicitud GET,
veremos que esta es la ventaja de usar Postman, enviaré una solicitud PUT.
Y notará que esto dice, Error: PUT no compatible, y
así con el estado 404 aquí, y así sucesivamente.
Así es como se puede configurar un servidor HTTP de nodo
para poder servir archivos, archivos HTTP en este caso particular.
Ahora puede imaginar fácilmente extender
este servidor HTTP para manejar muchos tipos diferentes de archivos y así sucesivamente.
Pero, por supuesto, correspondientemente,
el código también se complicará más que lo que tenemos en este momento.
Con esto, completamos este ejercicio.
En este ejercicio, hemos visto cómo podemos configurar un
servidor HTTP basado en nodo simple que sirve archivos de nuestro sitio de servidor.
[ MÚSICA]