How to use Azure PubSub in React Native?

Question

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?

Does this answer your question? [Why I cannot use the @azure/web-pubsub node package in a react code?](https://stackoverflow.com/questions/67493059/why-i-cannot-use-the-azure-web-pubsub-node-package-in-a-react-code) — Ecstasy, Jul 21 '22 at 10:03
@DeepDave-MT Thanks for the comment unfortunately the answer does not help, I actually added the **url** dependency to my project and I got a different error, the @azure/web-pubsub library is using **jsonwebtoken** library which works only in a node environment so it's throwing dependency errors that work only in node such as **util**, **jws** and **data-stream**. So I'm wondering why they would use node packages in a library intended to run in the client? Any idea? — abdou-tech, Jul 21 '22 at 10:23

Ecstasy · Accepted Answer · 2022-07-26T10:18:40.837

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

Yes that's right, there's no need for `@azure/web-pubsub`. The package is meant for Node clients who want to connect to the Azure PubSub service and not browser clients. **Note that the [`ws`](https://www.npmjs.com/package/ws) package also doesn't work in React Native or the browser it requires the Node runtime.** So for anyone looking, just use the native [`WebSocket`](https://developer.mozilla.org/en-US/docs/Web/API/WebSocket) object to connect to the service. — abdou-tech, Jul 26 '22 at 10:15

How to use Azure PubSub in React Native?

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?

1 Answers1