fix: use URLSearchParams when building WS url (#1498)

## CLA

- [ ] I have signed the [Stream
CLA](https://docs.google.com/forms/d/e/1FAIpQLScFKsKkAJI7mhCr7K9rEIOpqIDThrWxuvxnwUq2XkHyG154vQ/viewform)
(required).
- [ ] Code changes are tested

## Description of the changes, What, Why and How?

## Changelog

-

Author: isekovanic

src/client.ts

@@ -330,7 +330,7 @@ export class StreamChat<StreamChatGenerics extends ExtendableGenerics = DefaultG
       warmUp: false,
       recoverStateOnReconnect: true,
       disableCache: false,
-      wsUrlSuffix: '',
+      wsUrlParams: new URLSearchParams({}),
       ...inputOptions,
     };
 

src/connection.ts

@@ -184,14 +184,20 @@ export class StableWSConnection<StreamChatGenerics extends ExtendableGenerics =
    * @returns url string
    */
   _buildUrl = () => {
-    const qs = encodeURIComponent(this.client._buildWSPayload(this.requestID));
+    const qs = this.client._buildWSPayload(this.requestID);
     const token = this.client.tokenManager.getToken();
-
-    return `${this.client.wsBaseURL}/connect?json=${qs}&api_key=${
-      this.client.key
-    }&authorization=${token}&stream-auth-type=${this.client.getAuthType()}&X-Stream-Client=${encodeURIComponent(
-      this.client.getUserAgent(),
-    )}${this.client.options.wsUrlSuffix}`;
+    const wsUrlParams = this.client.options.wsUrlParams;
+
+    const params = new URLSearchParams(wsUrlParams);
+    params.set('json', qs);
+    params.set('api_key', this.client.key);
+    // it is expected that the autorization parameter exists even if
+    // the token is undefined, so we interpolate it to be safe
+    params.set('authorization', `${token}`);
+    params.set('stream-auth-type', this.client.getAuthType());
+    params.set('X-Stream-Client', this.client.getUserAgent());
+
+    return `${this.client.wsBaseURL}/connect?${params.toString()}`;
   };
 
   /**

src/types.ts

@@ -1245,7 +1245,7 @@ export type StreamChatOptions = AxiosRequestConfig & {
    * Sets a suffix to the wsUrl when it is being built in `wsConnection`. Is meant to be
    * used purely in testing suites and should not be used in production apps.
    */
-  wsUrlSuffix?: string;
+  wsUrlParams?: URLSearchParams;
 };
 
 export type SyncOptions = {

test/unit/connection.js

@@ -82,7 +82,10 @@ describe('connection', function () {
 			client.userAgent = userAgent;
 			const url = ws._buildUrl();
 
-			expect(url).to.contain(encodeURIComponent(userAgent));
+			const searchParams = new URLSearchParams({
+				'X-Stream-Client': userAgent,
+			});
+			expect(url).to.contain(searchParams.toString());
 		});
 
 		it('should not include device if not there', function () {
@@ -94,7 +97,7 @@ describe('connection', function () {
 
 		it('should include extra params when building url if provided', function () {
 			const { query: prevQuery } = url.parse(ws._buildUrl(), true);
-			ws.client.options.wsUrlSuffix = '&foo=1&bar=2';
+			ws.client.options.wsUrlParams = new URLSearchParams({ foo: '1', bar: '2' });
 			const { query } = url.parse(ws._buildUrl(), true);
 
 			// all of the previous query params should remain intact