Socket.io with LetsEncrypt, Redis, Laravel Forge & Digital Ocean

Question

I have implemented socket.io successfully on my MAMP server to build a chat application, when I push it to the production server (digital ocean, laravel forge) I am getting an error:

I set up daemons in forge based on this article and followed install steps based on this

My socket.js file is this:

var  server = require('http').Server();

var io = require('socket.io')(server);

var Redis = require('ioredis');
var redis = new Redis();

redis.subscribe('test-channel');

redis.on('message', function(channel, message, username) {
    console.log(channel + ":" + message);
    message = JSON.parse(message);

    io.emit(channel + ":" + message.event, message.data); // test-channel:nameOfEvent (UserSignedUp)
});

server.listen(3000);

My blade file:

<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.7.3/socket.io.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/0.12.15/vue.min.js"></script>
<script>
//var socket = io('{{ Request::ip() }}:3000');
var socket = io('server.ip.address:3000'); //initalize socket

socket.on('test-channel:App\\Events\\NewChatMessage', function(message){
    //console.log(message.messages);
    if(message.messages.company_id == {{ Auth::user()->company_id }}){
        if(message.messages.user_id != {{ Auth::user()->id }})
        {
            var html = '<div class="direct-chat-msg"><div class="direct-chat-info clearfix"><span class="direct-chat-name pull-left">' + message.username + '</span><span class="direct-chat-timestamp pull-right">time</span></div><!-- /.direct-chat-info --><div class="other avatar direct-chat-img">' + message.avatar + '</div><!-- /.direct-chat-img --><div class="direct-chat-text">' + message.messages.body + '</div><!-- /.direct-chat-text --></div><!-- /.direct-chat-msg -->';
        } else {
            var html = '<div class="direct-chat-msg right"><div class="direct-chat-info clearfix"><span class="direct-chat-name pull-right">' + message.username + '</span><span class="direct-chat-timestamp pull-left">time</span></div><!-- /.direct-chat-info --><div class="avatar direct-chat-img">' + message.avatar + '</div><!-- /.direct-chat-img --><div class="direct-chat-text">' + message.messages.body + '</div><!-- /.direct-chat-text --></div><!-- /.direct-chat-msg --></div><!--/.direct-chat-messages-->';
        }
        $('.direct-chat-messages').append(html);
        $(".direct-chat-messages").animate({ scrollTop: $('.direct-chat-messages').prop("scrollHeight")}, 1000);
    }
    /*for (var i = 0; i < message.threads.length; i++) {
        var counter = message.threads[i];
        console.log(counter.subject);
    }*/
  //this.messages.push(message);
}); //listen for chat.message event and update messages

When I submit a chat message on the production environment I see it in terminal because of the socket.js console.log, its just not hitting the front end. If I were to bet (and probably lose that bet) then it is because I am using https://example.com instead of http://example.com . If that sounds like it could be the problem how can I make sure socket.js uses https rather than http?

Laravel logs show both redis and socket.io are running fine.

UPDATE Here are the logs printed in chrome which seems like a client side issue based on my limited knowledge in case it helps someone see what is going on.

