I'm trying to implement an mqtt over websocket client subscriber in Blazor using Paho. The problem is it insists on using wss instead of ws and throws an ERR_SSL_PROTOCOL_ERROR error upon connection.
Here's a simplified code block:
var mqtt;
var host = "api.mydomainexample.com";
var port = 1884;
function onConnect(){
console.log("connected ! Now listening for messages ..");
mqtt.subscribe("someTopic");
}
function onFailure(message){
console.log("connection to host failed: " + message);
}
function onMessageArrived(msg){
var message = "Message received on topic '"+ msg.destinationName +"': "+ msg.payloadString;
console.log(message);
}
function mqttConnect() {
console.log("connecting to " + host + " ..");
mqtt = new Paho.MQTT.Client(host, port, clientid);
var options = {
timeout: 3,
onSuccess: onConnect,
onFailure: onFailure,
useSSL: false
};
mqtt.onMessageArrived = onMessageArrived;
mqtt.connect(options);
}
I copied this code into an html page created in notepad, called the function from the html body and ran the file in browser. It worked and subscribed well.
Also I added useSSL: false in the connection options although I didnt have it before but still didnt work.
here's the error I'm having from console:
WebSocket connection to 'wss://api.mydomainexample:1884/mqtt' failed: Error in connection establishment: net::ERR_SSL_PROTOCOL_ERROR
I also changed my projects launch settings so that it launches as http and not https because based on this answer, I cannot use a ws from a page loaded through https.
Any ideas ? Can't I just connect to a websocket without certificate in blazor?
Ok it turns out that when creating the blazor application, there is an option to 'configure on https' where this option causes requests redirection from http to https and consequently asks for secure wss instead of ws.
Hope this helps someone!
Related
I have simple web server in python running for example on 127.0.0.1:8080.
I can serve http-requests and web sockets.
This is example of server routes.
...
web.route('*', '/ws', ws_handler),
web.route('*', '/api/some_url', http_handler)
...
And I have frontend part of my application in Vue 2 JS.
I set up vue.config.js file for proxying dev server.
const host = "127.0.0.1"
const port = 8080
devServer: {
proxy: {
"/api": {
target:`http://${host}:${port}/`,
secure:false
},
"/ws": {
target:`ws://${host}:${port}/`,
ws:true,
secure:false,
changeOrigin:true
}
}
}
When I make http requests, for example
let res = await axios.get('/api/some_url');
everything works fine, but if I want to set up websocket connection
soc = new WebSocket('/ws');
I got error
Failed to construct 'WebSocket': The URL '/ws' is invalid.
For websockets my settings does not work.
Connection sets up and everything works fine if full address is provided.
soc = new WebSocket('ws://127.0.0.1:8080/ws');
I have read many articles and had no success for resolve my issue - how can I do proxying websocket connection for Vue JS dev server.
You should instantiate your WebSocket as ws = new WebSocket('ws://' + window.location.host + '/ws');
I can not get postman to connect to the server using websockets.
const port =5001;
io.on("connection", (socket) => {
console.log("Client connected",socket.id);
socket.emit("handshake","connected to backend");
socket.on("test", (data)=>{
console.log("test data is:",data);
socket.emit("test", "server heard you!")
});
}
in postman the request address is:
ws://localhost:5001/socket.io/?transport=websocket
the symptoms are: postman says it's connected. but if I try to send anything - it disconnects after a timeout.
if I set the reconnection attempts to 1, it will automatically reconnect when it disconnects...
but I don't think it's actually connecting - because nothing is happening on the server (no new client connected message)
the format of messages I have also experimented with, to no avail.
42["test","i hear you"]
42[test,i hear you]
["test":"i hear you"]
{"test":"I hear you"}
42{"test":"I hear you"}
{"event":"test","data":"I hear you"}
42{"event":"test","data":"I hear you"}
42["event","test","data","I hear you"]
["event","test","data","I hear you"]
I have inspected the console results, and have not found leads there yet. what could I be missing?
You are using socket.io as WebSocket and that does not work because socket.io is not an implementation of websocket.
From official socket.io documentation:
Socket.IO is NOT a WebSocket implementation. Although Socket.IO indeed uses WebSocket as a transport when possible, it adds additional metadata to each packet. That is why a WebSocket client will not be able to successfully connect to a Socket.IO server, and a Socket.IO client will not be able to connect to a plain WebSocket server either.
// WARNING: the client will NOT be able to connect!
const socket = io("ws://echo.websocket.org");
Source: https://socket.io/docs/v4#What-Socket-IO-is-not
Postman v8.10.0 added support for Socket.IO, read more.
Just enter ws://localhost:5001 as the connection URL and hit Connect.
Also, you can configure the client version (default: v3), handshake path (default: /socket.io), and other reconnection configurations in the request settings.
Because you don not add listener. Add listener "handshake" to postman. You will receive message.
This is my code:
io.on('connection', () => {
console.log('user connected');
setInterval(() => {
io.emit('msg', { data: [1, 2, 3] });
}, 5000);
});
Working on socket.io for the first time and trying to get it up and going, I can make the request and I have the server up and going, here is the server in node.
const app = require('express')();
const http = require('http').createServer(app);
const io = require('socket.io')(http);
app.get("/",function (req,res){
res.send("Hello you socket loving bastard!");
});
io.on('connection', socket => {
console.log('user connection', socket);
io.emit('You got someone!', {user: "me"});
});
io.on('close', socket => {
console.log(socket);
});
http.listen(9090, () => {
console.log("Node starting on 9090 for websockets!")
});
Using vue-native-websocket I have this ...
Vue.use(Socket, 'ws://localhost:9090/', {
reconnection: true,
reconnectionAttempts: 5,
reconnectionDelay: 1500
});
The console in the browser says:
build.js?b408:1 WebSocket connection to 'ws://localhost:9090/' failed: Connection closed before receiving a handshake response
The server says nothing in the console at all, however, it will serve the get request
Well... the issue is that I'm using vue-native-websocket Socket.io is NOT a native websocket handler and adds extra header information which was lacking apparently. I switches to just using ws in node and it works fine.
From the Socket.io docs.
Socket.IO is NOT a WebSocket implementation. Although Socket.IO indeed uses WebSocket as a transport when possible, it adds some metadata to each packet: the packet type, the namespace and the packet id when a message acknowledgement is needed. That is why a WebSocket client will not be able to successfully connect to a Socket.IO server, and a Socket.IO client will not be able to connect to a WebSocket server either.
I have an Apache webserver with a valid SSL certificate. It runs my web application on it. Let's call it Server A.
Then I have a second server running a Node-Js server with a valid SSL certificate. There also socket.IO runs. And this one we call Server B.
A client requests the web application at server A and gets the desired page displayed. If the page is set up at the client, a connection to server B is established via websockets. If another client should change something on the page, it will be adapted for all currently connected clients.
Websockets work as desired. As long as the page is accessed via a computer browser.
If I now go to the website with my smartphone (Iphone 7) via Safari or Chrome (WLAN), no connection to the websocket server (Server B) is established.
Then I set up a small websocket example on http without encryption.
There the websockets work on the smartphone browser.
I hope I could describe my problem understandably. I am very grateful for hints, examples or similar.
// This script run on my Server
const fs = require('fs');
const server = require('https').createServer({
key: fs.readFileSync('myserver.key', 'utf8'),
cert: fs.readFileSync('myserver.cer', 'utf8'),
passphrase: ''
});
let io = require('socket.io')(server);
server.listen(3003);
io.on('connection', function (socket) {
console.log("User Connected connect " + socket.id);
socket.on('disconnect', function () {
console.log("User has close the browser " + socket.id);
});
socket.on('feedback', function (data) {
io.sockets.emit('feedback', data);
});
});
// On Clientsite
socket = io.connect('wss://adressOfServer:3003', {
// secure: true,
transports: ['websocket'],
upgrade: false,
rejectUnauthorized: false
//Here I have already tried many combinations
});
socket.on('connect_error', function (error) {
// alert(error);
});
I'm trying to setup basic server side event ability using Apache/Thin/Sinatra. Everything works as exepcted when I run the Thin server directly. When I run the Thin server through Apache using the RackBaseURI config setting, everything still works, but the connection is not persisted. It goes through a cycle of opening, writing some data to the browser and immediately closing. Seems like an Apache configuration issue?
I've gone through the Apache config and don't see anything that seems like it would prevent an open connection. Because I'm not sure where the error is, I don't want to post endless configuration data, so I can include more if I'm missing something...
sinatra (1.3.4),
thin (1.5.0),
Apache/2.2.22 (Ubuntu),
ruby 1.8.7
The JavaScript...
$j(function(){
console.log("Starting...");
var es = new EventSource("/stream_event");
es.addEventListener('message', function(e) {
console.log(e.data);
}, false);
es.addEventListener('open', function(e) {
console.log("Connection Open");
}, false);
es.addEventListener('error', function(e) {
console.log("error = " + e.eventPhase)
if (e.eventPhase == EventSource.CLOSED) {
console.log("Connection Closed");
}
}, false);
}
The server side sinatra/ruby..
set :server, :thin
connections = []
get '/' do
content_type 'text/event-stream'
stream(:keep_open) { |out|
connections << out
out << "data: hello\n\n"
}
end
get '/post_message' do
connections.each { |out| out << params[:message] << "\n" }
"message sent"
end
EDIT:
And here's the output I see in the browser console ...
Connection Open
hello
error = 2
Connection Closed
Connection Open
hello
error = 2
Connection Closed
Connection Open
hello
error = 2
Connection Closed
Connection Open
hello
error = 2
Connection Closed
Connection Open
hello
error = 2
Connection Closed
Seems to be something related to the RackBaseURI configuration setting. I was able to get things working by removing that attribute and directing the traffic to my Sinatra app using Apache's proxy abilities...
ProxyPass /stream_event http://127.0.0.1:9292
ProxyPassReverse /stream_event http://127.0.0.1:9292
The primary disadvantage here is that I need to startup and monitor the running Sinatra app manually using some other process.