Nada mata m\u00e1s la experiencia de usuario en una aplicaci\u00f3n de IA que tener que esperar.<\/p>\n\n\n\n
Env\u00edas tu pregunta, la pantalla se queda en blanco y pasan varios segundos eternos hasta que, de golpe, aparece la respuesta completa. Es frustrante.<\/p>\n\n\n\n
En el art\u00edculo anterior<\/a> construimos un asistente conversacional que manten\u00eda el historial y pod\u00eda usar herramientas. Pero el usuario segu\u00eda teniendo que esperar a que el modelo generara toda<\/strong> la respuesta (incluyendo la ejecuci\u00f3n de tools) antes de ver una sola palabra en pantalla.<\/p>\n\n\n\n En esta tercera parte vamos a solucionar eso de ra\u00edz: implementaremos streaming real en tiempo real<\/strong> usando Server-Sent Events (SSE)<\/strong>.<\/p>\n\n\n\n Nota importante<\/strong>: Symfony AI est\u00e1 todav\u00eda en fase de preview (v0.7.0). La API, los nombres de clases y el comportamiento pueden cambiar bastante antes de la versi\u00f3n estable. El c\u00f3digo que ver\u00e1s aqu\u00ed refleja el estado actual del componente y lo ir\u00e9 actualizando seg\u00fan evolucione. Siempre consulta la documentaci\u00f3n oficial antes de usarlo en producci\u00f3n.<\/p>\n<\/blockquote>\n\n\n\n La idea es bastante sencilla: en vez de calcular toda la respuesta y enviarla de una vez, abrimos un canal HTTP que se mantiene vivo y vamos escribiendo en \u00e9l a medida que el modelo genera texto.<\/p>\n\n\n\n Symfony nos facilita esto con la clase \u00bfPor qu\u00e9<\/strong> El n\u00facleo de la soluci\u00f3n est\u00e1 en Piensa en el stream como una cinta transportadora de tokens. Cuando el modelo decide que necesita ejecutar una herramienta (por ejemplo, buscar productos), la cinta no se detiene de golpe. Symfony AI crea internamente una nueva \u201ccinta\u201d que recoge el resultado de la herramienta y la fusiona con la original.<\/p>\n\n\n\n Desde nuestro c\u00f3digo, todo este proceso es invisible. El framework se encarga de la recursividad por nosotros.<\/p>\n\n\n\n T\u00e9cnicamente, En el lado del cliente ya no podemos usar un La API nativa Para que todo se sienta fluido, mostramos un spinner animado justo despu\u00e9s de enviar el mensaje. Este desaparece autom\u00e1ticamente en cuanto llega el primer token real:<\/p>\n\n\n\n Durante el desarrollo probamos varios modelos disponibles en Groq para encontrar el mejor equilibrio entre velocidad, coste y capacidad real de usar herramientas.<\/p>\n\n\n\n\n
1. El Backend: StreamedResponse y SSE<\/h2>\n\n\n\n
StreamedResponse<\/code>. En lugar de devolver un Response<\/code> normal, le pasamos una funci\u00f3n que se encarga de escribir directamente en el buffer de salida mientras el modelo trabaja.<\/p>\n\n\n\nEl Controlador del Chat<\/h3>\n\n\n\n
\/\/ src\/Controller\/ProductChatController.php\n\npublic function chat(Request $request, ProductChatService $chatService): Response\n{\n $body = json_decode($request->getContent(), true);\n $question = trim(strip_tags($body['question'] ?? ''));\n\n $response = new StreamedResponse(function () use ($chatService, $question) {\n try {\n $chatService->streamAsk($question, function (string $token) {\n \/\/ Enviamos cada trozo en formato SSE\n echo \"data: \" . json_encode(['text' => $token], JSON_THROW_ON_ERROR) . \"\\n\\n\";\n ob_flush();\n flush();\n });\n\n \/\/ Indicamos al cliente que el stream ha terminado\n echo \"data: [DONE]\\n\\n\";\n ob_flush();\n flush();\n } catch (\\Throwable $e) {\n echo \"data: \" . json_encode(['error' => 'Error: ' . $e->getMessage()]) . \"\\n\\n\";\n ob_flush();\n flush();\n }\n });\n\n $response->headers->set('Content-Type', 'text\/event-stream');\n $response->headers->set('Cache-Control', 'no-cache');\n $response->headers->set('X-Accel-Buffering', 'no'); \/\/ Muy importante\n $response->headers->set('Connection', 'keep-alive');\n\n return $response;\n}<\/code><\/pre>\n\n\n\n\n
X-Accel-Buffering: no<\/code>?<\/strong>
Nginx, por defecto, acumula los chunks de respuesta en su propio buffer para optimizar el ancho de banda. En un streaming esto es contraproducente: los tokens llegar\u00edan en grupos en lugar de uno a uno, rompiendo la sensaci\u00f3n de tiempo real. Esta cabecera le dice a Nginx que desactive ese buffering para esta respuesta concreta.<\/p>\n<\/blockquote>\n\n\n\n2. El Servicio: Consumiendo el Stream de Symfony AI<\/h2>\n\n\n\n
ProductChatService<\/code>. Aqu\u00ed invocamos al agente con la opci\u00f3n stream => true<\/code>.<\/p>\n\n\n\nEl reto de las Tools anidadas<\/h3>\n\n\n\n
$result->getContent()<\/code> devuelve un generador que, mediante yield from<\/code>, encadena todos los flujos (inicial, de la herramienta y de la respuesta final) en una sola secuencia lineal de objetos Delta<\/code>.<\/p>\n\n\n\n\/\/ src\/AI\/ProductChatService.php\n\npublic function streamAsk(string $userQuestion, \\Closure $onChunk): void\n{\n $session = $this->requestStack->getSession();\n $history = $session->get('chat_history', []);\n $history[] = ['role' => 'user', 'content' => $userQuestion];\n\n $messages = $this->buildMessageBag($history);\n $result = $this->defaultAgent->call($messages, ['stream' => true]);\n $stream = $result->getContent();\n $fullAnswer = '';\n\n foreach ($stream as $delta) {\n if ($delta instanceof \\Symfony\\AI\\Platform\\Result\\Stream\\Delta\\TextDelta) {\n $content = $delta->getText();\n if ($content !== '') { \/\/ Importante: !== '' en lugar de empty()\n $fullAnswer .= $content;\n $onChunk($content);\n }\n }\n }\n\n \/\/ Fallback por si el modelo no gener\u00f3 texto (ej. error silencioso tras una Tool)\n if (trim($fullAnswer) === '') {\n $fullAnswer = 'Lo siento, hubo un problema procesando tu solicitud.';\n $onChunk($fullAnswer);\n }\n\n $history[] = ['role' => 'assistant', 'content' => $fullAnswer];\n \/\/ Guardamos solo los \u00faltimos 10 mensajes\n $session->set('chat_history', array_slice($history, -10));\n}<\/code><\/pre>\n\n\n\n3. El Frontend: ReadableStream y UX Profesional<\/h2>\n\n\n\n
fetch<\/code> tradicional que espera a que termine toda la respuesta. Ahora leemos el cuerpo de la respuesta en tiempo real usando body.getReader()<\/code>.<\/p>\n\n\n\n\u00bfPor qu\u00e9 no usar
EventSource<\/code>?<\/h3>\n\n\n\nEventSource<\/code> est\u00e1 pensada para SSE, pero solo acepta peticiones GET<\/strong>. Como necesitamos enviar la pregunta por POST<\/strong> (y posiblemente el historial), implementamos nuestro propio parser SSE con fetch<\/code>. La complejidad extra es m\u00ednima y el control que obtenemos vale la pena.<\/p>\n\n\n\nProcesando el flujo en JavaScript Vanilla<\/h3>\n\n\n\n
\/\/ templates\/chat\/demo.html.twig\n\nasync function sendMessage() {\n const text = inputPrompt.value.trim();\n if (!text) return;\n\n \/\/ ... l\u00f3gica de UI (spinner, deshabilitar input, etc.)\n\n const response = await fetch('\/api\/chat', { ... });\n\n \/\/ Limpiamos el indicador de carga en cuanto llega el primer chunk\n aiBubble.innerHTML = '';\n\n const reader = response.body.getReader();\n const decoder = new TextDecoder('utf-8');\n let buffer = '';\n\n while (true) {\n const { done, value } = await reader.read();\n if (done) break;\n\n buffer += decoder.decode(value, { stream: true });\n let boundary = buffer.indexOf('\\n\\n');\n\n while (boundary !== -1) {\n const chunk = buffer.slice(0, boundary);\n buffer = buffer.slice(boundary + 2);\n\n if (chunk.startsWith('data: ')) {\n const dataStr = chunk.slice(6);\n if (dataStr === '[DONE]') break;\n\n try {\n const data = JSON.parse(dataStr);\n if (data.text) {\n aiBubble.innerHTML += escapeHTML(data.text).replace(\/\\n\/g, '<br>');\n chatContainer.scrollTop = chatContainer.scrollHeight;\n }\n } catch (e) {}\n }\n boundary = buffer.indexOf('\\n\\n');\n }\n }\n}<\/code><\/pre>\n\n\n\nIndicador de carga (Typing Indicator)<\/h3>\n\n\n\n
.typing-indicator span {\n height: 8px;\n width: 8px;\n background: #555;\n display: inline-block;\n border-radius: 50%;\n animation: bounce 1.3s infinite;\n}\n\n@keyframes bounce {\n 0%, 60%, 100% { transform: translateY(0); }\n 30% { transform: translateY(-4px); }\n}<\/code><\/pre>\n\n\n\n4. Elige bien el modelo: el tama\u00f1o no lo es todo<\/h2>\n\n\n\n
Comparativa real<\/h3>\n\n\n\n