Mosquitto and simple Paho JS Client - javascript

I am trying to get a simple mqtt broker set up and access it from a web page. I have had pretty much 0 luck.
I've got mosquitto 2.0.14 downloaded and running. Here's my configuration file:
listener 1883
listener 9001
protocol websockets
This generates the following log when I run mosquitto -c mosquitto_conf -v
1637948154: mosquitto version 2.0.14 starting
1637948154: Config loaded from mosquitto.conf.
1637948154: Opening ipv6 listen socket on port 1883.
1637948154: Opening ipv4 listen socket on port 1883.
1637948154: Opening websockets listen socket on port 9001.
1637948154: mosquitto version 2.0.14 running
Here's my html file, which I simply open in the browser. It uses Paho's js client.:
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.min.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
var mqtt;
var reconnectTimeout = 2000;
var host = "192.168.1.94";
var port = 9001;
function onConnect() {
console.log("Connected");
message = new Paho.MQTT.Message("hello");
message.destinationName = "sensor1";
mqtt.send(message);
}
function mqttConnect() {
console.log("Connecting to " + host + ":" + port);
mqtt = new Paho.MQTT.Client(host, port, "clientjs");
var options = {
timeout: 3,
onSuccess: onConnect,
};
mqtt.connect(options);
}
</script>
</head>
<body>
<script>
mqttConnect();
</script>
</body>
</html>
I'm using a guide from this website: http://www.steves-internet-guide.com/using-javascript-mqtt-client-websockets/
It errors out with the following console error in the browser:
WebSocket connection to 'ws://127.0.0.1:9001/mqtt' failed
I have been having a hard time finding an updated tutorial that works. My ultimate goal is to create a react app that connects to an mqtt broker via websockets and receives messages to update state in redux.
Questions:
How do I get the js client to connect?
How do I set the host for mosquitto? Can I use a diff host like myhost.local or am I stuck using 127.0.0.1 or whatever I see when I run ipconfig (I'm on windows)?

You need to add allow_anonymous true to allow users to connect without supplying a username/password.
This is part of the set of changes introduced in v2.0 to improve the default security posture of mosquitto out of the box.

Related

How do I connect to Websockets program running on my server?

I have a Websocket program running on Ubuntu machine on Digital Ocean. The code is shortened below.
// server.ts
import ws from "ws";
const wss = new ws.Server({
port: 3002,
});
const handler = applyWSSHandler({ wss, router: appRouter, createContext });
console.log("WebSocket Server listening on ws://localhost:3002");
...
I host the server using nodemon server.ts or pm2 start server.ts. The program compiles and logs that Websocket Server is listening.
Now, here is a minimum code for a client which just checks if Websockets is active.
// client.js
const ws = new WebSocket('ws://xxx.xxx.xxx.xxx:3002'); // where xxx.xxx.xxx.xxx is the IPv4 of my Ubuntu machine
ws.onopen = function (event) {
console.log('connected');
};
Nothing gets logged, showing that the Websocket server isn't active.
I expect "connected" to be printed.
If I host my server locally instead of on Digital Ocean, and connect to "localhost:3002", "connected" does get printed out.
Is there something wrong with the way I am hosting the server, or am I connecting to the server wrongly?
Any help is appreciated. Thanks!

Can't get socket.io to work on server, while running fine locally

This code is running fine with the node.js server running locally:
Server:
var client = require('socket.io').listen(3001).sockets;
Client HTML:
<script src="http://localhost:3001/socket.io/socket.io.js"></script>
Client Javascript:
var socket = io.connect('http://localhost:3001');
Then I moved the server.js to my ubuntu server which has node and socket io installed, using the same code, and started it without error.
Clientside I changed the local html/javascript file from localhost:3001 to ServerIP:3001 and it just doesn't work anymore. When I check firebug, I can see it never finishes trying to GET http://ServerIP:3001/socket.io/socket.io.js. It does not fail, just never finishes.
What did I do wrong? Thank you.
This is most likely a firewall issue.
Allow connections on port 3001 using the following (if you use iptables)
iptables -A INPUT -p tcp --destination-port 3001 -J ACCEPT
Than try again

How to connect to a Mosquitto broker on a Raspberry Pi through web sockets?

I am trying to connect to a Raspberry Pi that has the Mosquitto broker installed. The client on the RPi is connected using:
client.connect("127.0.0.1", 1883, 60)
I tried to connect to it on my MQTT JavaScript client using the following specifications but I failed:
client = new Paho.MQTT.Client("10.101.125.190", 1883,"myclientid_" + parseInt(Math.random() * 100, 10));
I also tried changing the port to 8080 from the JavaScript side but I still failed. If I change the port to 8080 on the RPi then it won't even connect.
This is the error that I am getting at the moment:
WebSocket connection to 'ws://10.101.125.190:1883/mqtt' failed: Error during WebSocket handshake: net::ERR_CONNECTION_RESET
So, what do I need to change to fix this error? The RPi and my JS client are both in the same local network.
Edit:
I forgot to mention that I have already tried this with test.mosquitto.org - 8080 and it worked, but as soon as I change the address then I start getting the error.
MQTT over websockets does not share the same port as native MQTT.
You will need to add a new listener to your mosquitto config.
You will need to add something like the following to the end of your /etc/mosquitto/mosquitto.conf (or in a seperate file in /etc/mosquitto/mosquitto.d)
listener 1884
protocol websockets
Then need to update your JavaScript to connect to port 1884 not 1883
You will also need to be using a version of mosquitto newer than than 1.4.x iirc the default version that is packaged for raspbian is too old. Follow the instructions here to get a newer version.

how to install socket.io client

Is it possible to reference socket.io client library with a relative path like:
src="/socket.io/socket.io.js"
instead of
src="https://miweb:6969/socket.io/socket.io.js"
Also to connect the library we do:
var websocket = io.connect ("https://miweb.com:6969");
I have seen some do:
var websocket = io.connect ("/");
As if socket.io were running on the same port and were running on the same project.
What should I do to our server to work this way?
Yes, if your webpage is served from the same location than Socket.io, you can do this:
<script src="/socket.io/socket.io.js"></script>
<script>
var socket = io.connect('/');
socket...
</script>
But if the page is in another domain you should use an absolute url.

Setting up node.js and sockets.io

I have spent literally all day visiting tutorial websites explaining how to use nodejs and sockoets.io but I'm not able to get anything to work.
I have managed to at least run a js file:
node filename.js
But it doesnt fully work. It runs until it reaches the "var server = net..." line since the "console.log("hello")" line DOES NOT EXECUTE:
var net = require('net');
var server = net.createServer(function (socket) {
console.log("hello");
socket.write('Echo server\r\n');
socket.pipe(socket);
});
console.log("hello");
server.listen(1337, '127.0.0.1');
This i got from the official node.js site home page:
http://nodejs.org/
All tutorials claim that its just so easy.
I have just tried to follow this tutorial to the letter although a lot of them skim over the part I'm stuck with (the actual installing):
http://tutorialzine.com/2012/08/nodejs-drawing-game/
so following the above tutorial i run app.js from the console and i get a message "socket.io started", I get stuck at the part where it asks for you to go to this URL:
http://localhost:8080
The browser attempts to go there but it hangs for a few minutes then says:
"No data received
Unable to load the webpage because the server sent no data."
I have no idea how node.js works and there don't seem to be explanations as to how it works...
Where is node.js installed? If its meant to be on the server, how does it get installed on the server? where should I install it to test locally? what is socket.io? where should that be installed?
All I seem to get on node.js info sites are code block dumps with little explanation as what is going on.
I followed a youtube tutorial where the guy was using WAMP server, so I thought maybe I needed to put files on a server, so I installed WAMP and disabled IIS8 server. Another note, when going to "localhost" on my browser it says "it works!" which seems like an automating message from a local server - I thought it was IIS8 but even though I disable the service, that message displays. Even if I install WAMP and have it running that message displays. Also, WAMP doesn't work either, since php files don't run. Localhost always takes me to a page displaying that message.
Is this a local server issue?
it is hard to give an "answer" to your question(s). I would recommend you start with a much more basic introduciton that the drawing game. Also, I would suggest you start with nodejs as is, without using socket.io right away. when you understand how node works, you can start with websockets.
Here is some node 101 stuff:
http://www.nodebeginner.org/
http://thatextramile.be/blog/2011/12/node-js-for-dummies/
You should not need WAMP at all. nodjs is the server!
It seems that you have no idea what ports are. Your node script start a webserver that listens on port 1337. If you want to see what that server serves, you need to point your browser to localhost:1337 (not port 8080, as you tried)
I have created a basic gist on github for using socket.io + node + express
The minimum working environment for making socket.io app is this :
var express = require('express'),
app = express(),
http = require('http'),
server = http.createServer(app),
io = require('socket.io').listen(server);
app.get('/', function(req, res) {
res.send('<!doctype html> \
<html> \
<head><meta charset="utf-8"></head> \
<body> \
<center>Welcome to <strong>socket.io</strong></center> \
<script src="/socket.io/socket.io.js"></script> \
<script> \
var socket = io.connect(); \
socket.emit("message", "Howdy"); \
setInterval(function () { \
socket.emit("message", "Ping"); \
}, 1000); \
</script> \
</body> \
</html>');
});
io.sockets.on('connection', function (socket) {
socket.on('message', function(msg) {
console.log(msg);
});
});
server.listen(8000);
you need to require('socket.io') and then create a connection io.sockets.on('connection', function (socket) in order to make it work

Categories

Resources