An issue occurred when trying to create an MQTT client due to an error with the wss

Currently working on my first MQTT project, everything was running smoothly in my local environment. However, upon deployment to Heroku, it encountered a failure. Here is the specific error message:

Mixed Content: The page at '' was loaded over HTTPS, but attempted to connect to the insecure WebSocket endpoint 'ws://mqtt.eclipse.org/mqtt'. This request has been blocked; this endpoint must be available over WSS. k._doConnect @ mqttws31.min.js:36 k.connect @ mqttws31.min.js:31 I.connect @ mqttws31.min.js:65 (anonymous) @ app.js:10

I have defined the client in the app.js file.

    var MQTT_CLIENT = new Paho.MQTT.Client("mqtt.eclipse.org", Number(80), "/mqtt", MQTT_CLIENT_ID);

Your assistance is greatly appreciated!

javascripteclipsewebsocketmqtt

Answer №1

Your browser is working hard to keep you safe with the Same Origin Policy in place.

The webpage you are trying to access has been loaded securely via HTTPS to prevent any insecure content from mixing in. This means that connections to non-TLS protected locations, like attempting to connect to mqtt.eclipse.org on port 80, will be blocked.

To resolve this issue, simply instruct the Paho client to connect to the Secure Websocket endpoint on port 443. You can easily do this by providing a full URL to the Paho Client constructor.

var MQTT_CLIENT = new Paho.MQTT.Client("wss://mqtt.eclipse.org", MQTT_CLIENT_ID);

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

What is the best way to determine the final letter of a column in a Google Sheet, starting from the first letter and using a set of

My current approach involves generating a single letter, but my code breaks if there is a large amount of data and it exceeds column Z. Here is the working code that will produce a, d: const countData = [1, 2, 3, 4].length; const initialLetter = 'A&a ...

javascripttypescriptrangeletter

Engaging with the crossrider sidepanel extension

When it comes to the crossrider sidepanel, I prefer using an iframe over js-injected html to avoid interference with the rest of the page. However, I am struggling to establish any interaction between my browser extension and the iframe. I believe adding ...

javascriptiframecrossrider

Adjusting a NodeJS module for easier integration into codebases

I have organized some functions in a file within a node module structure... Here are the files and folder structure I created: - package.json - README.md - LICENSE.md - code |_______ code.js Currently, to use these functions, I include them like th ...

javascriptnpmnode-modules

Troubleshooting jQuery Dropdown Menu Animation Bugs

Take a look at this interesting fiddle: https://jsfiddle.net/willbeeler/tfm8ohmw/ HTML: <a href="#" class="roll-btn">Press me! Roll me down and up again!</a> <ul class="roll-btns"> <li><a href="#" class="control animated noshow ...

javascriptjqueryhtmlcss

Navigate through the list of options by scrolling and selecting each one until the desired element is

Hey, I've got this AngularJs directive that selects an item based on the "key-pressed" event, and it's working perfectly. The issue arises when there is a scroll bar since the elements get hidden, making it difficult for me to see them. You can ...

javascripthtmlcssangularjs

Error: Issue transferring data to controller from Ng-Style

Currently, I am developing an application using Ionic and AngularJS. In this project, I am using ng-repeat to populate the results and want to display different colors based on certain criteria. Initially, I managed to achieve this using inline ng-style c ...

javascriptangularjsionic-framework

Creating a JSON object hashtable using jsHashtable: A step-by-step guide

I have a good understanding of how to create a hashtable from scratch using jshashtable. For instance: <script type="text/javascript" src="jshashtable.js"></script> <script type="text/javascript"> var typesHash = new Hashtable(); ...

javascriptjsonhashtable

The Vue backdrop is hiding the Bootstrap modal

After attempting to integrate a modal into a component, I encountered an issue where the backdrop appears in front and the modal is hidden behind it as shown below. I have reviewed all the position CSS properties within the parent components but could not ...

javascriptvuejs3bootstrap-5

Tips on identifying HTML email input validation using JavaScript?

Just like when you can determine whether an input element with a required attribute was successfully validated, try using the following code: if($('input[type="email"]').val() && $('input[type="email"]').val().includes('@') & ...

javascripthtml

Angular 4 showcases the information stored within this dataset

The data returned from an API to my Angular 4 application is not to my liking. Here is an example of the JSON, where I am only interested in the coin and its price: Goal is to display this data on the page: Coin Price BTC $4,281.28 ETH $294.62 ...

javascriptarraysjsonangular

Issue with Observable binding, not receiving all child property values in View

When viewing my knockout bound view, I noticed that not all values are being displayed. Here is the script file I am using: var ViewModel = function () { var self = this; self.games = ko.observableArray(); self.error = ko.observable(); se ...

javascriptmvvmknockout.js

Encountering an unexplained JSON error while working with JavaScript

I'm trying to retrieve data from a JSON API server using JavaScript AJAX and display it in an HTML table. However, I keep encountering an undefined error with the data displaying like this: Name id undefined undefined This is my code snippe ...

javascripthtmljsonajax

Looking to retrieve the specific clientX and clientY JavaScript Position within a child div element on a Wordpress Page?

I've implemented a highlight hover map in JavaScript that displays an 'info box' div when hovering over a specific area at . However, I'm encountering an issue where the 'info box' doesn't appear precisely at the mouse lo ...

javascriptjquerywordpress

Extracting a particular field from a Meteor collection document in a JavaScript file and removing any HTML tags

In my Meteor Collections, I have a group of Projects each with a title and description. My goal is to extract the rich text content from the description field using a Template helper. I attempted the following code snippet to retrieve the description for ...

javascriptjquerymongodbcollectionsmeteor

.value not showing correct data in JavaScript

I am attempting to retrieve the value entered by the user in an HTML input field. While I can display a fixed, predetermined value with ease, this is not my intention. My goal is for users to input a numerical value and for that value to be displayed/adj ...

javascripthtml

Tips for blocking submissions when a user tries to input a hyperlink

I have encountered a problem in my journey of learning JS and unfortunately, I couldn't resolve it by myself. Lately, spam has been flooding through the form on my website and all my attempts with jQuery and JS to fix it have failed. As a last resort ...

javascripthtmljquery

Leveraging Vue 3 Composition API with accessors

I'm currently in the process of refactoring some of my components using the composition API. One component is giving me trouble, specifically with asynchronous state when trying to retrieve data from one of its getters. Initially, the component was u ...

javascriptvue.jsvuexvue-composition-api

How can one break down enum values in typescript?

I've defined an enum in TypeScript as shown below: export enum XMPPElementName { state = "state", presence = "presence", iq = "iq", unreadCount = "uc", otherUserUnreadCount = "ouc", sequenc ...

javascripttypescriptobjectenumsdestructure

Ways to conceal one message within another

I am currently working on incorporating Facebook's comments box into my website. My goal is to have the comments that I retrieve through GET requests and display in the template remain invisible to users, but visible to search engines. As part of an ...

javascriptjqueryhtmlcss

Struggling to make jquery-masonry function properly

Coding Challenge <div id="container"> <div class="item"> <p>Lorem ipsum dolor sit amet tail frankfurter brisket, meatloaf beef ribs doner pork prosciutto ball tip rump tenderloin tongue. Pastrami fatback beef, sausage beef ribs venison ...

javascriptjqueryjquery-masonry