fix(client): Add Query Parameter Support to WebSocket Client in hono/client

src/client/client.test.ts

@@ -1044,6 +1044,80 @@ 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) {
+        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')

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)