Opté por serve-static. Este no es el único servidor de este tipo en NPM, pero funciona bien y se ajusta a nuestros propósitos. El paquete serve-static exporta una función que puede ser llamada con un directorio raíz para producir una función manipuladora de solicitudes. La función manipuladora acepta los argumentos request y response proporcionados por el servidor de "node:http", y un tercer argumento, una función que se llamará si ningún archivo coincide con la solicitud. Queremos que nuestro servidor primero compruebe las solicitudes que deberíamos manejar de manera especial, según lo definido en el enrutador, por lo que lo envolvemos en otra función.
-import {createServer} from "node:http";
-import serveStatic from "serve-static";
+import {createServer} from "node:http";
+import serveStatic from "serve-static";
-function notFound(request, response) {
- response.writeHead(404, "Not found");
- response.end("<h1>Not found</h1>");
+function notFound(request, response) {
+ response.writeHead(404, "Not found");
+ response.end("<h1>Not found</h1>");
}
-class SkillShareServer {
- constructor(talks) {
- this.talks = talks;
- this.version = 0;
- this.waiting = [];
+class SkillShareServer {
+ constructor(talks) {
+ this.talks = talks;
+ this.version = 0;
+ this.waiting = [];
- let fileServer = serveStatic("./public");
- this.server = createServer((request, response) => {
- serveFromRouter(this, request, response, () => {
+ let fileServer = serveStatic("./public");
+ this.server = createServer((request, response) => {
+ serveFromRouter(this, request, response, () => {
fileServer(request, response,
() => notFound(request, response));
});
});
}
- start(port) {
- this.server.listen(port);
+ start(port) {
+ this.server.listen(port);
}
- stop() {
- this.server.close();
+ stop() {
+ this.server.close();
}
}
@@ -189,158 +195,158 @@ Nuestra función serveFromRouter utiliza una convención similar a la del servidor de archivos del capítulo anterior para las respuestas: los manejadores en el enrutador devuelven promesas que se resuelven en objetos que describen la respuesta.
-import {Router} from "./router.mjs";
+import {Router} from "./router.mjs";
-const router = new Router();
-const defaultHeaders = {"Content-Type": "text/plain"};
+const router = new Router();
+const defaultHeaders = {"Content-Type": "text/plain"};
-async function serveFromRouter(server, request,
- response, next) {
- let resolved = await router.resolve(request, server)
- .catch(error => {
- if (error.status != null) return error;
- return {body: String(error), status: 500};
+async function serveFromRouter(server, request,
+ response, next) {
+ let resolved = await router.resolve(request, server)
+ .catch(error => {
+ if (error.status != null) return error;
+ return {body: String(error), status: 500};
});
- if (!resolved) return next();
- let {body, status = 200, headers = defaultHeaders} =
- await resolved;
+ if (!resolved) return next();
+ let {body, status = 200, headers = defaultHeaders} =
+ await resolved;
response.writeHead(status, headers);
response.end(body);
}
Charlas como recursos
-Las charlas que se han propuesto se almacenan en la propiedad talks del servidor, un objeto cuyas propiedades son los títulos de las charlas. Agregaremos algunos controladores a nuestro enrutador que expongan estos como recursos HTTP bajo /charlas/[título].
+Las charlas que se han propuesto se almacenan en la propiedad talks del servidor, un objeto cuyas propiedades son los títulos de las charlas. Agregaremos algunos controladores a nuestro enrutador que expongan estos como recursos HTTP bajo /talks/[título].
El controlador para las solicitudes que GET una sola charla debe buscar la charla y responder ya sea con los datos JSON de la charla o con una respuesta de error 404.
-const talkPath = /^\/charlas\/([^\/]+)$/;
+const talkPath = /^\/talks\/([^\/]+)$/;
-router.add("GET", talkPath, async (server, title) => {
- if (Object.hasOwn(server.talks, title)) {
- return {body: JSON.stringify(server.talks[title]),
- headers: {"Content-Type": "application/json"}};
- } else {
- return {status: 404, body: `No se encontró la charla '${title}'`};
+router.add("GET", talkPath, async (server, title) => {
+ if (Object.hasOwn(server.talks, title)) {
+ return {body: JSON.stringify(server.talks[title]),
+ headers: {"Content-Type": "application/json"}};
+ } else {
+ return {status: 404, body: `No se encontró la charla '${title}'`};
}
});
-Eliminar una charla se hace eliminándola del objeto talks.
+Para eliminar una charla la eliminamos del objeto talks.
-router.add("DELETE", talkPath, async (server, title) => {
- if (Object.hasOwn(server.talks, title)) {
- delete server.talks[title];
+router.add("DELETE", talkPath, async (server, title) => {
+ if (Object.hasOwn(server.talks, title)) {
+ delete server.talks[title];
server.updated();
}
- return {status: 204};
+ return {status: 204};
});
-El método updated, que definiremos más adelante, notifica a las solicitudes de espera larga sobre el cambio.
+El método updated, que definiremos más adelante, notifica a las solicitudes de long polling sobre el cambio.
-Un controlador que necesita leer cuerpos de solicitud es el controlador PUT, que se utiliza para crear nuevas charlas. Debe verificar si los datos que se le proporcionaron tienen propiedades presentador y resumen, que son cadenas de texto. Cualquier dato que provenga de fuera del sistema podría ser un sinsentido y no queremos corromper nuestro modelo de datos interno o fallar cuando lleguen solicitudes incorrectas.
+Un manejador que necesita leer cuerpos de solicitud es el manejador PUT, que se utiliza para crear nuevas charlas. Debe verificar si los datos que se le proporcionaron tienen propiedades presenter y summary, que son cadenas de texto. Cualquier dato que provenga de fuera del sistema podría ser un sinsentido y no queremos corromper nuestro modelo de datos interno o fallar cuando lleguen solicitudes incorrectas.
Si los datos parecen válidos, el controlador almacena un objeto que representa la nueva charla en el objeto talks, posiblemente sobrescribiendo una charla existente con este título, y nuevamente llama a updated.
Para leer el cuerpo del flujo de solicitud, utilizaremos la función json de "node:stream/consumers", que recopila los datos en el flujo y luego los analiza como JSON. Hay exportaciones similares llamadas text (para leer el contenido como una cadena) y buffer (para leerlo como datos binarios) en este paquete. Dado que json es un nombre genérico, la importación lo renombra a readJSON para evitar confusiones.
-import {json as readJSON} from "node:stream/consumers"
+import {json as readJSON} from "node:stream/consumers"
-router.add("PUT", talkPath,
- async (server, title, request) => {
- let talk = await readJSON(request);
- if (!talk ||
- typeof talk.presenter != "string" ||
- typeof talk.summary != "string") {
- return {status: 400, body: "Datos de charla incorrectos"};
+router.add("PUT", talkPath,
+ async (server, title, request) => {
+ let talk = await readJSON(request);
+ if (!talk ||
+ typeof talk.presenter != "string" ||
+ typeof talk.summary != "string") {
+ return {status: 400, body: "Datos de charla incorrectos"};
}
server.talks[title] = {
- title,
- presenter: talk.presenter,
- summary: talk.summary,
- comments: []
+ title,
+ presenter: talk.presenter,
+ summary: talk.summary,
+ comments: []
};
server.updated();
- return {status: 204};
-});
-```Agregar un ((comentario)) a una ((charla)) funciona de manera similar. Usamos `readJSON` para obtener el contenido de la solicitud, validamos los datos resultantes y los almacenamos como un comentario cuando parecen válidos.
-
-```{includeCode: ">code/skillsharing/skillsharing_server.mjs"}
-router.add("POST", /^\/talks\/([^\/]+)\/comments$/,
- async (server, title, request) => {
- let comment = await readJSON(request);
- if (!comment ||
- typeof comment.author != "string" ||
- typeof comment.message != "string") {
- return {status: 400, body: "Datos de comentario incorrectos"};
- } else if (Object.hasOwn(server.talks, title)) {
+ return {status: 204};
+});
+
+Agregar un comentario a una charla funciona de manera similar. Usamos readJSON para obtener el contenido de la solicitud, validamos los datos resultantes y los almacenamos como un comentario cuando parecen válidos.
+
+router.add("POST", /^\/talks\/([^\/]+)\/comments$/,
+ async (server, title, request) => {
+ let comment = await readJSON(request);
+ if (!comment ||
+ typeof comment.author != "string" ||
+ typeof comment.message != "string") {
+ return {status: 400, body: "Datos de comentario incorrectos"};
+ } else if (Object.hasOwn(server.talks, title)) {
server.talks[title].comments.push(comment);
server.updated();
- return {status: 204};
- } else {
- return {status: 404, body: `No se encontró la charla '${title}'`};
+ return {status: 204};
+ } else {
+ return {status: 404, body: `No se encontró la charla '${title}'`};
}
});
Intentar agregar un comentario a una charla inexistente devuelve un error 404.
-Soporte para larga espera
+Soporte para long polling
-El aspecto más interesante del servidor es la parte que maneja la larga espera. Cuando llega una solicitud GET para /charlas, puede ser una solicitud regular o una solicitud de larga espera.
+El aspecto más interesante del servidor es la parte que maneja el long polling (o la larga espera). Cuando llega una solicitud GET para /talks, puede ser una solicitud normal o una solicitud de larga espera.
-Habrá varios lugares en los que debamos enviar una matriz de charlas al cliente, por lo que primero definimos un método auxiliar que construya dicha matriz e incluya un encabezado ETag en la respuesta.
+Habrá varios lugares en los que debamos enviar un array de charlas al cliente, por lo que primero definimos un método auxiliar que construya dicho array e incluya un encabezado ETag en la respuesta.
-SkillShareServer.prototype.talkResponse = function() {
- let talks = Object.keys(this.talks)
- .map(title => this.talks[title]);
- return {
- body: JSON.stringify(talks),
- headers: {"Content-Type": "application/json",
- "ETag": `"${this.version}"`,
- "Cache-Control": "no-store"}
+SkillShareServer.prototype.talkResponse = function() {
+ let talks = Object.keys(this.talks)
+ .map(title => this.talks[title]);
+ return {
+ body: JSON.stringify(talks),
+ headers: {"Content-Type": "application/json",
+ "ETag": `"${this.version}"`,
+ "Cache-Control": "no-store"}
};
};
-El controlador en sí mismo necesita examinar los encabezados de la solicitud para ver si están presentes los encabezados If-None-Match y Prefer. Node almacena los encabezados, cuyos nombres se especifican como insensibles a mayúsculas y minúsculas, bajo sus nombres en minúsculas.
-
-router.add("GET", /^\/talks$/, async (server, request) => {
- let tag = /"(.*)"/.exec(request.headers["if-none-match"]);
- let wait = /\bwait=(\d+)/.exec(request.headers["prefer"]);
- if (!tag || tag[1] != server.version) {
- return server.talkResponse();
- } else if (!wait) {
- return {status: 304};
- } else {
- return server.waitForChanges(Number(wait[1]));
+El manejador en sí mismo necesita examinar los encabezados de la solicitud para ver si están presentes los encabezados If-None-Match y Prefer. Node almacena los encabezados, cuyos nombres se especifican como insensibles a mayúsculas y minúsculas, bajo sus nombres en minúsculas.
+
+router.add("GET", /^\/talks$/, async (server, request) => {
+ let tag = /"(.*)"/.exec(request.headers["if-none-match"]);
+ let wait = /\bwait=(\d+)/.exec(request.headers["prefer"]);
+ if (!tag || tag[1] != server.version) {
+ return server.talkResponse();
+ } else if (!wait) {
+ return {status: 304};
+ } else {
+ return server.waitForChanges(Number(wait[1]));
}
});
-Si no se proporcionó ninguna etiqueta o se proporcionó una etiqueta que no coincide con la versión actual del servidor, el controlador responde con la lista de charlas. Si la solicitud es condicional y las charlas no han cambiado, consultamos el encabezado Prefer para ver si debemos retrasar la respuesta o responder de inmediato.
+Si no se proporcionó ninguna etiqueta o se proporcionó una etiqueta que no coincide con la versión actual del servidor, el manejador responde con la lista de charlas. Si la solicitud es condicional y las charlas no han cambiado, consultamos el encabezado Prefer para ver si debemos retrasar la respuesta o responder de inmediato.
-Las funciones de devolución de llamada para solicitudes retardadas se almacenan en la matriz waiting del servidor para que puedan ser notificadas cuando ocurra algo. El método waitForChanges también establece inmediatamente un temporizador para responder con un estado 304 cuando la solicitud haya esperado el tiempo suficiente.
+Las funciones de callback para solicitudes retardadas se almacenan en el array waiting del servidor para que puedan ser notificadas cuando ocurra algo. El método waitForChanges también establece inmediatamente un temporizador para responder con un estado 304 cuando la solicitud haya esperado el tiempo suficiente.
-SkillShareServer.prototype.waitForChanges = function(time) {
- return new Promise(resolve => {
- this.waiting.push(resolve);
+SkillShareServer.prototype.waitForChanges = function(time) {
+ return new Promise(resolve => {
+ this.waiting.push(resolve);
setTimeout(() => {
- if (!this.waiting.includes(resolve)) return;
- this.waiting = this.waiting.filter(r => r != resolve);
- resolve({status: 304});
- }, time * 1000);
+ if (!this.waiting.includes(resolve)) return;
+ this.waiting = this.waiting.filter(r => r != resolve);
+ resolve({status: 304});
+ }, time * 1000);
});
};
Registrar un cambio con updated incrementa la propiedad versión y despierta todas las solicitudes en espera.
-SkillShareServer.prototype.updated = function() {
- this.version++;
- let response = this.talkResponse();
- this.waiting.forEach(resolve => resolve(response));
- this.waiting = [];
+SkillShareServer.prototype.updated = function() {
+ this.version++;
+ let response = this.talkResponse();
+ this.waiting.forEach(resolve => resolve(response));
+ this.waiting = [];
};
Eso concluye el código del servidor. Si creamos una instancia de SkillShareServer y la iniciamos en el puerto 8000, el servidor HTTP resultante servirá archivos desde el subdirectorio public junto con una interfaz para manejar charlas bajo la URL /talks.
-new SkillShareServer({}).start(8000);
+new SkillShareServer({}).start(8000);
El cliente
@@ -348,7 +354,7 @@ HTML
-Es una convención ampliamente utilizada para servidores web intentar servir un archivo llamado index.html cuando se realiza una solicitud directamente a una ruta que corresponde a un directorio. El módulo de servidor de archivos que utilizamos, serve-static, soporta esta convención. Cuando se realiza una solicitud a la ruta /, el servidor busca el archivo ./public/index.html (./public siendo la raíz que le dimos) y devuelve ese archivo si se encuentra.
+Es una convención ampliamente utilizada para servidores web intentar servir un archivo llamado index.html cuando se realiza una solicitud directamente a una ruta que corresponde a un directorio. El módulo de servidor de archivos que utilizamos, serve-static, adopta esta convención. Cuando se realiza una solicitud a la ruta /, el servidor busca el archivo ./public/index.html (./public siendo la raíz que le dimos) y devuelve ese archivo si se encuentra.
Por lo tanto, si queremos que una página aparezca cuando un navegador apunta a nuestro servidor, deberíamos colocarla en public/index.html. Este es nuestro archivo de índice:
@@ -365,74 +371,74 @@ Acciones
-El estado de la aplicación consiste en la lista de charlas y el nombre del usuario, y lo almacenaremos en un objeto {charlas, usuario}. No permitimos que la interfaz de usuario manipule directamente el estado ni envíe solicitudes HTTP. En cambio, puede emitir acciones que describen lo que el usuario está intentando hacer.
+El estado de la aplicación consiste en la lista de charlas y el nombre del usuario, y lo almacenaremos en un objeto {talks, user}. No permitimos que la interfaz de usuario manipule directamente el estado ni envíe solicitudes HTTP. En cambio, puede emitir acciones que describen lo que el usuario está intentando hacer.
-La función handleAction toma una acción de este tipo y la lleva a cabo. Debido a que nuestras actualizaciones de estado son tan simples, los cambios de estado se manejan en la misma función.
+La función handleAction toma una acción de este tipo y la lleva a cabo. Como nuestras actualizaciones de estado son tan simples, los cambios de estado se manejan en la misma función.
-function handleAction(state, action) {
- if (action.type == "setUser") {
- localStorage.setItem("userName", action.user);
- return {...state, user: action.user};
- } else if (action.type == "setTalks") {
- return {...state, talks: action.talks};
- } else if (action.type == "newTalk") {
+function handleAction(state, action) {
+ if (action.type == "setUser") {
+ localStorage.setItem("userName", action.user);
+ return {...state, user: action.user};
+ } else if (action.type == "setTalks") {
+ return {...state, talks: action.talks};
+ } else if (action.type == "newTalk") {
fetchOK(talkURL(action.title), {
- method: "PUT",
- headers: {"Content-Type": "application/json"},
- body: JSON.stringify({
- presenter: state.user,
- summary: action.summary
+ method: "PUT",
+ headers: {"Content-Type": "application/json"},
+ body: JSON.stringify({
+ presenter: state.user,
+ summary: action.summary
})
}).catch(reportError);
- } else if (action.type == "deleteTalk") {
- fetchOK(talkURL(action.talk), {method: "DELETE"})
+ } else if (action.type == "deleteTalk") {
+ fetchOK(talkURL(action.talk), {method: "DELETE"})
.catch(reportError);
- } else if (action.type == "newComment") {
- fetchOK(talkURL(action.talk) + "/comments", {
- method: "POST",
- headers: {"Content-Type": "application/json"},
- body: JSON.stringify({
- author: state.user,
- message: action.message
+ } else if (action.type == "newComment") {
+ fetchOK(talkURL(action.talk) + "/comments", {
+ method: "POST",
+ headers: {"Content-Type": "application/json"},
+ body: JSON.stringify({
+ author: state.user,
+ message: action.message
})
}).catch(reportError);
}
- return state;
+ return state;
}
Almacenaremos el nombre del usuario en localStorage para que pueda ser restaurado cuando se cargue la página.
Las acciones que necesitan involucrar al servidor realizan peticiones a la red, utilizando fetch, a la interfaz HTTP descrita anteriormente. Utilizamos una función de envoltura, fetchOK, que se asegura de que la promesa devuelta sea rechazada cuando el servidor devuelve un código de error.
-function fetchOK(url, options) {
- return fetch(url, options).then(response => {
- if (response.status < 400) return response;
- else throw new Error(response.statusText);
+function fetchOK(url, options) {
+ return fetch(url, options).then(response => {
+ if (response.status < 400) return response;
+ else throw new Error(response.statusText);
});
}
Esta función auxiliar se utiliza para construir una URL para una charla con un título dado.
-function talkURL(title) {
- return "talks/" + encodeURIComponent(title);
+function talkURL(title) {
+ return "talks/" + encodeURIComponent(title);
}
-Cuando la petición falla, no queremos que nuestra página simplemente se quede ahí, sin hacer nada sin explicación. Así que definimos una función llamada reportError, que al menos muestra al usuario un cuadro de diálogo que le informa que algo salió mal.
+Cuando la petición falla, no queremos que nuestra página simplemente se quede ahí, sin hacer nada sin explicación. Así que definimos una función llamada reportError, que al menos muestra al usuario un cuadro de diálogo que le informa de que algo salió mal.
-function reportError(error) {
+function reportError(error) {
alert(String(error));
}
Renderización de componentes
-Utilizaremos un enfoque similar al que vimos en el Capítulo 19, dividiendo la aplicación en componentes. Pero dado que algunos de los componentes nunca necesitan actualizarse o siempre se redibujan por completo cuando se actualizan, definiremos aquellos no como clases, sino como funciones que devuelven directamente un nodo DOM. Por ejemplo, aquí hay un componente que muestra el campo donde el usuario puede ingresar su nombre:
+Utilizaremos un enfoque similar al que vimos en el Capítulo 19, dividiendo la aplicación en componentes. Pero dado que algunos de los componentes nunca necesitan actualizarse o siempre se redibujan por completo cuando se actualizan, definiremos aquellos no como clases, sino como funciones que devuelven directamente un nodo del DOM. Por ejemplo, aquí hay un componente que muestra el campo dónde el usuario puede ingresar su nombre:
-function renderUserField(name, dispatch) {
- return elt("label", {}, "Tu nombre: ", elt("input", {
- type: "text",
- value: name,
- onchange(event) {
- dispatch({type: "setUser", user: event.target.value});
+function renderUserField(name, dispatch) {
+ return elt("label", {}, "Tu nombre: ", elt("input", {
+ type: "text",
+ value: name,
+ onchange(event) {
+ dispatch({type: "setUser", user: event.target.value});
}
}));
}
@@ -441,30 +447,30 @@ Se utiliza una función similar para renderizar charlas, que incluyen una lista de comentarios y un formulario para agregar un nuevo comentario.
-function renderTalk(talk, dispatch) {
- return elt(
- "section", {className: "talk"},
- elt("h2", null, talk.title, " ", elt("button", {
- type: "button",
- onclick() {
- dispatch({type: "deleteTalk", talk: talk.title});
+function renderTalk(talk, dispatch) {
+ return elt(
+ "section", {className: "talk"},
+ elt("h2", null, talk.title, " ", elt("button", {
+ type: "button",
+ onclick() {
+ dispatch({type: "deleteTalk", talk: talk.title});
}
- }, "Eliminar")),
- elt("div", null, "por ",
- elt("strong", null, talk.presenter)),
- elt("p", null, talk.summary),
+ }, "Eliminar")),
+ elt("div", null, "por ",
+ elt("strong", null, talk.presenter)),
+ elt("p", null, talk.summary),
...talk.comments.map(renderComment),
- elt("form", {
- onsubmit(event) {
+ elt("form", {
+ onsubmit(event) {
event.preventDefault();
- let form = event.target;
- dispatch({type: "newComment",
- talk: talk.title,
- message: form.elements.comment.value});
+ let form = event.target;
+ dispatch({type: "newComment",
+ talk: talk.title,
+ message: form.elements.comment.value});
form.reset();
}
- }, elt("input", {type: "text", name: "comment"}), " ",
- elt("button", {type: "submit"}, "Añadir comentario")));
+ }, elt("input", {type: "text", name: "comment"}), " ",
+ elt("button", {type: "submit"}, "Añadir comentario")));
}
El controlador de evento "submit" llama a form.reset para limpiar el contenido del formulario después de crear una acción "newComment".
@@ -473,84 +479,84 @@ Los comentarios son simples de renderizar.
-function renderComment(comment) {
- return elt("p", {className: "comment"},
- elt("strong", null, comment.author),
- ": ", comment.message);
+function renderComment(comment) {
+ return elt("p", {className: "comment"},
+ elt("strong", null, comment.author),
+ ": ", comment.message);
}
Finalmente, el formulario que el usuario puede usar para crear una nueva charla se representa de la siguiente manera:
-function renderTalkForm(dispatch) {
- let title = elt("input", {type: "text"});
- let summary = elt("input", {type: "text"});
- return elt("form", {
- onsubmit(event) {
+function renderTalkForm(dispatch) {
+ let title = elt("input", {type: "text"});
+ let summary = elt("input", {type: "text"});
+ return elt("form", {
+ onsubmit(event) {
event.preventDefault();
- dispatch({type: "newTalk",
- title: title.value,
- summary: summary.value});
+ dispatch({type: "newTalk",
+ title: title.value,
+ summary: summary.value});
event.target.reset();
}
- }, elt("h3", null, "Enviar una charla"),
- elt("label", null, "Título: ", title),
- elt("label", null, "Resumen: ", summary),
- elt("button", {type: "submit"}, "Enviar"));
+ }, elt("h3", null, "Enviar una charla"),
+ elt("label", null, "Título: ", title),
+ elt("label", null, "Resumen: ", summary),
+ elt("button", {type: "submit"}, "Enviar"));
}
Sondeo
-Para iniciar la aplicación necesitamos la lista actual de charlas. Dado que la carga inicial está estrechamente relacionada con el proceso de sondeo prolongado, el ETag de la carga debe ser utilizado al sondear, escribiremos una función que siga sondeando al servidor en busca de /charlas y llame a una función de devolución de llamada cuando un nuevo conjunto de charlas esté disponible.
+Para iniciar la aplicación necesitamos la lista actual de charlas. Dado que la carga inicial está estrechamente relacionada con el proceso de sondeo prolongado (long polling), el ETag de la carga debe ser utilizado al sondear, escribiremos una función que siga sondeando al servidor en busca de /talks y llame a una función de callback cuando un nuevo conjunto de charlas esté disponible.
-async function pollTalks(update) {
- let tag = undefined;
- for (;;) {
- let response;
- try {
- response = await fetchOK("/charlas", {
- headers: tag && {"If-None-Match": tag,
- "Prefer": "wait=90"}
+async function pollTalks(update) {
+ let tag = undefined;
+ for (;;) {
+ let response;
+ try {
+ response = await fetchOK("/charlas", {
+ headers: tag && {"If-None-Match": tag,
+ "Prefer": "wait=90"}
});
- } catch (e) {
- console.log("La solicitud falló: " + e);
- await new Promise(resolve => setTimeout(resolve, 500));
- continue;
+ } catch (e) {
+ console.log("La solicitud falló: " + e);
+ await new Promise(resolve => setTimeout(resolve, 500));
+ continue;
}
- if (response.status == 304) continue;
- tag = response.headers.get("ETag");
- update(await response.json());
+ if (response.status == 304) continue;
+ tag = response.headers.get("ETag");
+ update(await response.json());
}
}
-Esta es una función async para facilitar el bucle y la espera de la solicitud. Ejecuta un bucle infinito que, en cada iteración, recupera la lista de charlas, ya sea normalmente o, si esta no es la primera solicitud, con las cabeceras incluidas que la convierten en una solicitud de sondeo prolongado.
+Esta es una función async para facilitar el bucle y la espera de la solicitud. Ejecuta un bucle infinito que, en cada iteración, recupera la lista de charlas, ya sea normalmente o, si esta no es la primera solicitud, con las cabeceras incluidas que la convierten en una solicitud de long polling.
-Cuando una solicitud falla, la función espera un momento y luego intenta nuevamente. De esta manera, si tu conexión de red se interrumpe por un tiempo y luego vuelve, la aplicación puede recuperarse y continuar actualizándose. La promesa resuelta a través de setTimeout es una forma de forzar a la función async a esperar.
+Cuando una solicitud falla, la función espera un momento y luego lo intenta de nuevo. De esta manera, si tu conexión de red se interrumpe por un tiempo y luego vuelve, la aplicación puede recuperarse y continuar actualizándose. La promesa resuelta a través de setTimeout es una forma de forzar a la función async a esperar.
-Cuando el servidor devuelve una respuesta 304, eso significa que una solicitud de intercambio de larga duración expiró, por lo que la función debería comenzar inmediatamente la siguiente solicitud. Si la respuesta es un estado 200 normal, su cuerpo se lee como JSON y se pasa a la devolución de llamada, y el valor del encabezado ETag se almacena para la próxima iteración.
+Cuando el servidor devuelve una respuesta 304, eso significa que una solicitud de intercambio de larga duración expiró, por lo que la función debería comenzar inmediatamente la siguiente solicitud. Si la respuesta es un estado 200 normal, su cuerpo se lee como JSON y se pasa a la función de callback, y el valor del encabezado ETag se almacena para la próxima iteración.
La aplicación
El siguiente componente une toda la interfaz de usuario:
-class SkillShareApp {
- constructor(state, dispatch) {
- this.dispatch = dispatch;
- this.talkDOM = elt("div", {className: "talks"});
- this.dom = elt("div", null,
+class SkillShareApp {
+ constructor(state, dispatch) {
+ this.dispatch = dispatch;
+ this.talkDOM = elt("div", {className: "talks"});
+ this.dom = elt("div", null,
renderUserField(state.user, dispatch),
- this.talkDOM,
+ this.talkDOM,
renderTalkForm(dispatch));
- this.syncState(state);
+ this.syncState(state);
}
- syncState(state) {
- if (state.talks != this.talks) {
- this.talkDOM.textContent = "";
- for (let talk of state.talks) {
- this.talkDOM.appendChild(
- renderTalk(talk, this.dispatch));
+ syncState(state) {
+ if (state.talks != this.talks) {
+ this.talkDOM.textContent = "";
+ for (let talk of state.talks) {
+ this.talkDOM.appendChild(
+ renderTalk(talk, this.dispatch));
}
- this.talks = state.talks;
+ this.talks = state.talks;
}
}
}
@@ -559,21 +565,21 @@ Podemos iniciar la aplicación de esta manera:
-function runApp() {
- let user = localStorage.getItem("userName") || "Anon";
- let state, app;
- function dispatch(action) {
+function runApp() {
+ let user = localStorage.getItem("userName") || "Anon";
+ let state, app;
+ function dispatch(action) {
state = handleAction(state, action);
app.syncState(state);
}
- pollTalks(talks => {
- if (!app) {
- state = {user, talks};
- app = new SkillShareApp(state, dispatch);
+ pollTalks(talks => {
+ if (!app) {
+ state = {user, talks};
+ app = new SkillShareApp(state, dispatch);
document.body.appendChild(app.dom);
- } else {
- dispatch({type: "setTalks", talks});
+ } else {
+ dispatch({type: "setTalks", talks});
}
}).catch(reportError);
}
@@ -584,7 +590,7 @@ Ejercicios