Need help with socket io | Next.js | Page 1

runic basalt Mar 14, 2023, 6:37 PM

#

you need extra config to make socketio work behind nginx's proxy

#

https://socket.io/docs/v3/reverse-proxy/#nginx

Behind a reverse proxy | Socket.IO

You will find below the configuration needed for deploying a Socket.IO server behind a reverse-proxy solution, such as:

visual peak Mar 15, 2023, 12:02 PM

#

Try this
https://socket.io/docs/v3/handling-cors/

Handling CORS | Socket.IO

Configuration

unreal pier Mar 15, 2023, 9:25 PM

#

It is a nginx problem but I am not quite sure why it is not working

#

Can I dm someone personally to provide the exact configuration and socket connection? I do not want to share them at a forum for security reasons.

unreal pier Mar 15, 2023, 10:46 PM

#

solved it

solid adder Mar 15, 2023, 11:10 PM

#

unreal pier solved it

how did you solve it? it'll be great for others that run into the same issue

unreal pier Mar 15, 2023, 11:13 PM

#

this helped a lot:
https://serverfault.com/questions/1054314/nginx-what-is-the-right-configuration-for-socket-io

Server Fault

Nginx what is the right configuration for Socket.io?

If I have a node express server running on port 5003
import express from 'express'
import { createServer } from 'http'
import { Server } from 'socket.io'

const app = express()
const prod = process...

unreal pier Mar 16, 2023, 4:57 PM

#

ok so i didn't solve it

#

the client on the server was somehow connecting to my webosocket server that I hosted locally

unreal pier Mar 16, 2023, 8:07 PM

#

If anyone could help it would be much appreciated

#

I am sending over parts of the code

#

//Server        
const port = 8080;
const server = require("http").createServer();
const io = require("socket.io")(server, {
        cors: {
                origin: "http://localhost:3000",
                methods: ["GET", "POST"],
        }
});

server.listen(port, "127.0.0.1", () => {
        console.log("Socket.IO server running on port", port);
        console.log(server.address())
});

#

Socket.IO server running on port 8080
{ address: '127.0.0.1', family: 'IPv4', port: 8080 }

#

//Socket handler - client        
import { io } from "socket.io-client";
const socket = io("http://127.0.0.1:8080", { autoConnect: false,  path: '/wsapp/'});

socket.onAny((eventName, ...args) => {
  console.log(eventName, args);
});

export default socket;

#

#Nginx configuration
server {
        server_name  domain.com www.domain.com;

       #include /etc/nginx/snippets/letsencrypt-acme-challenge.conf;

location / {
                root /usr/share/nginx/html;
                # reverse proxy for next server
                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;
}
location /wsapp/ {
    proxy_pass http://127.0.0.1:8080;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "Upgrade";
    proxy_set_header Host $host;
    proxy_hide_header 'Access-Control-Allow-Origin';
}
server {
    if ($host = domain.com) {
        return 301 https://$host$request_uri;
    } # managed by Certbot
    if ($host = www.domain.com) {
        return 301 https://$host$request_uri;
    } # managed by Certbot
        listen       80;
        listen       [::]:80;
        server_name  domain.com www.domain.com;
    return 404; # managed by Certbot
}```

#

Error:
Multi-origin request blocked: The same-origin policy does not allow reading the remote resource at http://127.0.0.1:8080/wsapp/?EIO=4&transport=polling&t=ORi3jJP. (Reason: CORS request was not successful). Status code: (null).```

#

I even tried changing the transport method to websocket but it produced an error saying it can't connect to the websocket

unreal pier Mar 16, 2023, 9:23 PM

#

ChatGPT helped me and it worked

#Need help with socket io