Варианты решения ошибки WebSocket connection to … failed: Invalid frame header?

Question

[roflanius]

Сокеты работают на localhost'е, но когда я переношу код на сервер, постоянно выдает ошибки независимо от того, что я делаю.

Nginx config файл:

server {
    server_name example.com;

    location / {
        proxy_pass http://localhost:3000;
    }

    location /peerjs {
        proxy_pass http://localhost:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "Upgrade";
    }

    location /socket.io/ {
        proxy_set_header Host $host;
        proxy_pass http://localhost:3000;

        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "Upgrade";
    }

    listen 443 ssl;


    ssl_certificate ...; # managed by Certbot
    ssl_certificate_key ...; # managed by Certbot
}

Server.js файл:

const express = require('express');
const app = express();
const http = require('http');
const server = http.createServer(app);
const { Server } = require("socket.io");

const io = new Server(server, {
    allowEIO3: true,
    cors: {
        origin: "*"
    }
});

server.listen(3000);

Клиент:

<script src="/socket.io/socket.io.js"></script>
<script>
const socket = io();
</script>

Что я пытался:

• Менять параметры в io() на http/https, домен, wss и т.д.
  
• Перенастраивать nginx конфиг разными способами
  
• Перенастраивать CORS
  

Примечания:

• https://example.com/socket.io/... работает
  
• curl "https://example.com/socket.io/?EIO=4&transport=polling" выдает:
  

0{"sid":"...","upgrades":["websocket"],"pingInterval":25000,"pingTimeout":20000,"maxPayload":1000000}
curl "https://example.com/socket.io/?EIO=4&transport=web..." выдает:
{"code":3,"message":"Bad request"}


Пока что ничего не помогло

Comments

[Модератор]

Не надо ставить как можно больше тэгов. Лучше оставить один, но конкретный, с которым проблема.
См.п.3.1 Регламента. Также обратите внимание на п.3.6

[szQocks]

попробуй сменить location https://stackoverflow.com/questions/29043879/socke...

и в настройки на сервер добавь транспорт

const io = new Server(server, {
    transports: ["polling", "websocket"],
    cors: {
        origin: "*"
    }
});

[roflanius]

szQocks, тоже самое

[szQocks]

roflanius, попробуй ещё добавить url на клиенте, по умолчанию я хз какой он там, наверное localhost

const socket = io(wss://example.com);

[szQocks]

roflanius, Если не сработает ,попробуй установить версию 4.5.4, я тоже много намучался с этой шляпой, щас только на этой версии сижу

мой код на сервер

const io = new Server(server, {
  transports: ["polling", "websocket"],
  cors: {
    origin: process.env.CLIENT_URL,
    methods: ["GET", "POST"],
    credentials: false,
  }
});

на клиенте

io(process.env.NEXT_PUBLIC_SOCKET_URL, {
        withCredentials: false,
        reconnectionAttempts: 5,
    })

в nginx location у меня почти такой же который скинул по ссылке выше, со stackoverflow

[roflanius]

szQocks, не работает.
пробовал и с

location ~* \.io {
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_set_header Host $http_host;
      proxy_set_header X-NginX-Proxy false;

      proxy_pass http://localhost:3000;
      proxy_redirect off;

      proxy_http_version 1.1;
      proxy_set_header Upgrade $http_upgrade;
      proxy_set_header Connection "upgrade";
    }

и

location ^~ /socket {
            proxy_pass http://localhost:3000;
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection 'upgrade';
            proxy_set_header Host $host;
            proxy_cache_bypass $http_upgrade;
}

[szQocks]

roflanius, Кстати ответ

0{"sid":"Lbo5JLzTotvW3g2LAAAA","upgrades":["websocket"],"pingInterval":25000,"pingTimeout":5000}

возвращается в том слуае если ошибка cors, попробуй заменить за место "*", просто сделать true

const io = new Server(server, {
    transports: ["polling", "websocket"],
    cors: {
        origin: true
    }
});

[roflanius]

szQocks, Даже твой код на версии 4.5.4 не сработал =))
origin = true тоже, такая же ошибка постоянно

[szQocks]

roflanius, какая ? их там в вопросе 3

[szQocks]

roflanius, если ошибка

WebSocket connection to … failed: Invalid frame header

то есть на стеке пишут что просто твой сокет на клиенте - пытается юзать сервер ссокет, а в документации сказано что по умолчанию он подключит клиентский

предлагаю отдельно подключить/установить сокет для клиента

[roflanius]

szQocks, WebSocket connection to 'wss://example.com/socket.io/?EIO=4&transport=webso......' failed: Invalid frame header

[roflanius]

szQocks, не совсем понимаю что ты имеешь ввиду под отделным сокетом для клиента.Я попробовал вместо
<script src="/socket.io/socket.io.js"></script>

вставить

<script src="https://cdn.socket.io/4.5.4/socket.io.min.js"></script>

не работае. Но я сомневаюсь что правильно тебя понял

[roflanius]

или ты имеешь ввиду npm socket.io-client

[szQocks]

roflanius, покажи свой окончательный код, клиент и сервер

[roflanius]

szQocks,
nginx

server {
    server_name example.com;

    location / {
        proxy_pass http://localhost:3000;
    }

    location /peerjs {
        proxy_pass http://localhost:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "Upgrade";
    }

    location ~* \.io {
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $http_host;
        proxy_set_header X-NginX-Proxy false;

        proxy_pass http://localhost:3000;
        proxy_redirect off;

        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade"; 
}

    listen 443 ssl;


    ssl_certificate ...; # managed by Certbot
    ssl_certificate_key ...; # managed by Certbot
}

