[NEXT-1119] Socket.IO Not working anymore from Next.js 13.2.5-canary.27 to latest Next.js 13.4.1

[saicharan-gevme]

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
      Platform: darwin
      Arch: arm64
      Version: Darwin Kernel Version 22.4.0: Mon Mar  6 21:00:41 PST 2023; root:xnu-8796.101.5~3/RELEASE_ARM64_T8103
    Binaries:
      Node: 18.16.0
      npm: 9.5.1
      Yarn: N/A
      pnpm: N/A
    Relevant packages:
      next: 13.4.1-canary.2
      eslint-config-next: N/A
      react: 18.2.0
      react-dom: 18.2.0

warn  - Latest canary version not detected, detected: "13.4.1-canary.2", newest: "13.4.1".
        Please try the latest canary version (`npm install next@canary`) to confirm the issue still exists before creating a new issue.
        Read more - https://nextjs.org/docs/messages/opening-an-issue

Which area(s) of Next.js are affected? (leave empty if unsure)

App directory (appDir: true)

Link to the code that reproduces this issue

https://codesandbox.io/p/sandbox/nextjs-socketio-u89y82?file=%2Fpackage.json&selection=%5B%7B%22endColumn%22%3A1%2C%22endLineNumber%22%3A4%2C%22startColumn%22%3A1%2C%22startLineNumber%22%3A4%7D%5D

To Reproduce

Agenda of this project?

• To setup the Socket.Io server and share the information from one client to another user socket.io events

The App is have the following things -

• An api for initialising the Socket.Io server - inside /pages/api/socketio
• A client page to connect to this server - inside /app/page

Whats the Issue?

• There has been an unknown error in network connection from client side when its trying to create the Socket.Io connection.

Since when this issue is happening?

• This has been happening from Next.js version 13.2.5-canary.27 version and its still happening even in latest canary release 13.4.1-canary.2 and also the latest release Next.js 13.4.1

Do we have an Example project?

• Yes, I have created a testing project in codesandbox, that I have already shared. (Link)

Steps to Reproduce

• Just see the console and network tabs for the client connection error. It will happen to all the versions on and above 13.2.5-canary.27
• And to see if its fixed, you need to downgrade to 13.2.5-canary.26

Some References PR for / might this issue have created?

• I some how gathered the PR for the version when this Socket.Io broken (i.e. 13.2.5-canary.27) - See here

Describe the Bug

• There has been an unknown error in network connection from client side when its trying to create the Socket.Io connection.

Expected Behavior

• There should be successful Socket.Io connection.
• It should exactly work the same way as it was working 13.2.5-canary.26 or lower.
• I was using 13.2.4 as stable version for our production application, as we had to use Socket.Io for websocket connection.

Which browser are you using? (if relevant)

I am using latest Chrome version, but this has to do more with Next.js Core server. It has nothing to do with any browsers.

How are you deploying your application? (if relevant)

Using Docker, but this is irrelevant too, as in localhost also, there is this issue.

_NEXT-1119

[flipUp02]

Same problem @leerob

[AdamGonda]

Same here

[leerob]

Thank you for reporting! The best way to track this is by upvoting the issue versus commenting, unless you can provide additional information or reproductions. Greatly appreciate the assistance with making a minimal reproduction 🙏

[leerob]

Pointed these two discussions here:

• NextJS 13.3.0 breaks the Socket.io implementation #48422
• from nextjs 13.3.0 to 13.3.1-canary.11 socket.io not working #48510

And this issue:

• from nextjs 13.3.0 to 13.4 socket.io not working #49249

[Minisaints]

It appears that after "13.2.5-canary.26", a trailing slash is appended to the end of the route.

Disabling "addTrailingSlash" in the Socket.IO Server constructor resolved this for me on the latest version (13.4.1).

"pages/api/socket.js"

const io = new Server(res.socket.server, {
   path: "/api/socket_io",
   addTrailingSlash: false
 });

[saicharan-gevme]

It appears that after "13.2.5-canary.26", a trailing slash is appended to the end of the route.

Disabling "addTrailingSlash" in the Socket.IO Server constructor resolved this for me on the latest version (13.4.1).

"pages/api/socket.js"

const io = new Server(res.socket.server, {
   path: "/api/socket_io",
   addTrailingSlash: false
 });

Thank you for this update, this has resolved the network issue we got earlier, but still the WS connection is not working like earlier, it always stays in pending mode

You can please check and confirm that its working when you switch back to old version of Next.js

[Minisaints]

It appears that after "13.2.5-canary.26", a trailing slash is appended to the end of the route.
Disabling "addTrailingSlash" in the Socket.IO Server constructor resolved this for me on the latest version (13.4.1).

"pages/api/socket.js"

const io = new Server(res.socket.server, {
   path: "/api/socket_io",
   addTrailingSlash: false
 });

Thank you for this update, this has resolved the network issue we got earlier, but still the WS connection is not working like earlier, it always stays in pending mode

You can please check and confirm that its working when you switch back to old version of Next.js

No problem. Ah really, my WS connection finishes fine and shows as connected; it doesn't get stuck on pending.

All WS functionality with our chat application works as intended too (on 13.4.1).

[flipUp02]

It appears that after "13.2.5-canary.26", a trailing slash is appended to the end of the route.
Disabling "addTrailingSlash" in the Socket.IO Server constructor resolved this for me on the latest version (13.4.1).

"pages/api/socket.js"

const io = new Server(res.socket.server, {
   path: "/api/socket_io",
   addTrailingSlash: false
 });

Thank you for this update, this has resolved the network issue we got earlier, but still the WS connection is not working like earlier, it always stays in pending mode
You can please check and confirm that its working when you switch back to old version of Next.js

No problem. Ah really, my WS connection finishes fine and shows as connected; it doesn't get stuck on pending.

All WS functionality with our chat application works as intended too (on 13.4.1).

can give us full code for test this ?

[flipUp02]

It appears that after "13.2.5-canary.26", a trailing slash is appended to the end of the route.
Disabling "addTrailingSlash" in the Socket.IO Server constructor resolved this for me on the latest version (13.4.1).

"pages/api/socket.js"

const io = new Server(res.socket.server, {
   path: "/api/socket_io",
   addTrailingSlash: false
 });

Thank you for this update, this has resolved the network issue we got earlier, but still the WS connection is not working like earlier, it always stays in pending mode

You can please check and confirm that its working when you switch back to old version of Next.js

your code is working now please follow this :
in socket.js add: const io = new Server(res.socket.server, {
path: '/api/socket_io',
addTrailingSlash: false,
});

in page.jsx : socket = io(undefined, {
path: '/api/socket_io',
});

and update all packages  

[flipUp02]

i think the problem in your old path path: "/api/my_awesome_socket",

[newtmex]

It appears that after "13.2.5-canary.26", a trailing slash is appended to the end of the route.

Disabling "addTrailingSlash" in the Socket.IO Server constructor resolved this for me on the latest version (13.4.1).

"pages/api/socket.js"

const io = new Server(res.socket.server, {
   path: "/api/socket_io",
   addTrailingSlash: false
 });

This worked for me