Socket.io - High Frequency of Requests
Unanswered
Japanese flying squid posted this in #help-forum

Japanese flying squidOP
I've custom server.js with socket.io. It was working normally, but I think I god DDoS attack. I've changed server from render to VPS hostinger. Also added cloudflare. I made website work and stay alive but I can't help socket.io. I am getting thousands of requests on socket.io every minute. It doesn't stop.
I get this error: GET https://www.kisa.ge/socket.io?EIO=4&transport=polling&t=PGv5Sxa net::ERR_TOO_MANY_REDIRECTS
Status Code: 308 Permanent Redirect
I get this error: GET https://www.kisa.ge/socket.io?EIO=4&transport=polling&t=PGv5Sxa net::ERR_TOO_MANY_REDIRECTS
Status Code: 308 Permanent Redirect


148 Replies
first, if u have a vps and nginx, use certbot
then, u dont need a seperate socket.io handler in your nginx config
also, setting up a seperate api with express on a different port for socket.io is highly recommended

@gin also, setting up a seperate api with express on a different port for socket.io is highly recommended

Japanese flying squidOP
Can you help me to do all this stuff?
I am using Certbot already

@Japanese flying squid did you exposed your ports correctly, so your server can handle that request (should be
Also, where did you got these logs from?
ufw
on ubuntu)?Also, where did you got these logs from?

Japanese flying squidOP
I got logs from: sudo tail -f /var/log/nginx/access.log
And PORT is the same, I am using sockets from same next.js custom server, 3000 PORT
I didn’t expose anything manually from VPS

@Japanese flying squid ah ok. Try to search on how to setup a socket connection via your VPS. Then check against what you have done and change it

Japanese flying squidOP
I couldn't find anything helpful online 😦
@B33fb0n3

@Japanese flying squid I am using Certbot already

but your setup is false

@Japanese flying squid I couldn't find anything helpful online 😦

this might help you: https://www.youtube.com/results?search_query=connect+socket.io+with+VPS+server
When you hosting though docker, then you should also set up nginx. The first video (this one: https://www.youtube.com/watch?v=uVTSBsUmB7A) for example clarifies how you need to change your nginx config to be able to use socket.io
When you hosting though docker, then you should also set up nginx. The first video (this one: https://www.youtube.com/watch?v=uVTSBsUmB7A) for example clarifies how you need to change your nginx config to be able to use socket.io

@gin but your setup is false

what is his setup?

i already told him what he has to do
having a custom server with nextjs is very bad
u loose a bunch of critical features

@B33fb0n3 what is his setup?

he is proxying the same port twice

@gin u loose a bunch of critical features

what's for example? When self hosting it, all nextjs features are supported

Japanese flying squidOP
@gin can you help me with setting up different socket.io server on VPS? I've not a lot of experience with VPS


@Japanese flying squid <@759064479521701888> can you help me with setting up different socket.io server on VPS? I've not a lot of experience with VPS

socket.io runs fine on a seperate express or any other node server
also u dont need extra setup for sockets
cause nginx supports it by native
make sure if u use cloudflare to enable wss support
cause sometimes it may be disabled
so socketio will switch to polling which will extremely increase the requests

Japanese flying squidOP
so I've to set upanother socket server with express, run it for examplelocalhost:3001, and connect from Next.js app to localhost:3001 socket server?

i see in your screenshot
@Japanese flying squid can u go inside your networks tab and send me a screenshot of the first init connection socketio makes?
filter by websocket

@gin u mean custom server?

the
Read more: https://nextjs.org/docs/app/building-your-application/configuring/custom-server
Automatic Static Optimization
link, links to the pages router. And also all the content itself is about the pages router. So it isn't relevant for the app routerRead more: https://nextjs.org/docs/app/building-your-application/configuring/custom-server

Japanese flying squidOP
@gin Inside networks, when I filter WS I don;t get any messages

@B33fb0n3 the Automatic Static Optimization link, links to the pages router. And also all the content itself is about the pages router. So it isn't relevant for the app router
Read more: https://nextjs.org/docs/app/building-your-application/configuring/custom-server

yeah i know that but the app docs still links to that page and also it is saying optimizations

Japanese flying squidOP


@Japanese flying squid Click to see attachment

just to make sure. You did this, right: https://nextjs-forum.com/post/1325627467993714769#message-1325743631138689046 <--- click

its just that if u switch for websockets to a serverfull extern server u will have less problems

Japanese flying squidOP
I've nto yet done cloudflare
this my nginx config rn



Japanese flying squidOP
Yes, it's Full encryption rn

@Japanese flying squid this my nginx config rn

ignore that config

Japanese flying squidOP


its faulty rn thats why u getting a 308

Japanese flying squidOP

@gin I will go and set up new repository for express websockets server, correct?

yes
and remove custom server from nextjs
the rest is self explanatory, if u want to use the same endpoint, u can just route a path to a different port in nginx
so everything under yourdomain.com/socket routes to localhost:3001 (your socketio backend)
or u create a subdomain like socket.yourdomain.com, makes the setup easier
this is the only thing to consider when u have a external server, u will profit a lot having a seperate backend
talking from experience

Japanese flying squidOP
I need to make it asap for now

Is it okay?

yes

Japanese flying squidOP

Now just delete server.js from next?

Japanese flying squidOP
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "node .next/standalone/server.js",
"prod_start": "NODE_ENV=production node server.js",
"lint": "next lint",
"deploy": "npm run build && git add . && git commit -m 'deploy' && git push"
},
"dev": "next dev",
"build": "next build",
"start": "node .next/standalone/server.js",
"prod_start": "NODE_ENV=production node server.js",
"lint": "next lint",
"deploy": "npm run build && git add . && git commit -m 'deploy' && git push"
},

