I'm building a web interface to an IoT device that will change the settings of the device. The tech stack that i'm using is as follows: - React.JS for the front end client - Node.js for the server - AutobahnJS library to communicate with WAMP to make RPC calls, Subscribe/Publish events.
On my client side, I'm trying to make a connection to my WAMP router w/ autobahn with the following code
//Define our WAMP connection via autobahn
var url = 'ws://{ip}:{port}/';
var realm = 'com.example.embedded.api';
var connection = new autobahn.Connection({url: url, realm: realm});
console.log(connection);
connection.onopen = function (session) {
console.log("connected to WAMP router");
app.session = session;
console.log("connection to app success");
};
connection.onclose = function (reason, details) {
console.log("WAMP connection closed", reason, details);
app.session = null;
}
connection.open();
This connection fails. When I log out the issue in the console the error message is
websocket.js:167 Mixed Content: The page at 'https://{ipaddress}' was loaded over HTTPS, but attempted to connect to the insecure WebSocket endpoint 'ws://{ip}:{port}/'. This request has been blocked; this endpoint must be available over WSS.
I'm not sure why my error message is telling me that the endpoint over WSS. I'm able to connect to that endpoint point on my code server.
//point to react build
app.use(express.static(path.join(__dirname, './client/build')));
//create a server
const server = https.createServer({
key: fs.readFileSync('server.key'),
cert: fs.readFileSync('server.cert')
}, app)
.listen(port, function () {
console.log(`Example app listening on port ${port}! Go to https://localhost`)
});
//open up a websocket
const wss = new WebSocket.Server({ server });
console.log("wss", wss);
wss.on('connection', function connection(ws) {
ws.on('message', function incoming(message) {
console.log('received: %s', message);
});
ws.send('something');
});
server.listen(port, () => console.log(`Listening on port ${port}`));
