Node.js, socket, io and HTTPS

Question

I'm making a whiteboard app:

var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);

io.on('connect', function(socket) {
  socket.on('join', function(data) {
    socket.join(data.room);
    console.log(data.room);
  });

  socket.on('drawing', function(data) {
    console.log(data);
    io.sockets.in(data.room).emit("senddraw", data);
  });

  socket.on('writetext', function(data) {
    console.log(data);
    io.sockets.in(data.room).emit("senddraw", data);
  });

  socket.on('action', function(data) {
    console.log(data);
    io.sockets.in(data.room).emit("action", data);
  });

});

http.listen(8080, function() {
  console.log('listening on localhost:8080');
});

If I run this node script on my server, I can connect via my localhost copy of my webpage. However, I canon't connect from the copy hosted on my server as it's served over HTTPS. I get the error:

polling-xhr.js:264 Mixed Content: The page at: ***** was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://...*:8080/socket.io/?EIO=3&transport=polling&t=Lu2NoGL'. This request has been blocked; the content must be served over HTTPS.

How can I make resolve this without disabling ssl on my server?

Client has something equivalent to:

  //var socket = io.connect("http://localhost:8080");
  var socket = io.connect("http://**.***.***.**:8080");

  socket.on("connect", function(data) {
    socket.emit("join", {room : "@roomid"});
  });

On drawing events:

socket.emit("drawing", {x0 : x0, y0 : y0, x1 : x1, y1: y1, current : current, room : "@roomid"});

Which are picked on by:

socket.on("drawing", function(data) {do blah});

Answer 1

You need to change socket.io client code in your webpage's javascript by connecting to / instead of http://...*:8080:

var socket = io.connect('/');

Answer 2

I solved this problem in my notifications implementation using socket.io

My socket.io server(node) was on 8001 port

my application was using ssl and was served over https

Broad steps:

1. using reverse proxy in my virtualhost apache configurations to point all socket.io requests to my node server at 8001
2. sending requests from socket.io client to host = wss://domain.com:443/
3. using same version i.e. 4.0.0 of socket.io client and socket.io server

Reverse proxy configuration that I used:

        RewriteEngine On
        RewriteCond %{REQUEST_URI}  ^/socket.io            [NC]
        RewriteCond %{QUERY_STRING} transport=websocket    [NC]
        RewriteRule /(.*)           ws://localhost:8001/$1 [P,L]

        ProxyPass /socket.io http://localhost:8001/socket.io connectiontimeout=600 timeout=600
        ProxyPassReverse /socket.io http://localhost:8001/socket.io

use this guide: https://www.serverlab.ca/tutorials/linux/web-servers-linux/how-to-reverse-proxy-websockets-with-apache-2-4/

socket.io client implementation:

function createSocket(host) {
        return io(host);
    }
    function init() {
        var host = "wss://mydomain.com:443/";
        try {
            socket = createSocket(host);
            console.log('3');

            socket.on("connect", () => {
                console.log('In Connect');
            });

socket.io server implementation

const app = require("express")();
const server = require("http").createServer(app);

const io = require("socket.io")(server, {
cors: {
origin: '*',
}, 'pingTimeout': 180000, 'pingInterval': 25000,
});

io.on("connection", (socket) => {
  console.log("Connected!");
  socket.on("message", data => {
              console.log("in message with data: "+data.topic);
              pubClient.publish('notification', data);
            });
});

server.listen(8001);