How to use Azure PubSub in React Native?

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 it 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?

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?

According to 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.

• It is 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 mentioned in step 2 of the sample: Add/Negotiate an API to the server to generate the token

Updated answer:

According to abdou-tech:

• There's no need for @azure/web-pubsub, the package is meant for Node clients who want to connect to the Azure PubSub service.

Note: The ws package also doesn't work in React Native or the browser it requires the Node runtime. You can use the native WebSocket object to connect to the service