simplified / refactored

src/examples/volunteers/component.ts

@@ -1,11 +1,12 @@
 import { html } from "../../server/templates";
 import { LiveViewChangeset, LiveViewExternalEventListener, LiveViewInternalEventListener, LiveViewMountParams, LiveViewSocket, StringPropertyValues } from "../../server/component/types";
 import { SessionData } from "express-session";
-import { Volunteer, changeset, createVolunteer, listVolunteers, getVolunteer, updateVolunteer, VolunteerData, subscribe } from "./data";
+import { Volunteer, changeset, createVolunteer, listVolunteers, getVolunteer, updateVolunteer, VolunteerData } from "./data";
 import { submit } from "../../server/templates/helpers/submit";
 import { form_for } from "../../server/templates/helpers/form_for";
 import { error_tag, telephone_input, text_input } from "../../server/templates/helpers/inputs";
 import { BaseLiveViewComponent } from "../../server/component/base_component";
+import { PubSub } from "../../server/pubsub/SingleProcessPubSub";
 
 export interface VolunteerContext {
   volunteers: Volunteer[]
@@ -21,8 +22,7 @@ export class VolunteerComponent extends BaseLiveViewComponent<VolunteerContext,
 
   mount(params: LiveViewMountParams, session: Partial<SessionData>, socket: LiveViewSocket<VolunteerContext>) {
     if (socket.connected) {
-      console.log("subscribing", socket.id);
-      subscribe(socket);
+      PubSub.subscribe('volunteer', socket.sendInternal);
     }
     return {
       volunteers: listVolunteers(),
@@ -130,7 +130,6 @@ export class VolunteerComponent extends BaseLiveViewComponent<VolunteerContext,
   }
 
   handleInfo(event: VolunteerData, socket: LiveViewSocket<VolunteerContext>): VolunteerContext | Promise<VolunteerContext> {
-    console.log("received info", event);
     return {
       volunteers: listVolunteers(),
       changeset: changeset({}, {})

src/examples/volunteers/data.ts

@@ -2,7 +2,7 @@ import { z } from 'zod';
 import { nanoid } from 'nanoid';
 import { LiveViewChangeset, LiveViewComponent, LiveViewExternalEventListener, LiveViewInternalEventListener, LiveViewSocket } from '../../server/component/types';
 import { newChangesetFactory } from '../../server/component/changeset';
-import { createPubSub } from '../../server/pubsub/SingleProcessPubSub';
+import { PubSub } from '../../server/pubsub/SingleProcessPubSub';
 import { VolunteerComponent } from './component';
 
 const phoneRegex = /^\d{3}[\s-.]?\d{3}[\s-.]?\d{4}$/
@@ -19,9 +19,6 @@ export const VolunteerSchema = z.object({
 // infer the Volunteer model from the Zod Schema
 export type Volunteer = z.infer<typeof VolunteerSchema>;
 
-// pubsub
-const volunteerPubSub = createPubSub<VolunteerData>();
-
 // in memory data store
 const volunteers: Record<string, Volunteer> = {}
 
@@ -56,7 +53,7 @@ export const updateVolunteer = (currentVolunteer: Volunteer, updated: Partial<Vo
 }
 
 function broadcast(event: VolunteerEvent, volunteer: Volunteer) {
-  volunteerPubSub.broadcast('volunteer', {
+  PubSub.broadcast('volunteer', {
     event,
     volunteer,
   });
@@ -69,9 +66,3 @@ export interface VolunteerData {
   volunteer: Volunteer
 }
 
-export function subscribe(socket: LiveViewSocket<unknown>): void {
-  volunteerPubSub.subscribe('volunteer', (data: VolunteerData) => {
-    socket.sendInternal(data)
-  });
-}
-

src/server/pubsub/RedisPubSub.ts

@@ -2,6 +2,11 @@ import { RedisClientType, RedisClientOptions } from '@node-redis/client';
 import { createClient } from 'redis';
 import { Publisher, Subscriber } from '.';
 
+/**
+ * A PubSub implementation that uses Redis as a backend.
+ *
+ * See: https://github.com/redis/node-redis#pubsub
+ */
 export class RedisPubSub<T> implements Subscriber<T>, Publisher<T> {
 
   private redis: RedisClientType;

src/server/pubsub/SingleProcessPubSub.ts

@@ -24,4 +24,4 @@ class SingleProcessPubSub<T> implements Subscriber<T>, Publisher<T> {
 
 }
 
-export const createPubSub = <T>() => new SingleProcessPubSub<T>();
+export const PubSub = new SingleProcessPubSub<unknown>();