I get the following error in my chrome console.
websocket.js:111 WebSocket connection to 'ws://c7f2053b.ngrok.io/socket.io/?EIO=3&transport=websocket' failed: Invalid frame header
In my firefox i get this
The connection to ws://c7f2053b.ngrok.io/socket.io/?EIO=3&transport=websocket&sid=h1U3iQ9b3INSkg9xAAAC was interrupted while the page was loading.
Is there anyway to clear this issue please suggest me ...
Please check
1) Chrome and Firefox versions. Older versions might not have full support for WebSockets
What browsers support HTML5 WebSocket API?
2) Test Basic code :: Try with regular JavaScript Code first and see if connection is establishing:-
websocket = new WebSocket(URL);
websocket.onopen = function(evt) {
alert("Connected...");
websocket.send(message);
websocket.onmessage = function(evt) {
alert(evt.data);
};
websocket.onclose = function(evt) {
alert(evt.data);
};
websocket.onerror = function(evt) {
alert(evt.data);
};
Related
I have an Electron app which tries to connect to a device over a web socket. The connection is encrypted (i.e. wss) but the SSL certificate is self signed and thus, untrusted.
Connecting inside Chrome is ok and it works. However inside Electron I run into problems. Without putting any certificate-error handlers on the BrowserWindow or on the app I receive the following error in the console output:
WebSocket connection to 'wss://some_ip:50443/' failed: Error in connection establishment: net::ERR_CERT_AUTHORITY_INVALID
Then shortly after:
User is closing WAMP connection.... unreachable
In my code, to make the connection I run the following.
const connection = new autobahn.Connection({
realm: 'some_realm',
url: 'wss://some_ip:50443'
});
connection.onopen = (session, details) => {
console.log('* User is opening WAMP connection....', session, details);
};
connection.onclose = (reason, details) => {
console.log('* User is closing WAMP connection....', reason, details);
return true;
};
connection.open();
// alternatively, this also displays the same error
const socket = new WebSocket(`wss://some_ip:50443`);
socket.onopen = function (event) {
console.log(event);
};
socket.onclose = function (event) {
console.log(event);
};
NOTE: Autobahn is a Websocket library for connecting using the WAMP protocol to a socket server of some sort. (in my case, the device) The underlying protocol is wss. Underneath the code above, a native JS new WebSocket() is being called. In other words:
As I mentioned, I've tested this code in the browser window and it works. I've also built a smaller application to try and isolate the issue. Still no luck.
I have tried adding the following code to my main.js process script:
app.commandLine.appendSwitch('ignore-certificate-errors');
and
win.webContents.on('certificate-error', (event, url, error, certificate, callback) => {
// On certificate error we disable default behaviour (stop loading the page)
// and we then say "it is all fine - true" to the callback
event.preventDefault();
callback(true);
});
and
app.on('certificate-error', (event, webContents, link, error, certificate, callback) => {
// On certificate error we disable default behaviour (stop loading the page)
// and we then say "it is all fine - true" to the callback
event.preventDefault();
callback(true);
});
This changed the error to:
WebSocket connection to 'wss://some_ip:50443/' failed: WebSocket opening handshake was canceled
My understanding is that the 'certificate-error' handlers above should escape any SSL certificate errors and allow the application to proceed. However, they're not.
I've also tried adding the following to main.js:
win = new BrowserWindow({
webPreferences: {
nodeIntegration: true,
webSecurity: false
}
});
process.env.ELECTRON_DISABLE_SECURITY_WARNINGS = '1';
process.env.NODE_TLS_REJECT_UNAUTHORIZED = '0';
With Election, how do I properly deal with a certificate from an untrusted authority? i.e. a self signed cert.
Any help would be much appreciated.
I had the same problem , all i added was your line:
app.commandLine.appendSwitch('ignore-certificate-errors');
I use socket.io, but i think its the same principal.
I do however connect to the https protocol and not wss directly.
This is what my connection looks like on the page:
socket = io.connect(
'https://yoursocketserver:yourport', {
'socketpath',
secure: false,
transports: ['websocket']
});
That seems to have done the trick.
Thank you for the help :) i hope this answer helps you too.
In this example I'm using simple-peer, although I have tested with other implementations as well as my own. This seems to be an issue with creating the data channels.
The example from the github page of simple-peer has been slightly modified and used: https://github.com/feross/simple-peer
var init = location.hash === '#1';
var config = {reliable:true, maxRetransmits:0, ordered:false};
var p = new SimplePeer({ initiator: init, trickle: false, channelConfig: config })
console.log(p);
p.on('error', function (err) { console.log('error', err) })
p.on('signal', function (data) {
console.log('SIGNAL', JSON.stringify(data))
document.querySelector('#outgoing').textContent = JSON.stringify(data)
})
document.querySelector('form').addEventListener('submit', function (ev) {
ev.preventDefault()
p.signal(JSON.parse(document.querySelector('#incoming').value))
})
p.on('connect', function () {
console.log('CONNECT')
console.log(p);
console.log(p._channel);
if(init){
for(let i=0;i<100;i++){
p.send(JSON.stringify(i));
}
}
})
var rec = 0;
p.on('data', function (data) {
rec++;
console.log('data: ' + JSON.parse(data));
if(!init){
p.send(data);
}
if(rec >= 100){
console.log("got all");
}
})
When initiating the connection using Firefox(61.0.2 x64), the connection is forced to reliable, even when trying to set it to unreliable using unreliable:false, ordered:false and maxRetransmits:0. Only the ordered property is properly used.
When checking the connection object, the maxRetransmits and maxRetransmitTime settings are not exposed. If you connect to the Firefox connection using Chrome, both maxRetransmits and maxRetransmitTime will be set to 65535 in Chrome.
If you initiate the connection using Chrome, and connect using Firefox, the connection will be opened as unordered and unreliable in both Chrome and Firefox as well as having 0 maxRetransmits in Chrome.
Is this a bug, or am I missing something in setting up the connection to support unreliable data channels when initiating the connection using a Firefox browser?
Yes, this is a very unfortunate bug in Firefox tracked here that leads to 0 values being ignored for both maxRetransmits and maxPacketLifeTime. It has been fixed in Firefox 62. If you have to support Firefox < 62, you can work around this by setting maxPacketLifeTime to 1. But you should only do this in Firefox since older Chrome versions do not support maxPacketLifeTime. Yes, it's a mess.
Please note that there is no reliable member in the RTCDataChannelInit dictionary. There is also no maxRetransmitTime attribute on the RTCDataChannel interface. Both have been removed a long time ago.
Our application uses SignalR and we have enabled the websockets in our applicaiton. Sometimes we are getting the below error in browser console window and during the same time the auto update is not working. After the relaunch it is started working.
Firefox:
"The connection to ws://xx.xx.xx.xx:xxxxx/signalr/connect?transport=webSockets&connectionToken=%2F54BwG4ui3MbJPK2t8DfS9AklLCtAEDQ1sHeAsZ6e3h2LVT0WYbbgGvCI2AlnsJf0AqY4AzMtp6FS0xl07td8kKFYhAmIEL4GjLCXP%2Bhlfy3k226j%2B4fXHVB8Vvblewc&connectionData=%5B%7B%22name%22%3A%22pushdatahub%22%7D%5D&tid=7 was interrupted while the page was loading."
Chrome:
jquery.signalR-1.0.0.min.js:10 WebSocket is already in CLOSING or CLOSED state.
Please refer below setup done on the server.
.Net framework 4.6.1 in the server.
websockets enabled in IIS/Application
httpruntime set in web.config
Server uses SignalR Hub
Sample client code:
$scope.isHubConnectionFailed = false;
$scope.connection = $.hubConnection(AppURL);
$scope.HubProxy = $scope.connection.createHubProxy(App.chatHub);
$scope.connection.start()
.done(function () {
$scope.isHubConnectionFailed = false;
})
.fail(function() {
$scope.isHubConnectionFailed = true;
});
var tryingToReconnect = false;
$scope.connection.reconnecting(function() {
tryingToReconnect = true;
});
$scope.connection.reconnected(function() {
tryingToReconnect = false;
$scope.isHubConnectionFailed = false;
});
$scope.connection.disconnected(function() {
if (tryingToReconnect) {
$scope.isHubConnectionFailed = true;
}
});
Anyone having the same issue?
Check the version of the browser your using.
Supported Platforms: http://www.asp.net/signalr/overview/getting-started/supported-platforms
There is an issue I found with signalr and azure, I am not sure if that is your situation but it might help to debug the issue. https://github.com/SignalR/SignalR/issues/2780
I'm trying to use React Native's built in Websocket support. I have this code:
var hostname = "192.168.X.XXX";
var port = "4567";
const webSocket = new WebSocket("ws://" + hostname + ":" + port + "/chat");
and I have this:
componentWillMount: function(){
console.log("MOUNTING CHAT COMPONENT");
webSocket.onopen = function(){
console.log("binding to chat room");
bindToChatRoom();
setTimeout(keepWebSocketOpen, 30000);
ws_connected = true;
};
webSocket.onmessage = function (msg) {
this.handleMsg(msg);
};
webSocket.onclose = function () {
console.log("WebSocket connection closed");
ws_connected = false;
};
webSocket.onerror = function (e){
//add some error handling -> DO THIS
console.log(e.message);
};
},
I'm running a local server using sparkjava, with this:
webSocket("/chat", ChatWebSocketHandler.class);
etc. I've tested the server, and I can connect to it (and send messages) both through both my web browser on my laptop AND on my phone with URL 192.168.x.xxx:4567/chat . However, when I run the react native app, I never see the console message "binding to chat room". Am I missing something? How come this websocket never opens?
Just want to note, I also tried connecting here:
ws://echo.websocket.org
which is described here:
http://www.websocket.org/echo.html
This is a known working websocket, so I know it's purely a react native issue...
Turns out that I had the line of code
const webSocket = new WebSocket("ws://echo.websocket.org");
in the wrong place. If you move it into componentWillMount, it works just fine.
I'm trying to implement autobahn 0.9.5 on my SPA project using DurandalJS.
var ab = require('autobahn');
live = new ab.Connection(
{
url: 'ws://localhost:8080',
realm: 'realm1'
});
live.onopen = function(session, details)
{
console.log('Autobahn open successfully!', session);
};
live.onclose = function(reason, details)
{
console.log('Autobahn connection lost', reason + ' - ' + details);
};
live.open();
i received an error on firefox and chrome browser
Firefox:
InvalidAccessError: A parameter or an operation is not supported by the underlying object
websocket.close(code, reason);
Chrome:
WebSocket connection to 'ws://localhost:8080/' failed: Error during WebSocket handshake: Sent non-empty 'Sec-WebSocket-Protocol' header but no response was received
I have no idea what happened..
BEFORE I STARTED WITH - autobahn 0.9.5
I have write simple test on test.html to see if everything setup in backend is correct.
But on this test i currently used autobahn 0.8.2
test.html
<script src="http://autobahn.s3.amazonaws.com/js/autobahn.min.js"></script>
<script>
var conn = new ab.Session(
// Websocket host
'ws://localhost:8080',
// Callback on connection established
function() {
// Once connect, subscribe to channel
conn.subscribe('3', function(topic, data) {
console.log(topic, data);
});
},
// Callback on connection close
function() {
console.warn('WebSocket connection closed');
},
// Additional AB parameters
{'skipSubprotocolCheck': true}
);
</script>
This test working perfectly as what i need, but after I try to implement it inside real project, I can't make autobahn 0.8.2 loaded using requireJS, It keep give me an error ab not defined.
I don't really understand what is happening, according of autobahn getting started, it should work.
and here is how I define it on main.js (requirejs paths and shim config)
requirejs.config({
paths: {
'autobahn' : 'https://autobahn.s3.amazonaws.com/autobahnjs/latest/autobahn.min',
'when' : 'https://cdnjs.cloudflare.com/ajax/libs/when/2.7.1/when'
},
shim: {
'autobahn': {
deps: ['when']
}
}
});
Hopefully somebody can help me, I really love to make it working !
Any help will be greatly appreciated!
Thanks
Probably late, but for further reference.
This is probably not a complete answer to SO question.
First of all, everything should be written either for AutobahnJS v0.8.2 (which supports WAMPv1) or for AutobahnJS v0.9.5 (WAMPv2).
Check API documentation.
WAMP v1
AutobahnJS v0.8.2 API - http://autobahn.ws/js/reference_wampv1.html
it loads from http://autobahn.s3.amazonaws.com/js/autobahn.js
global variable for autobahn is ab
connecting with var conn = new ab.Session(wuri, onOpenCallback, onCloseCallback, options);
WAMP v2
AutobahnJS v0.9.5 API - http://autobahn.ws/js/reference.html
it loads from https://autobahn.s3.amazonaws.com/autobahnjs/latest/autobahn.min.jgz
global variable for autobahn is autobahn
connecting with new autobahn.Connection({url: wuri, realm: yourRealm});