Websocket fails after implementing CloudFlare

I have implemented Cloudflare on a live website, the website has a socket server that’s setup with socket.io and express, everything were working fine before implementing Cloudflare

Currently I’m using port: 2053 which i’ve allowed access to through Laravel forge
enter image description here

socket.js

var app = require('express')();
const fs = require('fs');

var server = require('https').createServer({
    key: fs.readFileSync('/etc/nginx/ssl/mywebsite.com/1234/server.key'),
    cert: fs.readFileSync('/etc/nginx/ssl/mywebsite.com/1234/server.crt'),
}, app);

var io = require('socket.io')(server, {
        cors: {
            origin: function(origin, fn) {
                if (origin === "http://mywebsite.test" || origin === "https://mywebsite.com") {
                    return fn(null, origin);
                }
                
                return fn('Error Invalid domain');
            },
            methods: ['GET', 'POST'],
            'reconnect': true
        },
    });
    
var Redis = require('ioredis');
var redis = new Redis();

redis.subscribe('asset-channel', () => {
    console.log('asset-channel: started');
});

redis.on('message', function(channel, message) {
    var message = JSON.parse(message);
    io.to(message.data.id).emit(channel + ':' +message.event + ':'+ message.data.id, message.data);
});

io.on("connection", (socket) => {
    socket.on("join:", (data) => {
        socket.join(data.id);
    });

    socket.on("leave:", (data) => {
        socket.leave(data.id);
    });
  });

server.listen(2053, () => { 
    console.log('Server is running!');
});

app.js

if (! window.hasOwnProperty('io')) {
    // if (
    //     window.origin === "http://mywebsite.test" ||
    //     window.origin === "https://mywebsite.com" ||
    //     window.origin == "https://mywebsite.test"
    // ) {
        window.io = io.connect(`${window.origin}:2053`);
        window.io.on('connection');
    // }
}

As mentioned before everything were working fine before implementing Cloudflare and i have tried to read some different documentation like:

I found many different problems similar online, and tried several solutions but nothing seem to make the socket connection work

Tried to allow all cors like so:

var io = require('socket.io')(server, {
        cors: {
            origin: "*",
            methods: ['GET', 'POST'],
            'reconnect': true
        },
    });

Didn’t work either, tried configure some stuff in nginx which didn’t work either

Error
Access to XMLHttpRequest at ‘https://mywebsite.com:2053/socket.io/?EIO=4&transport=polling&t=NurmHmi’ from origin ‘https://mywebsite.com’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

I think i might have to configure something in the Cloudflare dashboard, i just dont know what and my googling skills could not take me to the finish line this time around.

Im not too experienced with sockets so it would be awesome if there are some skilled socket expert who have had this issue before who can guide me in the correct direction? :slight_smile:

Just to rule that out: did you activate the “WebSocket” option under https://dash.cloudflare.com/?to=/:account/:zone/network ?

Hi M4rt1n, yes that I have activated

This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.