From a77934d8fc2d24854566a47b55c31af48357591e Mon Sep 17 00:00:00 2001 From: Homero304 Date: Fri, 21 Aug 2020 23:55:34 -0500 Subject: [PATCH 01/10] Long polling --- 5-network/10-long-polling/article.md | 86 +++++++++---------- .../10-long-polling/longpoll.view/browser.js | 16 ++-- .../10-long-polling/longpoll.view/index.html | 6 +- .../10-long-polling/longpoll.view/server.js | 12 +-- 4 files changed, 60 insertions(+), 60 deletions(-) diff --git a/5-network/10-long-polling/article.md b/5-network/10-long-polling/article.md index 68eec844e..ee5d5d985 100644 --- a/5-network/10-long-polling/article.md +++ b/5-network/10-long-polling/article.md @@ -1,63 +1,63 @@ -# Long polling +# Sondeo largo -Long polling is the simplest way of having persistent connection with server, that doesn't use any specific protocol like WebSocket or Server Side Events. +Sondeo largo es la forma más sencilla de tener una conexión persistente con el servidor, que no utiliza ningún protocolo específico como WebSocket o Eventos enviados por el servidor. -Being very easy to implement, it's also good enough in a lot of cases. +Al ser muy fácil de implementar, también es suficientemente bueno en muchos casos. -## Regular Polling +## Sondeo regular -The simplest way to get new information from the server is periodic polling. That is, regular requests to the server: "Hello, I'm here, do you have any information for me?". For example, once in 10 seconds. +La forma más sencilla de obtener nueva información del servidor es un sondeo periódico. Es decir, solicitudes regulares al servidor: "Hola, estoy aquí, ¿tienes información para mí?". Por ejemplo, una vez en 10 segundos. -In response, the server first takes a notice to itself that the client is online, and second - sends a packet of messages it got till that moment. +En respuesta, el servidor primero se da cuenta de que el cliente está en línea, y segundo, envía un paquete de mensajes que recibió hasta ese momento. -That works, but there are downsides: -1. Messages are passed with a delay up to 10 seconds (between requests). -2. Even if there are no messages, the server is bombed with requests every 10 seconds, even if the user switched somewhere else or is asleep. That's quite a load to handle, speaking performance-wise. +Eso funciona, pero hay desventajas: +1. Los mensajes se transmiten con un retraso de hasta 10 segundos (entre solicitudes). +2. Incluso si no hay mensajes, el servidor se bombardea con solicitudes cada 10 segundos, aunque el usuario haya cambiado a otro lugar o este dormido. Eso es bastante difícil de manejar, hablando en términos de rendimiento. -So, if we're talking about a very small service, the approach may be viable, but generally, it needs an improvement. +Entonces, si hablamos de un servicio muy pequeño, el enfoque puede ser viable, pero en general, necesita una mejora. -## Long polling +## Sondeo largo -So-called "long polling" is a much better way to poll the server. +El llamado "sondeo largo" es una forma mucho mejor de sondear el servidor. -It's also very easy to implement, and delivers messages without delays. +También es muy fácil de implementar y envía mensajes sin demoras. -The flow: +El flujo: -1. A request is sent to the server. -2. The server doesn't close the connection until it has a message to send. -3. When a message appears - the server responds to the request with it. -4. The browser makes a new request immediately. +1. Se envía una solicitud al servidor. +2. El servidor no cierra la conexión hasta que tiene un mensaje para enviar. +3. Cuando aparece un mensaje, el servidor responde a la solicitud con él. +4. El navegador realiza una nueva solicitud de inmediato. -The situation when the browser sent a request and has a pending connection with the server, is standard for this method. Only when a message is delivered, the connection is reestablished. +La situación en la que el navegador envió una solicitud y tiene una conexión pendiente con el servidor, es estándar para este método. Solo cuando se entrega un mensaje, se restablece la conexión. ![](long-polling.svg) -If the connection is lost, because of, say, a network error, the browser immediately sends a new request. +Si se pierde la conexión, por ejemplo, debido a un error de red, el navegador envía inmediatamente una nueva solicitud. -A sketch of client-side `subscribe` function that makes long requests: +Un esquema de la función de suscripción del lado del cliente que realiza solicitudes largas: ```js async function subscribe() { let response = await fetch("/subscribe"); if (response.status == 502) { - // Status 502 is a connection timeout error, - // may happen when the connection was pending for too long, - // and the remote server or a proxy closed it - // let's reconnect + // El estado 502 es un error de tiempo de espera de conexión, + // puede suceder cuando la conexión estuvo pendiente durante demasiado tiempo, + // y el servidor remoto o un proxy lo cerró + // vamos a reconectarnos await subscribe(); } else if (response.status != 200) { - // An error - let's show it + // Un error : vamos a mostrarlo showMessage(response.statusText); - // Reconnect in one second + // Vuelve a conectar en un segundo await new Promise(resolve => setTimeout(resolve, 1000)); await subscribe(); } else { - // Get and show the message + // Recibe y muestra el mensaje let message = await response.text(); showMessage(message); - // Call subscribe() again to get the next message + // Llama a subscribe () nuevamente para obtener el siguiente mensaje await subscribe(); } } @@ -65,32 +65,32 @@ async function subscribe() { subscribe(); ``` -As you can see, `subscribe` function makes a fetch, then waits for the response, handles it and calls itself again. +Como puedes ver, la función `subscribe` realiza una búsqueda, luego espera la respuesta, la maneja y se llama a sí misma nuevamente. -```warn header="Server should be ok with many pending connections" -The server architecture must be able to work with many pending connections. +```warn header="El servidor debería estar bien con muchas conexiones pendientes" +La arquitectura del servidor debe poder funcionar con muchas conexiones pendientes. -Certain server architectures run a process per connect. For many connections there will be as many processes, and each process takes a lot of memory. So many connections just consume it all. +Algunas arquitecturas de servidor ejecutan un proceso por conexión. Para muchas conexiones, habrá tantos procesos y cada proceso requiere mucha memoria. Tantas conexiones lo consumen todo. -That's often the case for backends written in PHP, Ruby languages, but technically isn't a language, but rather implementation issue. Most modern language allow to implement a proper backend, but some of them make it easier than the other. +Este suele ser el caso de los backends escritos en PHP, lenguajes Ruby, pero técnicamente no es un lenguaje, sino un problema de implementación. La mayoría de los lenguajes modernos permiten implementar un backend adecuado, pero algunos lo hacen más fácil que el otro. -Backends written using Node.js usually don't have such problems. +Los backends escritos con Node.js generalmente no tienen estos problemas. ``` -## Demo: a chat +## Demostración: un chat -Here's a demo chat, you can also download it and run locally (if you're familiar with Node.js and can install modules): +Aquí hay un chat de demostración, también puedes descargarlo y ejecutarlo localmente (si estás familiarizado con Node.js y puedes instalar módulos): [codetabs src="longpoll" height=500] -Browser code is in `browser.js`. +El código del navegador está en `browser.js`. -## Area of usage +## Área de uso -Long polling works great in situations when messages are rare. +El sondeo largo funciona muy bien en situaciones en las que es raro recibir mensajes. -If messages come very often, then the chart of requesting-receiving messages, painted above, becomes saw-like. +Si los mensajes llegan con mucha frecuencia, entonces el gráfico de mensajes solicitados vs recibidos, pintado arriba, se vuelve en forma de sierra. -Every message is a separate request, supplied with headers, authentication overhead, and so on. +Cada mensaje es una solicitud separada, provista de encabezados, sobrecarga de autenticación, etc. -So, in this case, another method is preferred, such as [Websocket](info:websocket) or [Server Sent Events](info:server-sent-events). +Entonces, en este caso, se prefiere otro método, como [Websocket](info:websocket) o [Eventos enviados por el servidor](info:server-sent-events). diff --git a/5-network/10-long-polling/longpoll.view/browser.js b/5-network/10-long-polling/longpoll.view/browser.js index 3a66aa5c6..d0968d39d 100644 --- a/5-network/10-long-polling/longpoll.view/browser.js +++ b/5-network/10-long-polling/longpoll.view/browser.js @@ -1,4 +1,4 @@ -// Sending messages, a simple POST +// Envío de mensajes, un simple POST function PublishForm(form, url) { function sendMessage(message) { @@ -18,7 +18,7 @@ function PublishForm(form, url) { }; } -// Receiving messages with long polling +// Recibir mensajes con sondeo largo function SubscribePane(elem, url) { function showMessage(message) { @@ -31,18 +31,18 @@ function SubscribePane(elem, url) { let response = await fetch(url); if (response.status == 502) { - // Connection timeout - // happens when the connection was pending for too long - // let's reconnect + // El tiempo de conexión expiro + // sucede cuando la conexión estuvo pendiente durante demasiado tiempo + // vamos a reconectarnos await subscribe(); } else if (response.status != 200) { - // Show Error + // Mostrar Error showMessage(response.statusText); - // Reconnect in one second + // Volver a conectar en un segundo await new Promise(resolve => setTimeout(resolve, 1000)); await subscribe(); } else { - // Got message + // Tengo un mensaje let message = await response.text(); showMessage(message); await subscribe(); diff --git a/5-network/10-long-polling/longpoll.view/index.html b/5-network/10-long-polling/longpoll.view/index.html index 7452c1838..fafe9922b 100644 --- a/5-network/10-long-polling/longpoll.view/index.html +++ b/5-network/10-long-polling/longpoll.view/index.html @@ -1,11 +1,11 @@ -All visitors of this page will see messages of each other. +Todos los visitantes de esta página verán mensajes entre ellos.
- +
@@ -13,6 +13,6 @@ diff --git a/5-network/10-long-polling/longpoll.view/server.js b/5-network/10-long-polling/longpoll.view/server.js index c3903e375..1d19ade33 100644 --- a/5-network/10-long-polling/longpoll.view/server.js +++ b/5-network/10-long-polling/longpoll.view/server.js @@ -34,28 +34,28 @@ function publish(message) { function accept(req, res) { let urlParsed = url.parse(req.url, true); - // new client wants messages + // El nuevo cliente quiere mensajes if (urlParsed.pathname == '/subscribe') { onSubscribe(req, res); return; } - // sending a message + // enviando un mensaje if (urlParsed.pathname == '/publish' && req.method == 'POST') { - // accept POST + // aceptar POST req.setEncoding('utf8'); let message = ''; req.on('data', function(chunk) { message += chunk; }).on('end', function() { - publish(message); // publish it to everyone + publish(message); // publicarlo a todos res.end("ok"); }); return; } - // the rest is static + // el resto es estático fileServer.serve(req, res); } @@ -71,7 +71,7 @@ function close() { if (!module.parent) { http.createServer(accept).listen(8080); - console.log('Server running on port 8080'); + console.log('Servidor que se ejecuta en el puerto 8080'); } else { exports.accept = accept; From a00d708201ebe370922a9fd45b218ec50dadf6b0 Mon Sep 17 00:00:00 2001 From: Homero Enrique Marin Galindo Date: Sat, 22 Aug 2020 20:48:18 -0500 Subject: [PATCH 02/10] Update 5-network/10-long-polling/article.md acentuacion de conjugacion estar en subjuntivo Co-authored-by: joaquinelio --- 5-network/10-long-polling/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/5-network/10-long-polling/article.md b/5-network/10-long-polling/article.md index ee5d5d985..b27ac103d 100644 --- a/5-network/10-long-polling/article.md +++ b/5-network/10-long-polling/article.md @@ -12,7 +12,7 @@ En respuesta, el servidor primero se da cuenta de que el cliente está en línea Eso funciona, pero hay desventajas: 1. Los mensajes se transmiten con un retraso de hasta 10 segundos (entre solicitudes). -2. Incluso si no hay mensajes, el servidor se bombardea con solicitudes cada 10 segundos, aunque el usuario haya cambiado a otro lugar o este dormido. Eso es bastante difícil de manejar, hablando en términos de rendimiento. +2. Incluso si no hay mensajes, el servidor se bombardea con solicitudes cada 10 segundos, aunque el usuario haya cambiado a otro lugar o esté dormido. Eso es bastante difícil de manejar, hablando en términos de rendimiento. Entonces, si hablamos de un servicio muy pequeño, el enfoque puede ser viable, pero en general, necesita una mejora. From 30108fa40bdd007b062ee7ffda5a2f76fe7b66f6 Mon Sep 17 00:00:00 2001 From: Homero Enrique Marin Galindo Date: Sat, 22 Aug 2020 20:53:05 -0500 Subject: [PATCH 03/10] Update 5-network/10-long-polling/article.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit cuesstión de percepcion... Co-authored-by: joaquinelio --- 5-network/10-long-polling/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/5-network/10-long-polling/article.md b/5-network/10-long-polling/article.md index b27ac103d..0967f51b4 100644 --- a/5-network/10-long-polling/article.md +++ b/5-network/10-long-polling/article.md @@ -67,7 +67,7 @@ subscribe(); Como puedes ver, la función `subscribe` realiza una búsqueda, luego espera la respuesta, la maneja y se llama a sí misma nuevamente. -```warn header="El servidor debería estar bien con muchas conexiones pendientes" +```warn header="El servidor debería estar bien aún con muchas conexiones pendientes" La arquitectura del servidor debe poder funcionar con muchas conexiones pendientes. Algunas arquitecturas de servidor ejecutan un proceso por conexión. Para muchas conexiones, habrá tantos procesos y cada proceso requiere mucha memoria. Tantas conexiones lo consumen todo. From dae638f55706964daacade4a06d35db9e02706c7 Mon Sep 17 00:00:00 2001 From: Homero Enrique Marin Galindo Date: Sat, 22 Aug 2020 20:54:44 -0500 Subject: [PATCH 04/10] Update 5-network/10-long-polling/article.md conexiones, procesos y memoria consumida Co-authored-by: joaquinelio --- 5-network/10-long-polling/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/5-network/10-long-polling/article.md b/5-network/10-long-polling/article.md index 0967f51b4..463b88735 100644 --- a/5-network/10-long-polling/article.md +++ b/5-network/10-long-polling/article.md @@ -70,7 +70,7 @@ Como puedes ver, la función `subscribe` realiza una búsqueda, luego espera la ```warn header="El servidor debería estar bien aún con muchas conexiones pendientes" La arquitectura del servidor debe poder funcionar con muchas conexiones pendientes. -Algunas arquitecturas de servidor ejecutan un proceso por conexión. Para muchas conexiones, habrá tantos procesos y cada proceso requiere mucha memoria. Tantas conexiones lo consumen todo. +Algunas arquitecturas de servidor ejecutan un proceso por conexión. Habrá tantos procesos como conexiones y cada proceso requiere mucha memoria. Demasiadas conexiones la consumirán toda. Este suele ser el caso de los backends escritos en PHP, lenguajes Ruby, pero técnicamente no es un lenguaje, sino un problema de implementación. La mayoría de los lenguajes modernos permiten implementar un backend adecuado, pero algunos lo hacen más fácil que el otro. From 03a0d1749174a7064e18c5e56a9691457e2677a5 Mon Sep 17 00:00:00 2001 From: Homero Enrique Marin Galindo Date: Sat, 22 Aug 2020 20:57:03 -0500 Subject: [PATCH 05/10] Update 5-network/10-long-polling/article.md lenguajes, problema de implementacion no del lenguaje en si. algunos lenguajes son mas amigables que otros Co-authored-by: joaquinelio --- 5-network/10-long-polling/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/5-network/10-long-polling/article.md b/5-network/10-long-polling/article.md index 463b88735..c2396bd71 100644 --- a/5-network/10-long-polling/article.md +++ b/5-network/10-long-polling/article.md @@ -72,7 +72,7 @@ La arquitectura del servidor debe poder funcionar con muchas conexiones pendient Algunas arquitecturas de servidor ejecutan un proceso por conexión. Habrá tantos procesos como conexiones y cada proceso requiere mucha memoria. Demasiadas conexiones la consumirán toda. -Este suele ser el caso de los backends escritos en PHP, lenguajes Ruby, pero técnicamente no es un lenguaje, sino un problema de implementación. La mayoría de los lenguajes modernos permiten implementar un backend adecuado, pero algunos lo hacen más fácil que el otro. +Este suele ser el caso de los backends escritos en lenguajes PHP, Ruby, pero técnicamente no es un problema del lenguaje sino de implementación. La mayoría de los lenguajes modernos permiten implementar un backend adecuado, pero algunos lo hacen más fácil que otros. Los backends escritos con Node.js generalmente no tienen estos problemas. ``` From 1372c70c5aeb2ea3fe1802fa04548b45a3bd8de8 Mon Sep 17 00:00:00 2001 From: Homero Enrique Marin Galindo Date: Sat, 22 Aug 2020 20:57:23 -0500 Subject: [PATCH 06/10] Update 5-network/10-long-polling/longpoll.view/browser.js pasado de expirar Co-authored-by: joaquinelio --- 5-network/10-long-polling/longpoll.view/browser.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/5-network/10-long-polling/longpoll.view/browser.js b/5-network/10-long-polling/longpoll.view/browser.js index d0968d39d..f73ec95e4 100644 --- a/5-network/10-long-polling/longpoll.view/browser.js +++ b/5-network/10-long-polling/longpoll.view/browser.js @@ -31,7 +31,7 @@ function SubscribePane(elem, url) { let response = await fetch(url); if (response.status == 502) { - // El tiempo de conexión expiro + // El tiempo de conexión expiró // sucede cuando la conexión estuvo pendiente durante demasiado tiempo // vamos a reconectarnos await subscribe(); From 8355a921240d620763c5df7fde4dd0745f0c3634 Mon Sep 17 00:00:00 2001 From: Homero Enrique Marin Galindo Date: Sat, 22 Aug 2020 20:58:32 -0500 Subject: [PATCH 07/10] Update 5-network/10-long-polling/longpoll.view/server.js a -> para Co-authored-by: joaquinelio --- 5-network/10-long-polling/longpoll.view/server.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/5-network/10-long-polling/longpoll.view/server.js b/5-network/10-long-polling/longpoll.view/server.js index 1d19ade33..13697a7fc 100644 --- a/5-network/10-long-polling/longpoll.view/server.js +++ b/5-network/10-long-polling/longpoll.view/server.js @@ -48,7 +48,7 @@ function accept(req, res) { req.on('data', function(chunk) { message += chunk; }).on('end', function() { - publish(message); // publicarlo a todos + publish(message); // publicarlo para todos res.end("ok"); }); From 7510557e9a300e7abe1f267eba061e8d31b6d864 Mon Sep 17 00:00:00 2001 From: Homero Enrique Marin Galindo Date: Sat, 22 Aug 2020 21:03:38 -0500 Subject: [PATCH 08/10] Update 5-network/10-long-polling/article.md periodico Co-authored-by: joaquinelio --- 5-network/10-long-polling/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/5-network/10-long-polling/article.md b/5-network/10-long-polling/article.md index c2396bd71..5bf64ed6d 100644 --- a/5-network/10-long-polling/article.md +++ b/5-network/10-long-polling/article.md @@ -6,7 +6,7 @@ Al ser muy fácil de implementar, también es suficientemente bueno en muchos ca ## Sondeo regular -La forma más sencilla de obtener nueva información del servidor es un sondeo periódico. Es decir, solicitudes regulares al servidor: "Hola, estoy aquí, ¿tienes información para mí?". Por ejemplo, una vez en 10 segundos. +La forma más sencilla de obtener nueva información del servidor es un sondeo periódico. Es decir, solicitudes regulares al servidor: "Hola, estoy aquí, ¿tienes información para mí?". Por ejemplo, una vez cada 10 segundos. En respuesta, el servidor primero se da cuenta de que el cliente está en línea, y segundo, envía un paquete de mensajes que recibió hasta ese momento. From 2f4d80505a65112a81493799460b330098306cd2 Mon Sep 17 00:00:00 2001 From: Homero304 Date: Sat, 22 Aug 2020 21:20:09 -0500 Subject: [PATCH 09/10] error 502: tiempo de espera agotado --- 5-network/10-long-polling/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/5-network/10-long-polling/article.md b/5-network/10-long-polling/article.md index 5bf64ed6d..f20b647ca 100644 --- a/5-network/10-long-polling/article.md +++ b/5-network/10-long-polling/article.md @@ -42,7 +42,7 @@ async function subscribe() { let response = await fetch("/subscribe"); if (response.status == 502) { - // El estado 502 es un error de tiempo de espera de conexión, + // El estado 502 es un error de "tiempo de espera agotado" en la conexión, // puede suceder cuando la conexión estuvo pendiente durante demasiado tiempo, // y el servidor remoto o un proxy lo cerró // vamos a reconectarnos From 882a263bc6d7fbd79594310c7e1dd73115cc26ac Mon Sep 17 00:00:00 2001 From: Homero304 Date: Sat, 22 Aug 2020 21:23:53 -0500 Subject: [PATCH 10/10] =?UTF-8?q?cerr=C3=B3=20la=20conexi=C3=B3n?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 5-network/10-long-polling/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/5-network/10-long-polling/article.md b/5-network/10-long-polling/article.md index f20b647ca..33f779631 100644 --- a/5-network/10-long-polling/article.md +++ b/5-network/10-long-polling/article.md @@ -44,7 +44,7 @@ async function subscribe() { if (response.status == 502) { // El estado 502 es un error de "tiempo de espera agotado" en la conexión, // puede suceder cuando la conexión estuvo pendiente durante demasiado tiempo, - // y el servidor remoto o un proxy lo cerró + // y el servidor remoto o un proxy la cerró // vamos a reconectarnos await subscribe(); } else if (response.status != 200) {