server

const express = require('express');
const app = express();
const http = require('http');
const server = http.createServer(app);
const { Server } = require("socket.io");

const io = new Server(server, {
    transports: ["polling", "websocket"],
    cors: {
      origin: true,
      methods: ["GET", "POST"],
      credentials: false,
    }
});

server.listen(3000);

client

<script src="https://cdn.socket.io/4.5.4/socket.io.min.js"></script>

<script>
const socket = io("wss://example.com", {
    withCredentials: false,
    reconnectionAttempts: 5,
})
</script>

[szQocks]

roflanius, если на сервере у тебя такая же версию сокетов, то я просто хз почему оно не работает, всё должно работать... хм

ну может Nginx не перезагружал ?

[roflanius]

szQocks, и через restart, и через stop/start, и фаервол выключил..

[szQocks]

roflanius, попорбуй поменять порт на сервер сокетов и в nginx

[szQocks]

roflanius, тут типа есть решение проблемы, и чувак пишет что он якобы 2жды инициазилизровал сервер, но глядя на твой код сервера у сокетов, я не вижу что бы оно дваджы как-то отрабатывало, больше увы идей нет

[roflanius]

szQocks, ты имеешь ввиду отдельно от сервера express?

const io = ...;
io.listen(3099);

location ~* \.io {
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $http_host;
        proxy_set_header X-NginX-Proxy false;

        proxy_pass http://localhost:3099;
        proxy_redirect off;

        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
     }

const socket = io("wss://example.com:3099");

так?

[szQocks]

roflanius, да, отдельно от основного сервера, т.к твой сокет сервер это же отдельный сервер

[roflanius]

GET https://example.com:3099/socket.io/?EIO=4&transpor...... net::ERR_SSL_PROTOCOL_ERROR

[roflanius]

szQocks, щас попробую

[roflanius]

szQocks, я первый раз работаю с сервером, не особо разбираюсь. Мне же нужно прописывать listen 3099 ssl, или на какой-то другой порт?

server {
    server_name example.com;
    listen 3099 ssl;


    location ~* \.io {
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $http_host;
        proxy_set_header X-NginX-Proxy false;

        proxy_pass http://localhost:3099;
        proxy_redirect off;

        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
    }

    ssl_certificate ...; # managed by Certbot
    ssl_certificate_key ...; # managed by Certbot
}

[szQocks]

roflanius,

server {
    server_name example.com;

    location / {
        proxy_pass http://localhost:3000;
    }

    location /peerjs {
        proxy_pass http://localhost:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "Upgrade";
    }

    location ~* \.io {
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $http_host;
        proxy_set_header X-NginX-Proxy false;

        proxy_pass http://localhost:3099;
        proxy_redirect off;

        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade"; 
}

    listen 443 ssl;


    ssl_certificate ...; # managed by Certbot
    ssl_certificate_key ...; # managed by Certbot
}

[szQocks]

roflanius, кароче как я понял теперь осталось решить ошибку с ssl, если там в блоке с ssl location то поменяй там тоже

[roflanius]

szQocks, это вроде тоже самое что у меня изначально было

[szQocks]

roflanius, в твоём приложении открытых портов должно быть три, 80, 443 и порт для ssh всё, все остальные порты для внешнего мира должны быть закрытыми

и через nginx проксируешь все запросы, например запрос идёт на example.com ты по location определяешь куда отправлять запрос, на основной сервер или на сервер с сокетами

так же прочитай про в nginx про ip_hash

[roflanius]

szQocks, понял. Но сокет запрос все равно не пускает и выдает ERR_SSL_PROTOCOL_ERROR

[szQocks]

roflanius, ну же я говорю, осталось решить проблему с ssl, когда ты устанавливал ssl, у тебя location были другие, щас ты location поменял же , значит в блоке с ssl там тоже надо поменять, либо переустанови ssl

[roflanius]

szQocks, вроде переустановил ssl, та же ssl ошибка

[roflanius]

по идее если оно обновилось я могу открыть https://example.com:3099/socket.io/socket.io.js

[roflanius]

но оно открывается ток без порта

[roflanius]

roflanius, а теперь только через порт 3099 открывается, но все еще не на https, только http

[roflanius]

szQocks, я ведь должен просто прописать "sudo certbot certonly --nginx", и оно само настроит?

[szQocks]

roflanius, нет) удали его и поставь заново, загуглишь как это сделать, - его снести и поставить новый это 5 минут

[roflanius]

szQocks, Приплыл... An unexpected error occurred:
There were too many requests of a given type :: Error creating new order :: too many certificates (5) already issued for this exact set of domains in the last 168 hours. Попробую на сабдомен сделать

[szQocks]

roflanius, попробуй без ssl, протестить, работает ли, тогда за место wss сделай ws, потом если что новый вопрос задавай, кароче как я понял проблема была в том что ты на одном порту как-то запустил там и основной сервер и сокет сервер или же просто проксировал не так, а может и то и другое, думаю с этим вопросом уже я достаточно просидел)

[roflanius]

szQocks, оно выдает ошибку что нельзя на https странице запрашивать незащищенный ws сокет, но спасибо, дальше сам разбираться буду. Удачи

[roflanius]

szQocks, сокеты, кстати, заработали если я на http и вызываю ws, так что да, проблема только в ssl