feat!: automatic reloading of application when config is updated (#86)

nuxt.config.ts

@@ -134,8 +134,9 @@ export default defineNuxtConfig({
         base: './data',
       },
     },
-    devServer: {
-      watch: ['./data'],
+    experimental: {
+      websocket: true,
+      tasks: true,
     },
   },
 })

package.json

@@ -53,4 +53,4 @@
   "lint-staged": {
     "*.ts": "yarn run lint"
   }
-}
+}

src/composables/useWebsocket.ts

@@ -0,0 +1,65 @@
+import type { UseWebSocketReturn } from '@vueuse/core'
+import type { ReceivedMessage, ReceivedMessageMap, SendMessage, SendMessageMap } from '~/types'
+
+export type WsClientReturn = Pick<UseWebSocketReturn<string>, 'open' | 'close' | 'status'> & {
+  on: SendHook
+  off: SendHook
+  send: ReceiveHook
+}
+export type SendHook = <E extends SendMessage['event']>(event: E, handler: (data: Omit<SendMessageMap[E], 'event'>) => any) => void
+export type ReceiveHook = <E extends ReceivedMessage['event']>(event: E, handler: (data: Omit<ReceivedMessageMap[E], 'event'>) => any) => void
+
+function createEventMessage<E extends SendMessage['event'] | ReceivedMessage['event']>(event: E, data: Record<string, any> = {}): string {
+  return JSON.stringify({ event, ...data })
+}
+
+export function wsClient(): WsClientReturn {
+  const url = useRequestURL()
+  const isSecure = url.protocol === 'https:'
+  const endpoint = `${(isSecure ? 'wss://' : 'ws://') + url.host}/api/websocket`
+  const sendHandlers = new Map<SendMessage['event'], Set<Function>>()
+  const { status, open, close, send: _send } = useWebSocket(endpoint, {
+    heartbeat: {
+      message: createEventMessage('ping'),
+      interval: 30 * 1000,
+    },
+    autoReconnect: {
+      delay: 5 * 1000,
+    },
+    onMessage(_, e) {
+      const { event, ...data } = JSON.parse(e.data) as SendMessage
+
+      sendHandlers.get(event)?.forEach((handler) => handler(data))
+    },
+  })
+
+  const off: SendHook = (event, handler) => {
+    if (sendHandlers.has(event)) {
+      sendHandlers.get(event)?.delete(handler)
+    }
+  }
+
+  const on: SendHook = (event, handler) => {
+    if (!sendHandlers.has(event)) {
+      sendHandlers.set(event, new Set())
+    }
+
+    sendHandlers.get(event)!.add(handler)
+    tryOnScopeDispose(() => off(event, handler))
+  }
+
+  const send: ReceiveHook = (event, data) => {
+    _send(createEventMessage(event, data))
+  }
+
+  return {
+    status,
+    open,
+    close,
+    send,
+    on,
+    off,
+  }
+}
+
+export const useWebsocket = createSharedComposable(wsClient)

src/plugins/settings.ts

@@ -1,6 +1,17 @@
 import type { CompleteConfig } from '~/types'
 