your prod_start to next start
dont need node env since start is in production mode

Japanese flying squidOP
from my dockerfile I started server like
# Start the server
CMD ["node", "server.js"]
# Start the server
CMD ["node", "server.js"]
so I should change it "npm" "start"?

yes

Japanese flying squidOP
and insit start script leave : "start": "node .next/standalone/server.js",?
or change to next start
i just remembered on standalone u dont need next start cause it bundles everything

Japanese flying squidOP
"use client";
import { io } from "socket.io-client";
export const socket = io();
what about this?
import { io } from "socket.io-client";
export const socket = io();
what about this?
this is my socket.ts
and then using like this
import { socket } from "./socket";
import { T_SocketEvent } from "./socket.types";
const socketEmit = (event: T_SocketEvent, data: any) => {
socket.emit(event, data);
};
export default socketEmit;
import { socket } from "./socket";
import { T_SocketEvent } from "./socket.types";
const socketEmit = (event: T_SocketEvent, data: any) => {
socket.emit(event, data);
};
export default socketEmit;

@Japanese flying squid "use client";
import { io } from "socket.io-client";
export const socket = io();
what about this?

this a hook i usually use for my apps
import {io} from "socket.io-client";
let socket: ReturnType<typeof io>;
export default function useSocket() {
if (!socket) {
socket = io("https://yourdomain.com", {
path: "/api/socket.io",
});
}
return socket;
}
the important thing is to specify the path
just resuse the same socket instance
so u can just refernce it across your app and u will have the same connection
without creating it everytime

Japanese flying squidOP
"use client";
import { io } from "socket.io-client";
export const socket = io("http://localhost:3077");
import { io } from "socket.io-client";
export const socket = io("http://localhost:3077");
is it okay?
to leave like this?

u can leave it like this yes
just define the path
u will probably have it routed to /socket/socket.io
/socket/ routes to your 3077 and, /scoket.io is created internally
on local u can just have it to localhost:3077/socket.io

Japanese flying squidOP
wait wait Iam confused now

keep what u have
it will work
socket.io-client will use /socketi.io automatically
but on production u need point the path otherwise it will fail

Japanese flying squidOP

So I guess it is now okay for localhost

👍

Japanese flying squidOP
Now I need to build and run my next app to test it, correct?

yes 



Japanese flying squidOP
You are helping me so much thanks, I need to fix it on prod in like 2 hours maximum




what did u run?

Japanese flying squidOP
npm run build
npm start - it runs node .next/standalone/server.js
just removing standalone
I will try without standalone

Japanese flying squidOP
Better to leave still standalone?
Okay deleted .next and trying again with standalone
Will it be easy to make it work on VPS?

standalone is good if use nextjs with docker

Japanese flying squidOP
Yes I use
Same problem with new build


strange
can i look at the codebase?

Japanese flying squidOP

on dev server it's ok

inside .next I don't even see standalone folder


how does your next config look like

Japanese flying squidOP


@Japanese flying squid Click to see attachment

do this
cp -r public .next/standalone/ && cp -r .next/static .next/standalone/.next/


Japanese flying squidOP


because inside standalone there is no server.js file

just run next start
the standalone folder has its own .next its probably in there
next start will work even with standalone
just do that locally

Japanese flying squidOP


but it works now
const io = new Server(httpServer, {
cors: {
origin: "http://localhost:3000", // Replace with your client origin
methods: ["GET", "POST"], // Allowed HTTP methods
credentials: true, // Allow cookies if needed
},
});
Should I add my prod url here also inside origin?

Japanese flying squidOP
After removing custom server, on prod VPS I get error:
> kisa@1.1.0 start
> next start
sh: next: not found