3

I have a react project in which I would like to use this native node.js addon, which is a wrapper for a C++ SDK.

I've successfully used this module in the past within an Electron project, and can run the sample successfully with node as well.

My question is how I would be able to use this in React, or write my own React friendly solution using the C++ SDK.

I've tried to clone the module and place it under a lib folder in my react project, I ran npm install within that folder to install it's dependencies and tried to run the included example directly with node. This went fine. But using the sample directly from within my React app fails with the following error code ts3client.on is not a function.

So it passes the line were the library is required with var ts3client = require('../../lib/node-ts3sdk-client/api.js'); but that's the furthest I managed to get. I could play around a little bit more, but would like to get some opinions on what might be the best approach here.

Edit As requested I have added a small example to reproduce the issue I am facing.

  1. Create a simple react app
    npm init react-app so-node-addon-react

  2. Clone this repository under src/lib/
    git clone https://github.com/svenpaulsen/node-ts3sdk-client.git

  3. Install the module's dependencies
    cd node-ts3sdk-client
    npm install

  4. Expose some part of the client example by wrapping the try-catch block starting from line 160 in an exported function like so 

export function connect() {
  try { ... }
  catch { ... }
}
  1. Call the function from your project's App.tsx 
import { connect } from './lib/node-ts3sdk-client/examples/client_minimal'
...
connect()
  1. Run the project npm start

This should result in the following error: ts3client.on is not a function

S. Van den Wyngaert
  • 661
  • 7
  • 17
  • Please show a simple example that reproduces the error that you are asking about. See [mcve] for more tips. – Code-Apprentice Jul 16 '19 at 16:05
  • 2
    react.js is a front end library. You don't want to put this in your react project. You want to hook into whatever your server framework is and handle the communication between the browser and server like you would any other web request or socket based communication. Electron worked because you were able to load a module into it and have access to the local file system. Unless your react solution is in Electron this is not practical if not impossible. – Chase R Lewis Jul 16 '19 at 18:44
  • 1
    @user2927848 I understand the part where web requests/socket based communication belong in the backend. But may I clarify that this library is a client side library, I've got the server side library hosted elsewhere. – S. Van den Wyngaert Jul 16 '19 at 18:51
  • This is not a _client side_ library, it is a server client for TeamSpeak. Huge difference. – Emile Bergeron Jul 16 '19 at 19:17
  • 1
    @EmileBergeron I can see I am clearly misunderstanding something here. This is a library used to create a client which in turn communicates with a server, for which there is another SDK. So it seemed pretty clear to me that this is 'client' side. But I am afraid terminology might be what creates the confusion here. Could you explain yourself more clearly? It is much appreciated. – S. Van den Wyngaert Jul 16 '19 at 19:45
  • It's a client that was made for Node.js not for the browser. It's confusing because most of the time, when speaking about client-side JavaScript, we mean the JS in a browser. This lib is a server-side [client](https://en.wikipedia.org/wiki/Client_(computing)) that only works with Node.js. A client-server architecture doesn't mean it's a browser and a webserver. – Emile Bergeron Jul 16 '19 at 19:58
  • 1
    Thanks for clearing that out. I think part of my confusion also comes from being able to use this in Electron for over a year. So a suitable solution would be a react front-end which communicates with a nodejs backend (which implements the module)? – S. Van den Wyngaert Jul 16 '19 at 20:14
  • Exactly, if it makes sense, as I never used it :P – Emile Bergeron Jul 16 '19 at 20:17
  • @EmileBergeron I've been thinking about our discussion for a while now and one thing that made me feel tike this does however belong on the client's side is that the library is responsible for detecting a user's microphone input, handle audio devices,.. which makes me believe this is meant to be used as a client-side (front-end) library. – S. Van den Wyngaert Jul 17 '19 at 09:30
  • It's meant to be a client, just not a browser client. Like a video game is a client for a multiplayer server, doesn't mean it's meant for the browser. – Emile Bergeron Jul 17 '19 at 14:30
  • 1
    @Emile Bergeron, thanks for your answers. It cleared things out for me. – S. Van den Wyngaert Jul 17 '19 at 16:55
  • @S.VandenWyngaert I have a similar issue for which I have made my own SO question: https://stackoverflow.com/questions/65375807/importing-requiring-an-napi-addon-from-a-reactjs-reactts-project . Did you ever resolve this problem ? – Tristan Duquesne Dec 20 '20 at 00:26

0 Answers0