Merge pull request #397 from ylecuyer/configure-headers-yle

Better: allow to configure default headers.
ringcentral · Aug 8, 2024 · 95e10ce · 95e10ce
2 parents d6feaf2 + 3beae21
commit 95e10ce
Show file tree

Hide file tree

Showing 12 changed files with 344 additions and 15 deletions.
diff --git a/demo/index.ts b/demo/index.ts
@@ -133,7 +133,7 @@ $(() => {
   }
 
   function register(data) {
-    webPhone = new WebPhone(data, {
+    const webPhoneConfig: any = {
       enableDscp: true,
       clientId: localStorage.getItem('webPhoneclientId')!,
       audioHelper: {
@@ -150,7 +150,15 @@ $(() => {
       },
       enableQos: true,
       enableMediaReportLogging: true,
-    });
+    };
+
+    const urlParams = new URLSearchParams(window.location.search);
+    if (urlParams.has('customHeader')) {
+      webPhoneConfig.defaultHeaders = ['P-Custom-Header: CustomValue'];
+    }
+
+    webPhone = new WebPhone(data, webPhoneConfig);
+
     global.webPhone = webPhone; // for debugging
 
     webPhone.userAgent.audioHelper.setVolume(0.3);

diff --git a/docs/index.9050f078.js → docs/index.5edd3872.js b/docs/index.9050f078.js → docs/index.5edd3872.js
diff --git a/docs/index.5edd3872.js.map b/docs/index.5edd3872.js.map
diff --git a/docs/index.9050f078.js.map b/docs/index.9050f078.js.map
diff --git a/docs/index.html b/docs/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html><head><script type="module" src="index.ff75d985.js"></script><link rel="stylesheet" href="index.f01e0bc4.css"><script type="module" src="index.runtime.42757dfb.js"></script><link rel="icon shortcut" href="favicon.4a73512e.png"><title>RingCentral WebPhone Demo</title></head><body> <div class="container"> <h1>RingCentral WebPhone Demo</h1> <div id="app"></div> </div> <video id="remoteVideo" hidden></video> <video id="localVideo" hidden muted></video> <script type="text/html" id="template-incoming">
+<!doctype html><html><head><script type="module" src="index.ff75d985.js"></script><link rel="stylesheet" href="index.f01e0bc4.css"><script type="module" src="index.runtime.aa0fdf85.js"></script><link rel="icon shortcut" href="favicon.4a73512e.png"><title>RingCentral WebPhone Demo</title></head><body> <div class="container"> <h1>RingCentral WebPhone Demo</h1> <div id="app"></div> </div> <video id="remoteVideo" hidden></video> <video id="localVideo" hidden muted></video> <script type="text/html" id="template-incoming">
       <div class="modal fade" tabindex="-1" role="dialog">
         <div class="modal-dialog">
           <div class="modal-content">
@@ -179,4 +179,4 @@ <h4 class="modal-title">
           </div>
         </div>
       </div>
-    </script> <script type="module" src="index.9050f078.js"></script> </body></html>
+    </script> <script type="module" src="index.5edd3872.js"></script> </body></html>
diff --git a/docs/index.runtime.42757dfb.js → docs/index.runtime.aa0fdf85.js b/docs/index.runtime.42757dfb.js → docs/index.runtime.aa0fdf85.js
diff --git a/docs/index.runtime.42757dfb.js.map → docs/index.runtime.aa0fdf85.js.map b/docs/index.runtime.42757dfb.js.map → docs/index.runtime.aa0fdf85.js.map
diff --git a/package.json b/package.json
@@ -67,6 +67,7 @@
     "eslint-plugin-jest": "^28.6.0",
     "eslint-plugin-prettier": "^5.1.3",
     "events": "^3.3.0",
+    "fix-esm": "^1.0.1",
     "http-server": "^14.1.1",
     "jest": "^29.7.0",
     "jquery": "^3.7.1",

diff --git a/src/index.ts b/src/index.ts
@@ -93,6 +93,8 @@ export interface WebPhoneOptions {
   builtinEnabled?: boolean;
   /** A function which will be called every time a log is generated. [Reference](https://github.com/onsip/SIP.js/blob/master/docs/api/sip.js.logconnector.md) */
   connector?: LogConnector;
+  /** Default headers to add to SIP messages */
+  defaultHeaders?: string[];
   /** If `true` media will be sent prior to call being answered
    *
    * Set to `true` by default for firefox browser

diff --git a/src/userAgent.ts b/src/userAgent.ts
@@ -155,6 +155,9 @@ export function createWebPhoneUserAgent(
   userAgent.removeListener = eventEmitter.removeListener.bind(eventEmitter);
   userAgent.removeAllListeners = eventEmitter.removeAllListeners.bind(eventEmitter);
   userAgent.defaultHeaders = [`P-rc-endpoint-id: ${id}`, `Client-id: ${options.clientId}`];
+  if (options.defaultHeaders) {
+    userAgent.defaultHeaders.push(...options.defaultHeaders);
+  }
   userAgent.regId = options.regId;
   userAgent.media = {};
   userAgent.enableQos = options.enableQos;

diff --git a/test/index.spec.ts b/test/index.spec.ts
@@ -1,14 +1,45 @@
 import type { BrowserContext } from '@playwright/test';
 import { expect, test } from '@playwright/test';
 import RingCentral from '@rc-ex/core';
+const sip = require('fix-esm').require('sip.js'); // eslint-disable-line
+const log = new sip.Core.LoggerFactory();
+const logger = log.getLogger('test.parser');
 
-const login = async (context: BrowserContext, jwtToken: string) => {
+const waitFor = async (condition, pollInterval = 1000, timeout = 10000) => {
+  const startTime = Date.now();
+
+  while (true) {
+    if (Date.now() > startTime + timeout) {
+      throw 'timeout';
+    }
+
+    const result = await condition();
+
+    if (result) {
+      return result;
+    }
+
+    await new Promise((r) => setTimeout(r, pollInterval)); // eslint-disable-line
+  }
+};
+
+// eslint-disable-next-line max-params
+const login = async (context: BrowserContext, jwtToken: string, ws: any, options: { customHeader?: boolean } = {}) => {
   const page = await context.newPage();
-  await page.goto('/');
+
+  let path = '/';
+
+  if (options && options.customHeader) {
+    path += '?customHeader=true';
+  }
+
+  await page.goto(path);
   const title = page.locator('h1');
   await expect(title).toHaveText('RingCentral WebPhone Demo');
   await page.screenshot({ path: 'screenshots/before-login.png' });
 
+  page.on('websocket', ws);
+
   await page.fill('input[name="server"]', process.env.RC_WP_SERVER!);
   await page.fill('input[name="clientId"]', process.env.RC_WP_CLIENT_ID!);
   await page.fill('input[name="clientSecret"]', process.env.RC_WP_CLIENT_SECRET!);
@@ -27,9 +58,9 @@ const login = async (context: BrowserContext, jwtToken: string) => {
 
 test('home page', async ({ context }) => {
   // login
-  const callerPage = await login(context, process.env.RC_WP_CALLER_JWT_TOKEN!);
+  const callerPage = await login(context, process.env.RC_WP_CALLER_JWT_TOKEN!, () => {});
   await callerPage.screenshot({ path: 'screenshots/caller-logged-in.png' });
-  const receiverPage = await login(context, process.env.RC_WP_RECEIVER_JWT_TOKEN!);
+  const receiverPage = await login(context, process.env.RC_WP_RECEIVER_JWT_TOKEN!, () => {});
   await receiverPage.screenshot({ path: 'screenshots/receiver-logged-in.png' });
 
   // make the call
@@ -64,3 +95,27 @@ test('home page', async ({ context }) => {
   await expect(receiverPage.locator('text=Call In Progress')).toBeHidden();
   await receiverPage.screenshot({ path: 'screenshots/receiver-hung-up.png' });
 });
+
+test('allow to configure default headers', async ({ context }) => {
+  let wsHandled = false;
+  await login(
+    context,
+    process.env.RC_WP_CALLER_JWT_TOKEN!,
+    (ws) => {
+      ws.on('framesent', async (frame) => {
+        const parsed = sip.Core.Parser.parseMessage(frame.payload, logger);
+
+        if (parsed!.method === 'REGISTER') {
+          expect(parsed!.headers['P-Custom-Header'].length).toEqual(1);
+          expect(parsed!.headers['P-Custom-Header'][0].raw).toEqual('CustomValue');
+          wsHandled = true;
+        }
+      });
+    },
+    {
+      customHeader: true,
+    },
+  );
+
+  await waitFor(() => wsHandled);
+});