socket.io.min.js:1 socket.io-client:url parse https://example.com:3000 +0ms
socket.io.min.js:1 socket.io-client new io instance for https://example.com:3000 +3ms
socket.io.min.js:1 socket.io-client:manager readyState closed +2ms
socket.io.min.js:1 socket.io-client:manager opening https://example.com:3000 +0ms
socket.io.min.js:1 engine.io-client:socket creating transport "polling" +1ms
socket.io.min.js:1 engine.io-client:polling polling +1ms
socket.io.min.js:1 engine.io-client:polling-xhr xhr poll +0ms
socket.io.min.js:1 engine.io-client:polling-xhr xhr open GET: https://example.com:3000/socket.io/?EIO=3&transport=polling&t=LjBd72n +2ms
socket.io.min.js:1 engine.io-client:polling-xhr xhr data null +0ms
socket.io.min.js:1 engine.io-client:socket setting transport polling +2ms
socket.io.min.js:1 socket.io-client:manager connect attempt will timeout after 20000 +0ms
socket.io.min.js:1 socket.io-client:manager readyState opening +2ms
messages:217 GET https://example.com/files/designloud-inc/users/ 403 ()
messages:1 GET https://example.com:3000/socket.io/?EIO=3&transport=polling&t=LjBd72n net::ERR_CONNECTION_TIMED_OUT
socket.io.min.js:1 engine.io-client:socket socket error {"type":"TransportError","description":0} +8s
socket.io.min.js:1 socket.io-client:manager connect_error +0ms
socket.io.min.js:1 socket.io-client:manager cleanup +1ms
socket.io.min.js:1 socket.io-client:manager will wait 978ms before reconnect attempt +1ms
socket.io.min.js:1 engine.io-client:socket socket close with reason: "transport error" +0ms
socket.io.min.js:1 engine.io-client:polling transport not open - deferring close +1ms
socket.io.min.js:1 socket.io-client:manager attempting reconnect +981ms
socket.io.min.js:1 socket.io-client:manager readyState closed +0ms
socket.io.min.js:1 socket.io-client:manager opening https://example.com:3000 +0ms
socket.io.min.js:1 engine.io-client:socket creating transport "polling" +1ms
socket.io.min.js:1 engine.io-client:polling polling +1ms
socket.io.min.js:1 engine.io-client:polling-xhr xhr poll +0ms
socket.io.min.js:1 engine.io-client:polling-xhr xhr open GET: https://example.com:3000/socket.io/?EIO=3&transport=polling&t=LjBd9Hj +1ms
socket.io.min.js:1 engine.io-client:polling-xhr xhr data null +0ms
socket.io.min.js:1 engine.io-client:socket setting transport polling +1ms
socket.io.min.js:1 socket.io-client:manager connect attempt will timeout after 20000 +1ms
:3000/socket.io/?EIO=3&transport=polling&t=LjBd9Hj:1 GET https://example.com:3000/socket.io/?EIO=3&transport=polling&t=LjBd9Hj net::ERR_CONNECTION_TIMED_OUT
socket.io.min.js:1 engine.io-client:socket socket error {"type":"TransportError","description":0} +8s
socket.io.min.js:1 socket.io-client:manager connect_error +1ms
socket.io.min.js:1 socket.io-client:manager cleanup +0ms
socket.io.min.js:1 socket.io-client:manager reconnect attempt error +1ms
socket.io.min.js:1 socket.io-client:manager will wait 1132ms before reconnect attempt +0ms
socket.io.min.js:1 engine.io-client:socket socket close with reason: "transport error" +1ms
socket.io.min.js:1 engine.io-client:polling transport not open - deferring close +0ms
socket.io.min.js:1 socket.io-client:manager attempting reconnect +1s
socket.io.min.js:1 socket.io-client:manager readyState closed +0ms
socket.io.min.js:1 socket.io-client:manager opening https://example.com:3000 +1ms
socket.io.min.js:1 engine.io-client:socket creating transport "polling" +0ms
socket.io.min.js:1 engine.io-client:polling polling +1ms
socket.io.min.js:1 engine.io-client:polling-xhr xhr poll +0ms
socket.io.min.js:1 engine.io-client:polling-xhr xhr open GET: https://example.com:3000/socket.io/?EIO=3&transport=polling&t=LjBdBXX +1ms
socket.io.min.js:1 engine.io-client:polling-xhr xhr data null +0ms
socket.io.min.js:1 engine.io-client:socket setting transport polling +1ms
socket.io.min.js:1 socket.io-client:manager connect attempt will timeout after 20000 +1ms
:3000/socket.io/?EIO=3&transport=polling&t=LjBdBXX:1 GET https://example.com:3000/socket.io/?EIO=3&transport=polling&t=LjBdBXX net::ERR_CONNECTION_TIMED_OUT
socket.io.min.js:1 engine.io-client:socket socket error {"type":"TransportError","description":0} +8s
socket.io.min.js:1 socket.io-client:manager connect_error +1ms
socket.io.min.js:1 socket.io-client:manager cleanup +0ms
socket.io.min.js:1 socket.io-client:manager reconnect attempt error +1ms
socket.io.min.js:1 socket.io-client:manager will wait 5000ms before reconnect attempt +0ms
socket.io.min.js:1 engine.io-client:socket socket close with reason: "transport error" +1ms
socket.io.min.js:1 engine.io-client:polling transport not open - deferring close +0ms
socket.io.min.js:1 socket.io-client:manager attempting reconnect +5s
socket.io.min.js:1 socket.io-client:manager readyState closed +1ms
socket.io.min.js:1 socket.io-client:manager opening https://example.com:3000 +0ms
socket.io.min.js:1 engine.io-client:socket creating transport "polling" +1ms
socket.io.min.js:1 engine.io-client:polling polling +0ms
socket.io.min.js:1 engine.io-client:polling-xhr xhr poll +1ms
socket.io.min.js:1 engine.io-client:polling-xhr xhr open GET: https://example.com:3000/socket.io/?EIO=3&transport=polling&t=LjBdEkE +0ms
socket.io.min.js:1 engine.io-client:polling-xhr xhr data null +1ms
socket.io.min.js:1 engine.io-client:socket setting transport polling +1ms
socket.io.min.js:1 socket.io-client:manager connect attempt will timeout after 20000 +0ms
:3000/socket.io/?EIO=3&transport=polling&t=LjBdEkE:1 GET https://example.com:3000/socket.io/?EIO=3&transport=polling&t=LjBdEkE net::ERR_CONNECTION_TIMED_OUT
socket.io.min.js:1 engine.io-client:socket socket error {"type":"TransportError","description":0} +5s
socket.io.min.js:1 socket.io-client:manager connect_error +1ms
socket.io.min.js:1 socket.io-client:manager cleanup +0ms
socket.io.min.js:1 socket.io-client:manager reconnect attempt error +1ms
socket.io.min.js:1 socket.io-client:manager will wait 5000ms before reconnect attempt +0ms
socket.io.min.js:1 engine.io-client:socket socket close with reason: "transport error" +1ms
socket.io.min.js:1 engine.io-client:polling transport not open - deferring close +0ms
socket.io.min.js:1 socket.io-client:manager attempting reconnect +5s
socket.io.min.js:1 socket.io-client:manager readyState closed +1ms
socket.io.min.js:1 socket.io-client:manager opening https://example.com:3000 +0ms
socket.io.min.js:1 engine.io-client:socket creating transport "polling" +0ms
socket.io.min.js:1 engine.io-client:polling polling +1ms
socket.io.min.js:1 engine.io-client:polling-xhr xhr poll +0ms
socket.io.min.js:1 engine.io-client:polling-xhr xhr open GET: https://example.com:3000/socket.io/?EIO=3&transport=polling&t=LjBdH5N +1ms
socket.io.min.js:1 engine.io-client:polling-xhr xhr data null +0ms
socket.io.min.js:1 engine.io-client:socket setting transport polling +1ms
socket.io.min.js:1 socket.io-client:manager connect attempt will timeout after 20000 +1ms
:3000/socket.io/?EIO=3&transport=polling&t=LjBdH5N:1 GET https://example.com:3000/socket.io/?EIO=3&transport=polling&t=LjBdH5N net::ERR_CONNECTION_TIMED_OUT
socket.io.min.js:1 engine.io-client:socket socket error {"type":"TransportError","description":0} +4s
socket.io.min.js:1 socket.io-client:manager connect_error +1ms
socket.io.min.js:1 socket.io-client:manager cleanup +0ms
socket.io.min.js:1 socket.io-client:manager reconnect attempt error +1ms
socket.io.min.js:1 socket.io-client:manager will wait 5000ms before reconnect attempt +0ms
socket.io.min.js:1 engine.io-client:socket socket close with reason: "transport error" +1ms
socket.io.min.js:1 engine.io-client:polling transport not open - deferring close +0ms
socket.io.min.js:1 socket.io-client:manager attempting reconnect +5s
socket.io.min.js:1 socket.io-client:manager readyState closed +1ms
socket.io.min.js:1 socket.io-client:manager opening https://example.com:3000 +0ms
socket.io.min.js:1 engine.io-client:socket creating transport "polling" +1ms
socket.io.min.js:1 engine.io-client:polling polling +0ms
socket.io.min.js:1 engine.io-client:polling-xhr xhr poll +1ms
socket.io.min.js:1 engine.io-client:polling-xhr xhr open GET: https://example.com:3000/socket.io/?EIO=3&transport=polling&t=LjBdJAO +0ms
socket.io.min.js:1 engine.io-client:polling-xhr xhr data null +1ms
socket.io.min.js:1 engine.io-client:socket setting transport polling +1ms
socket.io.min.js:1 socket.io-client:manager connect attempt will timeout after 20000 +0ms

Answer 1

We need to load a certificate to enable socket.io over https

Make the folder named “ssl” on the public folder and copy the following files

SSLCertificateFile: /your_ssl_dir/yourcertificate.crt
SSLCertificateKeyFile: /your_ssl_dir/website_ssl.key
SSLCertificateChainFile:  /your_ssl_dir/yourchain.crt
to ssl

These files are needed by socket.io to sign the certificates .

Then do the following modification

var app = require('express')();
var fs =    require('fs'); 
var options = {
    key:    fs.readFileSync('ssl/website_ssl.key'),
    cert:   fs.readFileSync('ssl/yourcertificate.crt'),
    ca:     fs.readFileSync('ssl/yourchain.crt')
};
var server = require('https').Server(options,app);
var Redis = require('ioredis');
var io = require('socket.io')(server);