fix: 더 많은 브라우저에서 WebSocket 연결 문제가 없도록 수정 (#207)

fix: 상대 url을 websocket에 사용할 수 있도록 폴리필

packages/frontend/src/lib/polyfill-relative-urls-websocket.ts

@@ -0,0 +1,17 @@
+// Monkey Patch로 WebSocket 생성자를 오버라이드
+const OriginalWebSocket = window.WebSocket;
+
+// @ts-expect-error Monkey Patch
+window.WebSocket = function WebSocket(url, protocols) {
+  const parsedUrl = new URL(url, window.location.href);
+
+  if (parsedUrl.protocol === "http:") {
+    parsedUrl.protocol = "ws:";
+  } else if (parsedUrl.protocol === "https:") {
+    parsedUrl.protocol = "wss:";
+  }
+
+  return new OriginalWebSocket(parsedUrl.href, protocols);
+};
+
+window.WebSocket.prototype = OriginalWebSocket.prototype;

packages/frontend/src/main.tsx

@@ -1,6 +1,8 @@
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 
+import "@/lib/polyfill-relative-urls-websocket.ts";
+
 import App from "./App.tsx";
 import "./index.css";