MQTT.js experiencing issues within a Vite environment (React with TypeScript) and a Next.js application

Node version: 18.17.1 Npm version: 9.8.1

I have successfully installed the mqtt package using the following command:

npm install mqtt

The installation is working perfectly without any issues. Here is a snippet of the code:

import { useState } from 'react'
import './App.css'

import * as mqtt from 'mqtt'

function App() {

  let client = mqtt.connect("mqtt://test.mosquitto.org"); // create a client

  return (
    <>
      <p className="read-the-docs">
        Click on the Vite and React logos to learn more
      </p>
    </>
  )
}

export default App

An error message is being displayed which can be viewed here.

  1. Successfully connected to MQTT broker from Javascript
  2. Failed to connect to MQTT broker from Vite (React)
  3. Failed to connect to MQTT broker from Next.js

Answer №1

In a web application, direct connection with native MQTT over TCP is not possible. The library will automatically convert the connection to MQTT over WebSockets (using the default HTTP port).

If the web app is accessed via HTTPS, the browser sandbox will block insecure WebSocket connections, requiring the use of Secure WebSocket.

To ensure secure communication, update the broker URL to begin with wss:// instead of mqtt:// and verify that the correct port is specified.

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

Caught in the midst of a JSON update conundrum

I need some help with my JavaScript/JSON coding. I have a script that loads JSON data and displays it on an HTML page. Now, I want to know how I can update this data. Specifically, I want the script to update the location of the person when a button is cli ...

Checking the token's validity using the API within the AuthGuard canActivate method in Angular8

As I navigate through certain routes, I need to validate each refresh request. To achieve this, I am utilizing Angular's AuthGuard. The challenge lies in the canActivate method where I aim to perform validation using an online API. The API endpoint i ...

Update all requests sent to the hapi server

Recently, I began delving into the world of Hapi server. My goal is to adjust all requests sent to the Hapi server before they are saved in the back end. During my research, I stumbled upon 'server.ext' and decided to experiment by coding the fol ...

Null reference exception in Typescript + NextJS

I am facing an issue where the ref to a custom child component in my parent component is always null, preventing me from calling methods on it. Even though I believe I have implemented everything correctly, the ref (named CanvasUI) remains null and I can& ...

Having trouble with Jquery's .mouseover() method? Let's catch the solution!

I'm currently working on a jQuery homework assignment and I've been attempting to enhance the mouseover feature, but unfortunately, it's not functioning as expected. $("button").mouseover(function() { $(this).css({ left: (Math.rando ...

Tips for creating a React component input field design

I am currently using React version 18.2.0 and I am looking to create an input field similar to the image below. The goal is to allow users to add multiple chips, save them, and then pass them to the backend project. https://i.sstatic.net/PzF7v.png I have c ...

Ways to include a CSS file path in a link tag from an npm package

I have recently installed a package using npm. npm install lightgallery Now, I am trying to fill the href attribute of a link with the css file directory of this package. Here is what I have so far: <link rel="stylesheet" href="/node_mod ...

Encountering a TypeError with Arg 1 while trying to execute the save method in jsPDF

I am currently working on a react project with a simple implementation of jsPDF. I am trying to execute the sample 'hello world' code but encountering an error when using the save method: https://i.stack.imgur.com/o4FWh.png My code is straightf ...

What is the most effective approach for annotating TypeScript abstract classes that are dynamically loaded?

I am in the process of developing a library that allows for the integration of external implementations, and I am exploring the optimal approach to defining types for these implementations. Illustration abstract class Creature { public abstract makeN ...

Next and Nest servers enable the handling of SSR and client requests separately using distinct frontend and backend servers

Currently, I have a NestJS backend that holds the data, including user information, and a NextJS frontend. In my setup, Next redirects all requests to an /api route to Nest, where authentication and data serving take place. Authentication is done by Nest u ...

The use of DIV tags allows the element to be displayed in an inline

In my project, I decided to add three div tags. The first two are positioned next to each other with the third div tag placed below them. However, when I tried to insert a slideshow into the first div tag, all of the div tags ended up displaying as "block" ...

Top method for changing an array in javascript

I'm in the process of building a react application, and I've received the following array from an API call. var arrayLike ={ "2020-W1": [ { "type": "TAX_REFUND_IN_INT", &q ...

Error occurred while making a request to https://registry.npmjs.org/corepack. Failed due to connection issue: unable to reach the host

Previously, NPM was functioning without any issues, but now I am facing a problem where any attempt to connect to the registry results in a timeout. When using NPM, I receive an error message stating request to https://registry.npmjs.org/corepack failed, ...

Hide jquery scroll bar

I am currently working on a WordPress plugin with the Twenty Thirteen theme. My goal is to display a modal when a div is clicked, and at that time I want to hide the scrollbar on the body of the page. Despite trying the following code snippet, it doesn&ap ...

Submitting information to an HTML page for processing with a JavaScript function

I am currently working on an HTML page that includes a method operating at set intervals. window.setInterval(updateMake, 2000); function updateMake() { console.log(a); console.log(b); } The variables a and b are global variables on the HTML page. ...

Universal form submission via ajax

Issue with ajax/javascript: I am working on an application that includes multiple forms. My goal is to create a generic JavaScript function that can submit forms to their respective controllers by using the form ID. I have successfully retrieved the form I ...

Utilizing Django's authentication system within Next.js: A guide

Currently working on a web application with Django as the backend (using Django REST Framework for API) and Next.js for the frontend. I'm thinking about incorporating user authentication in the frontend using PassportJS or Auth0. However, I'm cu ...

Executing the main process function

One of the challenges I'm facing is calling a function from the main process in Javascript while a button is clicked in another file. Here is the code snippet: Main.js const electron = require( 'electron') const {app, BrowserWindow} = elec ...

The issue encountered when trying to load Javascript through PHP

As a beginner, please be patient with me. I am attempting to dynamically load this JavaScript easy slider into a div on my index page using the following code ... switch($_GET['page']) { case '#YELLOW' : $page = ' <div id ...

Is there a way for me to retrieve form information?

I have encountered a challenge with my React app. The login form data appears to be empty when I attempt to send it to the backend. // Login component class submitLoginForm = (event) => { event.preventDefault(); const target = event.target; ...