fix(client): wait until WebSocket is open before sending (#615)

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

- **Bug Fixes**
- Ensured messages are only sent after the WebSocket connection is fully
open, preventing premature message sending.

- **Tests**
- Improved test coverage to verify correct message handling when the
WebSocket is not yet open and after it becomes open.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

Author: dinwwwh

packages/client/src/adapters/websocket/link-websocket-client.ts

@@ -4,14 +4,28 @@ import type { StandardLinkClient } from '../standard'
 import { ClientPeer } from '@orpc/standard-server-peer'
 
 export interface experimental_LinkWebsocketClientOptions {
-  websocket: Pick<WebSocket, 'addEventListener' | 'send'>
+  websocket: Pick<WebSocket, 'addEventListener' | 'send' | 'readyState'>
 }
 
 export class experimental_LinkWebsocketClient<T extends ClientContext> implements StandardLinkClient<T> {
   private readonly peer: ClientPeer
 
   constructor(options: experimental_LinkWebsocketClientOptions) {
-    this.peer = new ClientPeer(options.websocket.send.bind(options.websocket))
+    const untilOpen = new Promise<void>((resolve) => {
+      if (options.websocket.readyState === 0) { // CONNECTING
+        options.websocket.addEventListener('open', () => {
+          resolve()
+        }, { once: true })
+      }
+      else {
+        resolve()
+      }
+    })
+
+    this.peer = new ClientPeer(async (message) => {
+      await untilOpen
+      return options.websocket.send(message)
+    })
 
     options.websocket.addEventListener('message', (event) => {
       this.peer.message(event.data)

packages/client/src/adapters/websocket/rpc-link.test.ts

@@ -7,6 +7,7 @@ describe('rpcLink', () => {
   let onClose: any
 
   const websocket = {
+    readyState: 1,
     addEventListener: vi.fn((event, callback) => {
       if (event === 'message')
         onMessage = callback
@@ -23,7 +24,7 @@ describe('rpcLink', () => {
   const orpc = createORPCClient(link) as any
 
   it('on success', async () => {
-    expect(orpc.ping('input')).resolves.toEqual('pong')
+    const promise = expect(orpc.ping('input')).resolves.toEqual('pong')
 
     await vi.waitFor(() => expect(websocket.send).toHaveBeenCalledTimes(1))
 
@@ -38,6 +39,8 @@ describe('rpcLink', () => {
     })
 
     onMessage({ data: await encodeResponseMessage(id, MessageType.RESPONSE, { body: { json: 'pong' }, status: 200, headers: {} }) })
+
+    await promise
   })
 
   it('on close', async () => {
@@ -47,4 +50,37 @@ describe('rpcLink', () => {
 
     onClose()
   })
+
+  it('waits until open before sending', async () => {
+    let onOpen: any
+
+    const websocket = {
+      readyState: 0,
+      addEventListener: vi.fn((event, callback) => {
+        if (event === 'message')
+          onMessage = callback
+        if (event === 'close')
+          onClose = callback
+        if (event === 'open')
+          onOpen = callback
+      }),
+      send: vi.fn(),
+    }
+    const orpc = createORPCClient(new RPCLink({
+      websocket,
+    })) as any
+
+    const promise = expect(orpc.ping('input')).resolves.toEqual('pong')
+
+    await new Promise(resolve => setTimeout(resolve, 10))
+    expect(websocket.send).toHaveBeenCalledTimes(0)
+
+    onOpen()
+    await vi.waitFor(() => expect(websocket.send).toHaveBeenCalledTimes(1))
+
+    const [id] = (await decodeRequestMessage(websocket.send.mock.calls[0]![0]))
+    onMessage({ data: await encodeResponseMessage(id, MessageType.RESPONSE, { body: { json: 'pong' }, status: 200, headers: {} }) })
+
+    await promise
+  })
 })