How to use Azure Web PubSub in React Native?

[abdoutech19]

I'm trying to build a chat app with React Native, and I'm trying to use Azure Web Pub Sub for that.
I'm following the docs so I added @azure/web-pubsub dependency to my project, and copied this piece of code that I found on the docs:

// other react native imports...

const WebSocket = require('ws');
const { WebPubSubServiceClient } = require('@azure/web-pubsub');

async function main() {
  const hub = "pubsub";
  let service = new WebPubSubServiceClient(process.env.WebPubSubConnectionString, hub);
  let token = await service.getClientAccessToken();
  let ws = new WebSocket(token.url);
  ws.on('open', () => console.log('connected'));
  ws.on('message', data => console.log('Message received: %s', data));
}

I run the app on android and I get this error telling me that the url dependency cannot be found in these directories: node_modules@azure\web-pubsub\node_modules

Here's the full error from the console:

error: Error: Unable to resolve module url from C:\Users\abdou\source\Mobile Apps\Test app\AwesomeTSProject\node_modules\@azure\web-pubsub\dist\index.js: url could not be found within the project or in these directories:
  node_modules\@azure\web-pubsub\node_modules
  node_modules
  ..\..\..\..\node_modules
  11 | var jwt = _interopDefault(require('jsonwebtoken'));
  12 | var logger$1 = require('@azure/logger');
> 13 | var url = require('url');
     |                    ^
  14 |
  15 | /*
  16 |  * Copyright (c) Microsoft Corporation.
    at ModuleResolver.resolveDependency (C:\Users\abdou\source\Mobile Apps\Test app\AwesomeTSProject\node_modules\metro\src\node-haste\DependencyGraph\ModuleResolution.js:158:15)
    at DependencyGraph.resolveDependency (C:\Users\abdou\source\Mobile Apps\Test app\AwesomeTSProject\node_modules\metro\src\node-haste\DependencyGraph.js:231:43)
    at Object.resolve (C:\Users\abdou\source\Mobile Apps\Test app\AwesomeTSProject\node_modules\metro\src\lib\transformHelpers.js:129:24)
    at resolve (C:\Users\abdou\source\Mobile Apps\Test app\AwesomeTSProject\node_modules\metro\src\DeltaBundler\traverseDependencies.js:396:33)
    at C:\Users\abdou\source\Mobile Apps\Test app\AwesomeTSProject\node_modules\metro\src\DeltaBundler\traverseDependencies.js:412:26
    at Array.reduce (<anonymous>)
    at resolveDependencies (C:\Users\abdou\source\Mobile Apps\Test app\AwesomeTSProject\node_modules\metro\src\DeltaBundler\traverseDependencies.js:411:33)
    at processModule (C:\Users\abdou\source\Mobile Apps\Test app\AwesomeTSProject\node_modules\metro\src\DeltaBundler\traverseDependencies.js:140:31)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async addDependency (C:\Users\abdou\source\Mobile Apps\Test app\AwesomeTSProject\node_modules\metro\src\DeltaBundler\traverseDependencies.js:230:18)

So I'm asking is not possible to use Azure Web PubSub service with React Native, or should I just use the ws package to communicate with the PubSub service? And if so how so?

I'm really stuck and I can't seem to find any example regarding the use of Azure Pub Sub with React Native at all.

Thanks in advance.

[vicancy]

Since the React Native app is a pure WebSocket client, there is no need for it to use the @azure/web-pubsub package, just use the ws package to communicate to the service. And it is also not safe to store the connection string on the client side.

The common way for the WebSocket client to get the URL to connect to Azure Web PubSub is similar to the workflow of this sample step 2 "Add a /negotiate API to the server to generate the token": https://docs.microsoft.com/en-us/azure/azure-web-pubsub/tutorial-build-chat?tabs=javascript#create-the-application

[abdoutech19]

Here's the answer for future reference:

https://stackoverflow.com/a/73108707/9566611