Query Parameter Handling in RealtimeClient

[muradsofi]

I am using a relay server with RealtimeClient to add custom query parameters (e.g., jwtToken) for authentication. Here's the code snippet I used to append the parameter:

const url = new URL(API_HOST);
url.searchParams.append('jwtToken', jwtToken);

const clientRef = useRef<RealtimeClient>(
  new RealtimeClient({
    url: url.toString(),
  }),
);

However, when I log the req.url on the relay server, the query parameters are not being sent correctly. It appears that RealtimeClient adds an additional query parameter (e.g., model) using a ? separator, even when the URL already contains a query string.

As a result, the generated WebSocket URL looks like this:

/?jwtToken=<JWT_TOKEN>?model=gpt-4o-realtime-preview-2024-10-01

Instead of:

/?jwtToken=<JWT_TOKEN>&model=gpt-4o-realtime-preview-2024-10-01

---

Expected Behavior

The RealtimeClient should correctly append additional query parameters using the & separator when the URL already contains a query string.

Example of the expected URL:

/?jwtToken=<JWT_TOKEN>&model=gpt-4o-realtime-preview-2024-10-01

---

Actual Behavior

The RealtimeClient appends the additional query parameter using a second ?, resulting in an invalid query string:

/?jwtToken=<JWT_TOKEN>?model=gpt-4o-realtime-preview-2024-10-01

---

Steps to Reproduce

1. Create a RealtimeClient instance with a URL that already includes a query parameter (jwtToken).
2. Log the URL received by the WebSocket server (req.url) on the relay server.
3. Observe that the query parameters are malformed with multiple ?.

---

Summary

The current handling of query parameters in RealtimeClient causes malformed URLs when custom query strings are provided. Fixing this issue will make the library more robust and easier to integrate new query params to url

[thorwebdev]

+1 for this, would be great to add a JWT for Auth.