diff --git a/src/server/live_view_server.ts b/src/server/live_view_server.ts index 7479c9ee..020b1543 100644 --- a/src/server/live_view_server.ts +++ b/src/server/live_view_server.ts @@ -103,8 +103,12 @@ export class LiveViewServer { const connectionId = nanoid(); // handle ws messages socket.on('message', async message => { + console.log("received message", connectionId); await this.messageRouter.onMessage(socket, message, this._router, connectionId, this.signingSecret); }); + socket.on('close', async code => { + await this.messageRouter.onClose(code, connectionId); + }) }); this.httpServer.listen(this.port, () => { diff --git a/src/server/socket/message_router.ts b/src/server/socket/message_router.ts index 7b197b91..4dffb2f3 100644 --- a/src/server/socket/message_router.ts +++ b/src/server/socket/message_router.ts @@ -14,7 +14,7 @@ export type PhxMessage = export class MessageRouter { - async onMessage(ws: WebSocket, message: WebSocket.RawData, router: LiveViewRouter, connectionId: string, signingSecret: string) { + public async onMessage(ws: WebSocket, message: WebSocket.RawData, router: LiveViewRouter, connectionId: string, signingSecret: string) { // parse string to JSON const rawPhxMessage: PhxIncomingMessage = JSON.parse(message.toString()); @@ -22,7 +22,6 @@ export class MessageRouter { if (typeof rawPhxMessage === 'object' && Array.isArray(rawPhxMessage) && rawPhxMessage.length === 5) { const [joinRef, messageRef, topic, event, payload] = rawPhxMessage; - let componentManager: LiveViewComponentManager | undefined; try { switch (event) { case "phx_join": @@ -54,8 +53,13 @@ export class MessageRouter { } + public async onClose(code: number, connectionId: string) { + // when client closes connection send phx_leave message + // to component manager via connectionId broadcast + await PubSub.broadcast(connectionId, {type: "phx_leave", message: [null, null, "phoenix", "phx_leave", {}]}); + } - async onPhxJoin(ws: WebSocket, message: PhxJoinIncoming, router: LiveViewRouter, signingSecret: string, connectionId: string) { + private async onPhxJoin(ws: WebSocket, message: PhxJoinIncoming, router: LiveViewRouter, signingSecret: string, connectionId: string) { // use url to route join request to component const [joinRef, messageRef, topic, event, payload] = message; const { url: urlString, redirect: redirectString } = payload;