From 3734af83117d0e4c5438fc26d315cb43d9f76a51 Mon Sep 17 00:00:00 2001
From: naporin0624 <naporin0624@gmail.com>
Date: Mon, 1 Jul 2024 00:54:59 +0000
Subject: [PATCH 1/2] chore(client): fix url with query parameter websocket
 client

---
 src/client/client.test.ts | 75 +++++++++++++++++++++++++++++++++++++++
 src/client/client.ts      |  8 +++--
 2 files changed, 81 insertions(+), 2 deletions(-)

diff --git a/src/client/client.test.ts b/src/client/client.test.ts
index 8cb8060b6..b57641df5 100644
--- a/src/client/client.test.ts
+++ b/src/client/client.test.ts
@@ -1044,6 +1044,81 @@ describe('WebSocket URL Protocol Translation', () => {
   })
 })
 
+describe('WebSocket URL Protocol Translation with Query Parameters', () => {
+  const app = new Hono()
+  const route = app.get(
+    '/',
+    upgradeWebSocket((c) => ({
+      onMessage(event, ws) {
+        console.log(`Message from client: ${event.data}`)
+        ws.send('Hello from server!')
+      },
+      onClose: () => {
+        console.log('Connection closed')
+      },
+    }))
+  )
+
+  type AppType = typeof route
+
+  const server = setupServer()
+  const webSocketMock = vi.fn()
+
+  beforeAll(() => server.listen())
+  beforeEach(() => {
+    vi.stubGlobal('WebSocket', webSocketMock)
+  })
+  afterEach(() => {
+    vi.clearAllMocks()
+    server.resetHandlers()
+  })
+  afterAll(() => server.close())
+
+  it('Translates HTTP to ws and includes query parameters', async () => {
+    const client = hc<AppType>('http://localhost')
+    client.index.$ws({
+      query: {
+        id: '123',
+        type: 'test',
+      },
+    })
+    expect(webSocketMock).toHaveBeenCalledWith('ws://localhost/index?id=123&type=test')
+  })
+
+  it('Translates HTTPS to wss and includes query parameters', async () => {
+    const client = hc<AppType>('https://localhost')
+    client.index.$ws({
+      query: {
+        id: '456',
+        type: 'secure',
+      },
+    })
+    expect(webSocketMock).toHaveBeenCalledWith('wss://localhost/index?id=456&type=secure')
+  })
+
+  it('Keeps ws unchanged and includes query parameters', async () => {
+    const client = hc<AppType>('ws://localhost')
+    client.index.$ws({
+      query: {
+        id: '789',
+        type: 'plain',
+      },
+    })
+    expect(webSocketMock).toHaveBeenCalledWith('ws://localhost/index?id=789&type=plain')
+  })
+
+  it('Keeps wss unchanged and includes query parameters', async () => {
+    const client = hc<AppType>('wss://localhost')
+    client.index.$ws({
+      query: {
+        id: '1011',
+        type: 'secure',
+      },
+    })
+    expect(webSocketMock).toHaveBeenCalledWith('wss://localhost/index?id=1011&type=secure')
+  })
+})
+
 describe('Client can be console.log in react native', () => {
   it('Returns a function name with function.name.toString', async () => {
     const client = hc('http://localhost')
diff --git a/src/client/client.ts b/src/client/client.ts
index 28f1bee19..aa3292650 100644
--- a/src/client/client.ts
+++ b/src/client/client.ts
@@ -178,12 +178,16 @@ export const hc = <T extends Hono<any, any, any>>(
       return new URL(url)
     }
     if (method === 'ws') {
-      const targetUrl = replaceUrlProtocol(
+      const webSocketUrl = replaceUrlProtocol(
         opts.args[0] && opts.args[0].param ? replaceUrlParam(url, opts.args[0].param) : url,
         'ws'
       )
+      const targetUrl = new URL(webSocketUrl)
+      for (const key in opts.args[0]?.query) {
+        targetUrl.searchParams.set(key, opts.args[0].query[key])
+      }
 
-      return new WebSocket(targetUrl)
+      return new WebSocket(targetUrl.toString())
     }
 
     const req = new ClientRequestImpl(url, method)

From 9225a1493025c9b1da69e8e7912dd4cbb0916561 Mon Sep 17 00:00:00 2001
From: naporin0624 <naporin0624@gmail.com>
Date: Mon, 1 Jul 2024 08:02:25 +0000
Subject: [PATCH 2/2] chore(client): remove log

---
 src/client/client.test.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/client/client.test.ts b/src/client/client.test.ts
index b57641df5..e01931a1d 100644
--- a/src/client/client.test.ts
+++ b/src/client/client.test.ts
@@ -1050,7 +1050,6 @@ describe('WebSocket URL Protocol Translation with Query Parameters', () => {
     '/',
     upgradeWebSocket((c) => ({
       onMessage(event, ws) {
-        console.log(`Message from client: ${event.data}`)
         ws.send('Hello from server!')
       },
       onClose: () => {