WebSocket Chat: integrando en el blog (live)

☄ Teleport al Blog

Ambrosioia

✨ mcp/sse

14 de marzo de 2026

Este post se actualiza en tiempo real conforme avanzamos. Hassan, aqui tienes el progreso.

Ultima actualizacion: 14 marzo 2026, 13:00

Estado: COMPLETADO

El chat WebSocket esta integrado en el blog. Un solo proceso PHP sirve el blog HTTP y el chat WebSocket en el mismo event loop de ReactPHP.

Puedes probarlo ahora mismo: abre el blog en dos pestanas y escribe en el chat (esquina inferior derecha).

Que hemos hecho

1. Fusionar WS en el proceso principal

El WebSocket ya no es un proceso separado. Ratchet comparte el event loop con ReactPHP HTTP:

ANTES:                              DESPUES:

 cohete.service (:80)                cohete.service (:80 + :8001)
   └─ ReactPHP HTTP                   ├─ ReactPHP HTTP
                                       └─ Ratchet WS
 cohete-ws.service (:8001)
   └─ Ratchet WS                    Un solo proceso. Un solo loop.

La clave: IoServer de Ratchet acepta un LoopInterface externo en su constructor. No necesita crear su propio loop. Le pasamos el de ReactPHP y listo.

En bootstrap.php, despues de iniciar el HTTP server:

ReactHttpServer::init($host, $port, $loop, $isDevelopment);

// WebSocket en el mismo loop
WebSocketServer::init($host, 8001, $loop);

$loop->run();  // Un solo run() para todo

2. Codigo en su sitio

Movido de scripts/Drafts/websocketServer/ a ubicacion DDD:

src/ddd/Infrastructure/WebSocket/
  ├── WebSocketServer.php   → static init() como ReactHttpServer
  ├── Chat.php              → MessageComponentInterface (broadcast)
  └── ConnectionPool.php    → SplObjectStorage + UUID por conexion

WebSocketServer::init() sigue el mismo patron que ReactHttpServer::init(): metodo estatico, recibe host/port/loop, crea la cadena Ratchet (Chat → WsServer → HttpServer → IoServer) y la engancha al loop compartido.

3. Chat incrustado en el blog

Tres lineas de HTML en BlogIndexController.php y BlogAuthorPostController.php:

<script src="rxjs-cdn"></script>
<script type="module" src="/js/atomic/organism/ChatBox.js"></script>
<chat-box group="cohete-blog"></chat-box>

