feathersjs -> socketio https request not working

Question

I have an application made in featherjs which I would like to run with https. I have gotten that working. I did that by changing the 'index.js' file to look like this:

const fs = require('fs');
const https = require('https');
const app = require('./app');
const port = app.get('port');
const host = app.get('host');
//const server = app.listen(port);
const server = https.createServer({
    key: fs.readFileSync('./certs/aex007.key'),
    cert: fs.readFileSync('./certs/aex007.crt')
}, app).listen(port, function(){
    console.log("Mfp Backend started: https://" + host + ":" + port);
});

As soon as I now go to e.g. 'https://127.0.0.1/a_service_name' in postman, I get a result after accepting the certificate. When I go to the address in a browser it also give result, the certificate indication is 'red' for it's selfsigned.

So my problem is the following. When I go to 'http://127.0.01' in a browser, in stead of the 'index.html' file I get nothing of my 'socket' information, only a blank page. I get the following error in the console

info: (404) Route: /socket.io/?EIO=3&transport=polling&t=LwydYAw - Page not found

Then 'index.html' file I'm using is currently containing this:

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.3/socket.io.js"></script>
<script type="text/javascript" src="//cdn.rawgit.com/feathersjs/feathers-client/v1.1.0/dist/feathers.js"></script>
<script type="text/javascript">
    var socket = io('https://127.0.0.1:3001');
    var client = feathers()
        .configure(feathers.hooks())
        .configure(feathers.socketio(socket));
    var todoService = client.service('/some_service');

    todoService.on('created', function(todo) {
        alert('created');
        console.log('Someone created a todo', todo);
    });

</script>

Can someone explain to me what to do to get the alert message?

Edit 2017/09/27 I found on the internet that socket.io is configured like

var https = require('https'),     
    fs =    require('fs');        

var options = {
    key:    fs.readFileSync('ssl/server.key'),
    cert:   fs.readFileSync('ssl/server.crt'),
    ca:     fs.readFileSync('ssl/ca.crt')
};
var app = https.createServer(options);
io = require('socket.io').listen(app);     //socket.io server listens to https connections
app.listen(8895, "0.0.0.0");

However the require of feathers-socket.io is in the app.js not the index.js. I wonder if I can move that?

Answer 1

As daffl pointed out on the feathers slack channel here; check out the documentation which requires in feathers-socketio explicitly before calling configure on the app, in addition to the https portion of the docs. Putting those two together, I would do something like this (untested):

const feathers = require('feathers');
const socketio = require('feathers-socketio');
const fs = require('fs');
const https = require('https');


const app = feathers();
app.configure(socketio());

const opts = {
  key: fs.readFileSync('privatekey.pem'),
  cert: fs.readFileSync('certificate.pem')
};

const server = https.createServer(opts, app).listen(443);

// magic sauce! Socket w/ ssl
app.setup(server);

The structure of your app.js and index.js is totally up to you. You can do all of the above in a single file as shown, or split out the https/fs requires into index.js, and configuring the app into app.js - I would recommend this approach because it will allow you to change the (usually smaller) index.js file if you every decide to use a reverse proxy like nginx to handle ssl instead of node.