Bienvenidos sean a este post, hoy veremos como utilizar al objeto HTTPClient.
Antes de ver como mitigar con el computamiento intensivo de codigo mediante su segunda forma, enviar el proceso a un backend, hablaremos sobre el objeto HTTPClient y como trabajar con el, dado que este ya viene incluido en node.js y nos sera principalmente util para hacer las solicitudes HTTP porque tiene la capacidad de trabajar con cualquier tipo de solicitud HTTP.
Este ejemplo esta inspirado principalmente en los comando wget y curl al momento de ser usados para hacer solicitudes HTTP, para entender el concepto vamos a salir de nuestro proyecto hecho con Express y vamos a crear un nuevo archivo con el nombre de wget.js y le agregaremos el siguiente codigo:
wget.js
const http = require('http');
const url = require('url');
const util = require('util');
const argURL = process.argv[2];
const parsedURL = url.parse(argURL, true);
const opciones = {
host: parsedURL.hostname,
port: parsedURL.port,
path: parsedURL.pathname,
method: 'GET'
};
if (parsedURL.search) opciones.path += `?${parsedURL.search}`;
const req = http.request(opciones);
req.on('response', res => {
console.log(`STATUS: ${res.statusCode}`);
console.log(`HEADERS: ${util.inspect(res.headers)}`);
res.setEncoding('utf8');
res.on('data', chunk => { console.log(`BODY: ${chunk}`); });
res.on('error', err => { console.log(`ERROR RESPONSE: ${err}`); });
});
req.on('error', err => { console.log(`ERROR REQUEST: ${err}`); });
req.end();Primero importaremos tres modulos para poder manejar no solamente el http sino ottros temas tambien, despues definiremos dos variables:
- argURL, sera la url que pasaremos en la linea de comando e inspeccionaremos
- parsedURL, contendra toda la informacion devuelta por el metodo parse en la url informada
Despues definimos un objeto llamado opciones, el cual usaremos para informar al http.request cuales propiedades debe obtener, luego tenemos un condicional donde verifica si existe un search en parsedURL y en caso de ser verdadero lo agrega al valor de path en opciones, lo siguiente es crear el objeto encargado de pasar el request con las opciones creadas antes, ya casi finalizando tenemos dos escuchadores de eventos, el primero sera para recibir la respuesta del servidor (response) y aqui mostraremos varios datos del servidor como son el estado, los headers, el body y si ocurre algun error al momento de recibir la respuesta (response), el siguiente escuchador esta especificado para manejar cualquier error en la request o solicitud y lo mostrara en pantalla y por ultimmo lo mostraremos en pantalla, veamos un ejemplo:
$ node wget.js http://nodejs.com
STATUS: 302
HEADERS: {
server: 'nginx',
date: 'Sat, 14 Oct 2023 22:02:14 GMT',
'content-type': 'text/html; charset=UTF-8',
'transfer-encoding': 'chunked',
connection: 'close',
'x-powered-by': 'PHP/7.2.4',
expires: 'Sat, 14 Oct 2023 23:02:14 GMT',
pragma: 'cache',
'cache-control': 'max-age=3600',
location: 'http://www.nodejs.com/',
'server-node': 'S006'
}
$En este caso le pasamos como URL a la pagina de node.js y nos devolvio esta informacion, ahora probemos con otra direccion:
$ node wget.js http://example.com
STATUS: 200
HEADERS: {
'accept-ranges': 'bytes',
age: '150598',
'cache-control': 'max-age=604800',
'content-type': 'text/html; charset=UTF-8',
date: 'Sat, 14 Oct 2023 22:17:21 GMT',
etag: '"3147526947"',
expires: 'Sat, 21 Oct 2023 22:17:21 GMT',
'last-modified': 'Thu, 17 Oct 2019 07:18:26 GMT',
server: 'ECS (mic/9A9D)',
vary: 'Accept-Encoding',
'x-cache': 'HIT',
'content-length': '1256',
connection: 'close'
}
BODY: <!doctype html>
<html>
<head>
<title>Example Domain</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style type="text/css">
body {
background-color: #f0f0f2;
margin: 0;
padding: 0;
font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
div {
width: 600px;
margin: 5em auto;
padding: 2em;
background-color: #fdfdff;
border-radius: 0.5em;
box-shadow: 2px 3px 7px 2px rgba(0,0,0,0.02);
}
a:link, a:visited {
color: #38488f;
text-decoration: none;
}
@media (max-width: 700px) {
div {
margin: 0 auto;
width: auto;
}
}
</style>
</head>
<body>
<div>
<h1>Example Domain</h1>
<p>This domain is for use in illustrative examples in documents. You may use this
domai
BODY: n in literature without prior coordination or asking for permission.</p>
<p><a href="https://www.iana.org/domains/example">More information...</a></p>
</div>
</body>
</html>
En este caso usamos al dominio example.com, tambien pueden usar a example.org, no solo nos devolvio los datos sino tambien los del body, en el caso anterior, y asi podran hacerlo con cualquier pagina que le pasen.
Si repasamos el codigo en el objeto opciones pasamos algunos campos que deseamos obtener pero tambien podriamos haber agregado a headers y mediante un array tomar varios datos de este, asi como el method podriamos haber pasado a PUT o POST.
Otro detalle a tener en cuenta es el objeto response no es otra cosa que un objeto EventEmitter que emite los eventos data y error, y el primero sera para los datos recibidos y el segundo para los errores, en cambio el objeto request es un objeto WritableStream la cual es util para las solicitudes HTTP conteniendo datos, tales como PUT o POST, dado que este objeto tiene una funcion write (la cual escribe datos al solicitante) y su formato es especificado por el estandar MIME, siendo que este estandar fue creado para describir el formato de cada pieza de datos y la comunidad WWW lo adopto para su uso en la web, este nos servira de base para nuestro siguiente tema del cual hablaremos en el siguiente post.
En resumen, hoy hemos visto como trabajar solicitudes con el HTTPClient, vimos un ejemplo practico donde nos devuelve informacion al estilo wget o curl, despues vimos un poco mas de teoria, espero les haya resultado util sigueme en tumblr, Twitter o Facebook para recibir una notificacion cada vez que subo un nuevo post en este blog, nos vemos en el proximo post.
Donación
Es para mantenimento del sitio, gracias!
$1.50
El blog de Tinchicus 