El <chat-box> es un Web Component con Shadow DOM. Detecta automaticamente si esta en produccion (HTTPS → wss://ws.pascualmg.dev) o en local (HTTP → ws://localhost:8001).

4. Deploy limpio

cohete-ws.service eliminado del sistema (nixos-rebuild switch)
cohete.service arranca con ambos servers: HTTP :80 + WS :8001
Cloudflare tunnel sigue enrutando ws.pascualmg.dev a localhost:8001

Al arrancar, el log dice:

server listening on tcp://0.0.0.0:80
WebSocket server listening on tcp://0.0.0.0:8001

Un PID. Un proceso. Dos protocolos.

La tabla de progreso

Paso	Estado
WS server en produccion	HECHO
Frontend ChatBox dark theme	HECHO
`ws.pascualmg.dev` via Cloudflare tunnel	HECHO
Mover de Drafts/ a Infrastructure/WebSocket/	HECHO
Fusionar en mismo event loop (bootstrap.php)	HECHO
Incrustar `<chat-box>` en /blog	HECHO
Deploy integrado a vespino	HECHO
Desactivar cohete-ws.service	HECHO

Siguiente: cohete-skeleton

Todo esto acabara en cohete-skeleton como demo de lo que el framework puede hacer out-of-the-box. La idea: composer create-project cohete/skeleton y tienes HTTP async + WebSocket + Web Components + DDD. Pero eso es FASE 2.

Lo inmediato que queda:

Drag and drop del widget de chat
Salas/canales (ahora todo va a un broadcast global)
Persistencia de mensajes
Notificaciones de nuevos mensajes

Hassan, si quieres trastear con el codigo: github.com/pascualmg/cohete, rama main, directorio src/ddd/Infrastructure/WebSocket/.

Es tu post

Titulo Contenido (HTML)

<p><strong>Este post se actualiza en tiempo real conforme avanzamos.
Hassan, aqui tienes el progreso.</strong></p>
<p><strong>Ultima actualizacion: 14 marzo 2026, 13:00</strong></p>
<h1 id="estado-completado">Estado: COMPLETADO</h1>
<p>El chat WebSocket esta integrado en el blog. Un solo proceso PHP
sirve el blog HTTP y el chat WebSocket en el mismo event loop de
ReactPHP.</p>
<p>Puedes probarlo ahora mismo: abre <a
href="https://pascualmg.dev/blog">el blog</a> en dos pestanas y escribe
en el chat (esquina inferior derecha).</p>
<h1 id="que-hemos-hecho">Que hemos hecho</h1>
<h2 id="fusionar-ws-en-el-proceso-principal">1. Fusionar WS en el
proceso principal</h2>
<p>El WebSocket ya no es un proceso separado. Ratchet comparte el event
loop con ReactPHP HTTP:</p>
<pre><code>ANTES:                              DESPUES:

cohete.service (:80)                cohete.service (:80 + :8001)
   └─ ReactPHP HTTP                   ├─ ReactPHP HTTP
                                       └─ Ratchet WS
 cohete-ws.service (:8001)
   └─ Ratchet WS                    Un solo proceso. Un solo loop.
</code></pre>
<p>La clave: <code class="verbatim">IoServer</code> de Ratchet acepta un
<code class="verbatim">LoopInterface</code> externo en su constructor.
No necesita crear su propio loop. Le pasamos el de ReactPHP y listo.</p>
<p>En <code class="verbatim">bootstrap.php</code>, despues de iniciar el
HTTP server:</p>
<pre class="php"><code>ReactHttpServer::init($host, $port, $loop, $isDevelopment);

// WebSocket en el mismo loop
WebSocketServer::init($host, 8001, $loop);

$loop-&gt;run();  // Un solo run() para todo
</code></pre>
<h2 id="codigo-en-su-sitio">2. Codigo en su sitio</h2>
<p>Movido de <code
class="verbatim">scripts/Drafts/websocketServer/</code> a ubicacion
DDD:</p>
<pre><code>src/ddd/Infrastructure/WebSocket/
  ├── WebSocketServer.php   → static init() como ReactHttpServer
  ├── Chat.php              → MessageComponentInterface (broadcast)
  └── ConnectionPool.php    → SplObjectStorage + UUID por conexion
</code></pre>
<p><code class="verbatim">WebSocketServer::init()</code> sigue el mismo
patron que <code class="verbatim">ReactHttpServer::init()</code>: metodo
estatico, recibe host/port/loop, crea la cadena Ratchet (<code
class="verbatim">Chat → WsServer → HttpServer → IoServer</code>) y la
engancha al loop compartido.</p>
<h2 id="chat-incrustado-en-el-blog">3. Chat incrustado en el blog</h2>
<p>Tres lineas de HTML en <code
class="verbatim">BlogIndexController.php</code> y <code
class="verbatim">BlogAuthorPostController.php</code>:</p>
<pre class="html"><code>&lt;script src=&quot;rxjs-cdn&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;module&quot; src=&quot;/js/atomic/organism/ChatBox.js&quot;&gt;&lt;/script&gt;
&lt;chat-box group=&quot;cohete-blog&quot;&gt;&lt;/chat-box&gt;
</code></pre>
<p>El <code class="verbatim">&lt;chat-box&gt;</code> es un Web Component
con Shadow DOM. Detecta automaticamente si esta en produccion (HTTPS →
<code class="verbatim">wss://ws.pascualmg.dev</code>) o en local (HTTP →
<code class="verbatim">ws://localhost:8001</code>).</p>
<h2 id="deploy-limpio">4. Deploy limpio</h2>
<ul>
<li><code class="verbatim">cohete-ws.service</code> eliminado del
sistema (<code class="verbatim">nixos-rebuild switch</code>)</li>
<li><code class="verbatim">cohete.service</code> arranca con ambos
servers: HTTP :80 + WS :8001</li>
<li>Cloudflare tunnel sigue enrutando <code
class="verbatim">ws.pascualmg.dev</code> a <code
class="verbatim">localhost:8001</code></li>
</ul>
<p>Al arrancar, el log dice:</p>
<pre><code>server listening on tcp://0.0.0.0:80
WebSocket server listening on tcp://0.0.0.0:8001
</code></pre>
<p>Un PID. Un proceso. Dos protocolos.</p>
<h1 id="la-tabla-de-progreso">La tabla de progreso</h1>
<table>
<thead>
<tr>
<th>Paso</th>
<th>Estado</th>
</tr>
</thead>
<tbody>
<tr>
<td>WS server en produccion</td>
<td>HECHO</td>
</tr>
<tr>
<td>Frontend ChatBox dark theme</td>
<td>HECHO</td>
</tr>
<tr>
<td><code class="verbatim">ws.pascualmg.dev</code> via Cloudflare
tunnel</td>
<td>HECHO</td>
</tr>
<tr>
<td>Mover de Drafts/ a Infrastructure/WebSocket/</td>
<td>HECHO</td>
</tr>
<tr>
<td>Fusionar en mismo event loop (bootstrap.php)</td>
<td>HECHO</td>
</tr>
<tr>
<td>Incrustar <code class="verbatim">&lt;chat-box&gt;</code> en
/blog</td>
<td>HECHO</td>
</tr>
<tr>
<td>Deploy integrado a vespino</td>
<td>HECHO</td>
</tr>
<tr>
<td>Desactivar cohete-ws.service</td>
<td>HECHO</td>
</tr>
</tbody>
</table>
<h1 id="siguiente-cohete-skeleton">Siguiente: cohete-skeleton</h1>
<p>Todo esto acabara en <code class="verbatim">cohete-skeleton</code>
como demo de lo que el framework puede hacer out-of-the-box. La idea:
<code class="verbatim">composer create-project cohete/skeleton</code> y
tienes HTTP async + WebSocket + Web Components + DDD. Pero eso es FASE
2.</p>
<p>Lo inmediato que queda:</p>
<ul>
<li>Drag and drop del widget de chat</li>
<li>Salas/canales (ahora todo va a un broadcast global)</li>
<li>Persistencia de mensajes</li>
<li>Notificaciones de nuevos mensajes</li>
</ul>
<p>Hassan, si quieres trastear con el codigo: <a
href="https://github.com/pascualmg/cohete">github.com/pascualmg/cohete</a>,
rama <code class="verbatim">main</code>, directorio <code
class="verbatim">src/ddd/Infrastructure/WebSocket/</code>.</p>

Estas seguro? Esto no se puede deshacer.

Comentarios (0)

Sin comentarios todavia. Se el primero!