+/**
+ * @todo create a hot reboot configuration. Receive data from websocket
+ */
 export default defineNuxtPlugin(async () => {
+  const { on } = useWebsocket()
+
+  on('config:update', () => {
+    reloadNuxtApp({
+      force: true,
+    })
+  })
+
   const asyncData = await useFetch<CompleteConfig>('/api/settings')
   const { services, ...settings } = asyncData.data.value!
 

src/server/api/services/ip-api.ts

@@ -30,7 +30,7 @@ const cachedIpApiData = defineCachedFunction(async (lang: string = 'en') => {
 
 export default defineEventHandler(async (event) => {
   const service = await getServiceWithDefaultData<IpApiService>(event)
-  const config = await getLocalConfig()
+  const config = await getConfig()
   const ip = await cachedIpApiData(config?.lang)
 
   return returnServiceWithData(service, ip)

src/server/api/services/openweathermap.ts

@@ -24,7 +24,7 @@ const cachedOWMData = defineCachedFunction(async ({ lon, lat, units, apiKey, lan
 
 export default defineEventHandler(async (event) => {
   const service = await getServiceWithDefaultData<OpenWeatherMapService>(event)
-  const config = await getLocalConfig()
+  const config = await getConfig()
   const { options, secrets } = service.config
   const owm = await cachedOWMData({
     lon: options.lon,

src/server/api/websocket.ts

@@ -0,0 +1,24 @@
+const logger = useLogger('websocket')
+
+export default defineWebSocketHandler({
+  async open(peer) {
+    logger.info('New peer', peer)
+
+    const storage = useStorage('data')
+    await storage.watch(async (_, key) => {
+      if (key !== `data:${configFileName}`) {
+        return
+      }
+
+      await runTask('config:update')
+      peer.send({ event: 'config:update' })
+    })
+  },
+  async message(peer, message) {
+    const { event } = JSON.parse(message as unknown as string)
+
+    if (event === 'ping') {
+      peer.send({ event: 'pong' })
+    }
+  },
+})

src/server/plugins/01.config-loader.ts

@@ -0,0 +1,6 @@
+/**
+ * @todo remove plugin when hooks appear in nitro task
+ */
+export default defineNitroPlugin(async () => {
+  runTask('config:update')
+})

src/server/tasks/config/update.ts

@@ -0,0 +1,13 @@
+export default defineTask({
+  meta: {
+    name: 'config:update',
+  },
+  async run() {
+    const config = await loadConfig()
+    await setConfig(config)
+
+    return {
+      result: {},
+    }
+  },
+})

src/server/utils/config.ts

@@ -9,6 +9,8 @@ type DraftService = Omit<Service, 'id'>
 
 type TagMap = Map<Tag['name'], Tag>
 
+const logger = useLogger('config')
+
 function determineService(items: DraftService[], tags: TagMap): Service[] {
   return items.map((item) => ({
     ...item,
@@ -26,6 +28,8 @@ function determineService(items: DraftService[], tags: TagMap): Service[] {
   }))
 }
 
+export const configFileName = 'config.yml'
+
 export function getDefaultConfig(): CompleteConfig {
   return {
     title: 'Mafl Home Page',
@@ -48,17 +52,19 @@ function createTagMap(tags: Tag[]): TagMap {
   }, new Map())
 }
 
-export async function loadLocalConfig(): Promise<CompleteConfig> {
+/**
+ * Load config from storage
+ */
+export async function loadConfig(): Promise<CompleteConfig> {
   const defaultConfig = getDefaultConfig()
   const storage = useStorage('data')
-  const file = 'config.yml'
 
   try {
-    if (!await storage.hasItem(file)) {
+    if (!await storage.hasItem(configFileName)) {
       throw new Error('Config not found')
     }
 
-    const raw = await storage.getItem<string>(file)
+    const raw = await storage.getItem<string>(configFileName)
     const config = yaml.parse(raw || '') || {}
     const services: CompleteConfig['services'] = []
     const tags: TagMap = createTagMap(config.tags || [])
@@ -100,7 +106,22 @@ export async function loadLocalConfig(): Promise<CompleteConfig> {
   return defaultConfig
 }
 
-export async function getLocalConfig(): Promise<CompleteConfig | null> {
+/**
+ * Save config to memory storage
+ */
+export async function setConfig(config: CompleteConfig): Promise<void> {
+  const storage = useStorage('main')
+
+  await storage.setItem('config', config)
+  await storage.setItem('services', extractServicesFromConfig(config))
+
+  logger.success('Set "main" config')
+}
+
+/**
+ * Get config from memory storage
+ */
+export async function getConfig(): Promise<CompleteConfig | null> {
   const storage = useStorage('main')
   await storage.getKeys()
 

src/types/index.d.ts

@@ -1,2 +1,3 @@
 export * from './config'
 export * from './services'
+export * from './websocket'

src/types/websocket.d.ts

@@ -0,0 +1,24 @@
+export interface PingEvent {
+  event: 'ping'
+}
+
+export interface PongEvent {
+  event: 'pong'
+}
+
+export interface ConfigUpdateEvent {
+  event: 'config:update'
+}
+
+export type ReceivedMessage = PingEvent
+
+export interface ReceivedMessageMap {
+  ping: PingEvent
+}
+
+export type SendMessage = PongEvent | ConfigUpdateEvent
+
+export interface SendMessageMap {
+  'pong': PongEvent
+  'config:update': ConfigUpdateEvent
+}