From 9b6c5e38374a9ed8eafb03e50ab71be352df8482 Mon Sep 17 00:00:00 2001
From: Jonghakseo <unqocn@gmail.com>
Date: Sun, 7 Apr 2024 18:43:38 +0900
Subject: [PATCH] feat: add ping and delete unused comment

---
 apps/chrome-extension/lib/background/index.ts |  6 +-----
 packages/hmr/lib/initClient.ts                | 21 ++++++++++++-------
 packages/hmr/lib/initReloadServer.ts          |  9 ++++++++
 packages/hmr/lib/interpreter/types.ts         |  3 ++-
 4 files changed, 25 insertions(+), 14 deletions(-)

diff --git a/apps/chrome-extension/lib/background/index.ts b/apps/chrome-extension/lib/background/index.ts
index b00aa4188..50c483ab4 100644
--- a/apps/chrome-extension/lib/background/index.ts
+++ b/apps/chrome-extension/lib/background/index.ts
@@ -1,8 +1,4 @@
 import 'webextension-polyfill';
 
-/**
- * Extension reloading is necessary because the browser automatically caches the css.
- * If you do not use the css of the content script, please delete it.
- */
-
 console.log('background loaded');
+console.log("Edit 'apps/chrome-extension/lib/background/index.ts' and save to reload.");
diff --git a/packages/hmr/lib/initClient.ts b/packages/hmr/lib/initClient.ts
index 7ccd71e25..7cde4ada4 100644
--- a/packages/hmr/lib/initClient.ts
+++ b/packages/hmr/lib/initClient.ts
@@ -5,14 +5,19 @@ export default function initReloadClient({ id, onUpdate }: { id: string; onUpdat
   let ws: WebSocket | null = null;
   try {
     ws = new WebSocket(LOCAL_RELOAD_SOCKET_URL);
-    ws.addEventListener('message', event => {
-      const message = MessageInterpreter.receive(String(event.data));
-      if (message.type === 'do_update' && message.id === id) {
-        sendUpdateCompleteMessage();
-        onUpdate();
-        return;
-      }
-    });
+    ws.onopen = () => {
+      ws?.addEventListener('message', event => {
+        const message = MessageInterpreter.receive(String(event.data));
+        if (message.type === 'ping') {
+          console.log('[HMR] Client OK');
+        }
+        if (message.type === 'do_update' && message.id === id) {
+          sendUpdateCompleteMessage();
+          onUpdate();
+          return;
+        }
+      });
+    };
 
     ws.onclose = () => {
       console.log(
diff --git a/packages/hmr/lib/initReloadServer.ts b/packages/hmr/lib/initReloadServer.ts
index c594c7d60..5f2052881 100644
--- a/packages/hmr/lib/initReloadServer.ts
+++ b/packages/hmr/lib/initReloadServer.ts
@@ -30,6 +30,15 @@ function initReloadServer() {
       }
     });
   });
+
+  function ping() {
+    clientsThatNeedToUpdate.forEach(ws => ws.send(MessageInterpreter.send({ type: 'ping' })));
+    setTimeout(() => {
+      ping();
+    }, 15_000);
+  }
+
+  ping();
 }
 
 initReloadServer();
diff --git a/packages/hmr/lib/interpreter/types.ts b/packages/hmr/lib/interpreter/types.ts
index 712c3aeae..465b6ed5c 100644
--- a/packages/hmr/lib/interpreter/types.ts
+++ b/packages/hmr/lib/interpreter/types.ts
@@ -3,8 +3,9 @@ type UpdateRequestMessage = {
   id: string;
 };
 type UpdateCompleteMessage = { type: 'done_update' };
+type PingMessage = { type: 'ping' };
 type BuildCompletionMessage = { type: 'build_complete'; id: string };
 
 export type SerializedMessage = string;
 
-export type WebSocketMessage = UpdateCompleteMessage | UpdateRequestMessage | BuildCompletionMessage;
+export type WebSocketMessage = UpdateCompleteMessage | UpdateRequestMessage | BuildCompletionMessage | PingMessage;