Ways to transmit information from a React application to a Node server

As a Nodejs beginner, I am using the rtsp-relay library for live streaming. Currently, it is working in the frontend when the URL is included in the server proxy object like this:

rtsp://.....@..../Stream/Channel/10
. However, I want users to be able to input the URL in a TextField on the frontend instead of including it in the server. Should I use fetch and send for this? Any advice or help would be appreciated. Please note that English is not my native language, so there may be mistakes in my explanation.

const express = require('express');
const app = express();

const { proxy, scriptUrl } = require('rtsp-relay')(app);

const handle = proxy({
  url: `rtsp://.....@..../Stream/Channel/10`,
  // the URL above is credentials
  verbose: false,
  transport: 'tcp',
});

app.ws('/api/stream', handle );

app.get('/', (req, res) =>
  res.send(
    `hg`,
 
  ),
);

app.listen(5000);

React (material-ui):

const updateUrl = () => {
    return (
      <React.Fragment>
        <Box>
          <form
            onSubmit={handleUpdate}>
            <div>
              <Box>
                <Button
                  onClick={nulll}
                  aria-label="close-settings-popup">
                  <Close />
                </Button>
              </Box>
            </div>
            <FormGroup>
              <Box>
                <FormControl>
                  <TextField
                    type="text"
                    id="URL"
                    value={source}
                    onChange={handleChange}
                    label={
                      <Trans i18nKey="form.cameraForm.source">URL</Trans>
                    }
                  ></TextField>
                </FormControl>
              </Box>
            </FormGroup>
            <div>
              <Button type="submit" variant="contained" color="primary">
                Accept
              </Button>
            </div>
          </form>
        </Box>
      </React.Fragment>
    );
  };

This is what the rtsp creator wrote:

https://i.stack.imgur.com/F7bx0.png

Answer №1

From what I gather from your query, you are looking to establish a websocket connection on the client-side.

const ws = new WebSocket('ws://localhost:3000/ws') //Insert your URL here

This code snippet demonstrates a simple websocket connection using the native JavaScript WebSocket API. Alternatively, you have the option to utilize other libraries such as socket.io.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Having trouble with getting "npm install express" to work properly

After entering the command "sudo npm install -g express-generator," I encountered errors. I searched for solutions on Stackoverflow but none of them worked for me. Some of the methods I attempted include: "sudo chown -R username ~/.npm" and "npm cache c ...

Maintaining the initial value of a textbox in jQuery across various focusin events

Struggling to accurately explain the process, so feel free to check out this helpful fiddle. In my form, there are several text input fields and a single submit button. The submit button becomes enabled once any of the form fields have been altered. If a ...

How can you match the width of a series of elements to the width of an image directly preceding the div?

Looking to ensure that a series of captions have the same width as the images preceding them. This is the HTML code: <div class="theparent"> <img src="pic.jpg"/> <div class="caption"> hello </div> <div> <div ...

What is the best way to showcase data from a JSON file in my React application?

This code snippet is for the Transactions page where I am connecting all data and defining the data to be displayed. import React, { useEffect, useState } from "react"; import { DataGrid } from "@mui/x-data-grid"; import axios from &quo ...

Steps for updating a value in a JSON file using PHP

Trying to modify a value within a JSON file for a specific object is throwing me off balance. The issue arises from having multiple siblings in the same JSON file sharing identical key-value pairs. The JSON structure I'm dealing with appears as follo ...

Looking to eliminate the bullet point next to the labels on a highcharts graph?

I have implemented a Highcharts solid gauge in my project, and you can view a sample image https://i.stack.imgur.com/QQQFn.png However, I am facing an issue where unwanted grey bullets are appearing in the test environment but not locally. I have checked ...

What is the best way to neatly import multiple images in Next.js?

I have a dilemma involving 10 images located in my public directory that I need to use in a component. Instead of individually importing each image like this: import imgurl1 from "../../public/celsius.gif"; import imgurl2 from "../../public/ ...

Checking for the existence of a value in an object using Angular loops

I am seeking assistance in verifying the presence of a specific value within an object. My Object = (vagas.etapas) "Etapas" : { "05daf060-87cb-47cf-8c98-65b36941613d" : "Name 1", "0bf7aabf-42df-4f7d-86dc-af81e6cef394 ...

Error occurred during JSON parsing: String in the JSON object is not properly terminated

Can someone help me with this problem I'm facing? I am trying to fetch a JSON object from my Node.js backend that is the result of a MySQL operation. Here's the code snippet: app.get('/get_events/:playgroundId', cors(), function(req,r ...

The problem is that the code is attempting to use the express.static method to serve static files from a directory called 'public', but it is unable to do so because the '

How to handle console commands in NodeJS? When I try using app.use(express.static(path.join(__dirname, 'public'))); I encounter the error message "ReferenceError: path is not defined" The version of express I am currently using is 3.3.5. Can a ...

What is the best way to send the accurate data type from PHP to Javascript?

My approach involves using the jQuery post method to insert a record in MySQL. The issue I'm facing is that when comparing the output of the PHP using ==, all three conditionals function correctly. However, with ===, the first two conditionals return ...

Executing JavaScript code from an external HTML file

My goal is to create and utilize native web components by defining them as HTML files containing markup, CSS, and Javascript all bundled together in one file, similar to how Vue handles .vue files. These components would be fetched from an external compone ...

Tips for sending information to a child component from a parent in Vue.js

Is there a way to pass the image url to this vue component? I am moving the code to a separate php file that will contain the <script> tag used by Vue, but it seems like it won't recognize the passed data from a parent component. Vue.component( ...

Unable to execute PHP alongside a JavaScript event listener

Using PHP, I am creating a canvas for writing and the text output will appear in a textarea (handled by other functions). There are additional input tags like a title to gather user input. The values from these input tags (title and textarea) will be submi ...

Utilizing the Model URL Parameter in VueJS

In the context of , my objective is to dynamically modify a range input element and reflect that change in the URL. // Incorporating URL update with range input manipulation var Hello = Vue.component('Hello', { template: ` <div> &l ...

Setting environment variables using the node command is successful on Linux and macOS platforms, however, it may not function properly

When I clone a project using git, I encounter issues running npm run build on Windows. The command works fine on Mac and Linux: "build": "API=https://dev-api.myexample.com/v1.0 babel-node build.js", An error message is displayed: 'API' is no ...

Integration of PHP and MySQL with PayPal can be challenging, especially when the PayPal button fails to function unless the amount is

When I initially set the amount value, clicking the "Pay with PayPal" button does not trigger any action. However, if I manually adjust the amount, the PayPal button starts functioning properly. This is how the input field appears: <input name="am ...

Is it a mistake to gather errors together and send them to the promise resolve in JavaScript?

When processing a list in a loop that runs asynchronously and returns a promise, exiting processing on exception is not desired. Instead, the errors are aggregated and passed to the resolve callback in an outer finally block. I am curious if this approach ...

The Art of JSON Relationship Optimization

My journey into learning nodejs has brought me to question how to effectively structure relationships between objects. While I grasp the distinctions between sql and nosql databases, I find myself pondering a scenario where I have two collections in my mon ...

Display a secure image retrieved from an API on a Next.js client using an <img> element

Currently, I am facing a challenge in displaying an image that is protected within my Node.js backend assets folder. The backend setup includes a middleware that verifies whether the user is authenticated and has the necessary permissions to view the file ...