Tengo un servidor express en ejecución que envía datos con res.write()
Buscador.js
function fetcher() { console.log("called fetcher") fetch('/units.html', { method: "POST", body: JSON.stringify({ "NAME": document.getElementById("NAME").value, }), //headers: { "Content-Type": "application/json" } } ) .then(function(response) { console.log("inside middle function") return response.text(); }) .then(function(data) { console.log(data) }); }índice.js
app.post('/units.html', function(req, res, next) { res.write("hello once") res.write("hello twice"); res.end() });Quiero hacer algo cada vez que ejecuto res.write.
Veo "hola una vezhola dos veces" en la consola del navegador, lo que me dice que todos los datos se transfieren después de ejecutar res.end.
¿Hay alguna forma de ejecutar console.log cada vez que se ejecuta res.write?
Server => res.write("hello once") Client => console.log("hello once") Server => res.write("hello twice") Client => console.log("hello twice") Server => res.end()Los navegadores modernos (Chrome, Edge, Firefox) le permiten acceder a la transmisión entrante recuperada por una llamada fetch() . El documento de MDN está aquí , pero lo encontré bastante confuso y tuve que usar varias otras fuentes de Internet para averiguar cómo hacerlo funcionar.
Aquí hay un ejemplo simple.
Primero, el servidor que escribe algunas cadenas en una respuesta separadas por un retraso cuando se solicita /stream :
const express = require('express'); const app = express(); const path = require('path'); function delay(t, v) { return new Promise(resolve => { setTimeout(resolve, t, v); }); } app.get("/", (req, res) => { res.sendFile(path.resolve("temp.html")); }); // output separate pieces of data with a delay between them app.get("/stream", async (req, res) => { // must set content-type for this to work in Firefox res.setHeader('Content-Type', 'text/plain'); res.write("hello1"); await delay(1000); res.write("hello2"); await delay(1000); res.write("hello3"); await delay(1000); res.end("hello4"); }); app.listen(80); Luego, la página HTML "/" de este servidor web, esa página luego realiza una solicitud a /stream :
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="icon" href="data:,"> </head> <body> This is an empty page <script> function Decodeuint8arr(uint8array){ return new TextDecoder("utf-8").decode(uint8array); } async function run() { const response = await fetch('/stream'); const reader = response.body.getReader(); while (true) { const { value, done } = await reader.read(); if (done) break; console.log(`Received: "${Decodeuint8arr(value)}"`); } console.log('Response fully received'); } run().catch(err => { console.log(err); }); </script> </body> </html>Cuando solicito esta página en Chrome, obtengo este resultado:
Received: "hello1" Received: "hello2" Received: "hello3" Received: "hello4" Response fully receivedPor lo tanto, puede obtener datos entrantes a medida que llegan a la transmisión. Tenga en cuenta que no hay garantías particulares sobre los límites entre los paquetes que llegan. Esto sucede para mostrar cada paquete bien y claramente separado, pero eso es solo porque estoy enviando un fragmento de datos muy pequeño que encaja muy bien en un paquete y lo estoy enviando a través de una red muy rápida. Si los datos eran más grandes, es posible que no lleguen en una sola porción.
Entonces, para cualquier cosa que no sea usos muy simples, necesitará al menos algún tipo de "protocolo" simple para su formato de datos para que pueda discernir con seguridad dónde termina un paquete y comienza el siguiente y tener algún código que lo analice. Por ejemplo, podría delinear cada paquete con algún carácter especial (como un salto de línea) y su código de lectura no asumiría que tiene un paquete completo hasta que obtenga un carácter de salto de línea.