实施 CloudFlare 后 Websocket 失败答案

【问题标题】：Websocket fails after implementing CloudFlare实施 CloudFlare 后 Websocket 失败
【发布时间】：2022-01-08 05:11:50
【问题描述】：

我在一个实时网站上实现了 cloudflare，该网站有一个使用 socket.io 和 express 设置的套接字服务器，在实现 cloudflare 之前一切正常

目前我正在使用端口：2053，我允许通过 Laravel forge 访问该端口

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');
    // }
}

如前所述，在实施 cloudflare 之前一切正常，我尝试阅读一些不同的文档，例如：

我在网上发现了许多类似的不同问题，并尝试了几种解决方案，但似乎没有使套接字连接工作

试图允许所有这样的cors：

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

也不行，尝试在nginx中配置一些东西也行不通

错误从源“https://mywebsite.com”访问“https://mywebsite.com:2053/socket.io/?EIO=4&transport=polling&t=NurmHmi”的 XMLHttpRequest 已被 CORS 策略阻止：没有“访问权限-请求的资源上存在 Control-Allow-Origin' 标头。

我想我可能需要在 cloudflare 仪表板中配置一些东西，我只是不知道什么，而且我的谷歌搜索技能这次无法将我带到终点线。

我对套接字不是太有经验，所以如果有一些熟练的套接字专家在遇到这个问题之前可以指导我正确的方向，那就太棒了？ :)

【问题讨论】：

标签： express sockets socket.io cors cloudflare

【解决方案1】：

我通过将其添加到 app.js 中使其运行：

window.io = io.connect(`${window.origin}:2053`, { transports: ["websocket"] });

显然它会尝试使用轮询而不是 websocket。

【讨论】：