Mixed Content error when accessing WebSocket server hosted in a different port

Question

I've set up an express server with node.js on port 80 (http) and 443 (https). Separate from that server, I've set up a websocket server in a separate port, 8000:

var WebSocketServer = require('ws').Server;
var wss = new WebSocketServer({port: 8000});

The site served by express must connect to those services to work. The issue is: accessing my site through http works fine, but, from https, I get:

index.js:100 Mixed Content: The page at 'https://example.com/' was 
loaded over HTTPS,  but attempted to connect to the insecure 
WebSocket endpoint 'ws://my_sites_ip:8000/'. This request has been 
blocked; this endpoint must be available over WSS.

Why I'm getting this error? Has this anything to do with the fact the websocket server is in a different process/port than the http server? How can I get it to work?

Answer 1

The error is telling you what to do. Use websocket with wss when using https

Look at this post html5 Websocket with SSL The WebSocket connection starts its life with an HTTP or HTTPS handshake. When the page is accessed through HTTP, you can use WS or WSS (WebSocket secure: WS over TLS) . However, when your page is loaded through HTTPS, you can only use WSS - browsers don't allow to "downgrade" security.