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

saicharan-gevme · 2023-05-05T20:05:59Z

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 · 2023-05-05T20:16:02Z

Same problem @leerob

AdamGonda · 2023-05-06T11:28:16Z

Same here

leerob · 2023-05-06T16:32:49Z

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 · 2023-05-06T20:48:04Z

Pointed these two discussions here:

And this issue:

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

Minisaints · 2023-05-09T01:37:15Z

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 · 2023-05-09T07:42:31Z

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 · 2023-05-09T08:22:27Z

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 · 2023-05-09T09:54:25Z

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 · 2023-05-09T10:16:15Z

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 · 2023-05-09T10:17:02Z

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

newtmex · 2023-05-09T10:35:20Z

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

berrugo · 2023-05-09T16:23:51Z

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

Also worked for me on latest 13.4.1, thanks!

ddadaal · 2023-05-12T03:23:35Z

The problem still remains and is about Next.js server ignores listeners to upgrade event of Next.js server from Next.js 13.3.

https://codesandbox.io/p/sandbox/busy-euclid-qbvdv8

This project creates an API route (pages/api/proxy.ts) that adds a listener to next.js server listening to upgrade event when accessed and prints a setup upgrade log. The listener just logs a upgrade log to indicate the upgrade event is handled. There is also a page (apps/page.tsx) that first calls the API route (to register the listener), and then tries to establish a WS connection to the server.

In Next.js 13.2.5, it works fine. Both setup upgrade and upgrade logs are printed.

In Next.js 13.4.2, only setup upgrade log is printed. It means the server.on("upgrade", {handler} is called, but the listener is ignored.

saicharan-gevme · 2023-05-12T03:35:24Z

The problem still remains and is about Next.js server ignores listeners to upgrade event of Next.js server from Next.js 13.3.

https://codesandbox.io/p/sandbox/busy-euclid-qbvdv8

This project creates an API route (pages/api/proxy.ts) that adds a listener to next.js server listening to upgrade event when accessed and prints a setup upgrade log. The listener just logs a upgrade log to indicate the upgrade event is handled. There is also a page (apps/page.tsx) that first calls the API route (to register the listener), and then tries to establish a WS connection to the server.

In Next.js 13.2.5, it works fine. Both setup upgrade and upgrade logs are printed.

In Next.js 13.4.2, only setup upgrade log is printed. It means the server.on("upgrade", {handler} is called, but the listener is ignored.

Thank you for explaining, I was also having same problem, when I explained here #49334 (comment)

But I was unable to explain with proper context, thank you for this example.

CKGrafico · 2023-05-14T10:37:42Z

The problem still remains and is about Next.js server ignores listeners to upgrade event of Next.js server from Next.js 13.3.

https://codesandbox.io/p/sandbox/busy-euclid-qbvdv8

This project creates an API route (pages/api/proxy.ts) that adds a listener to next.js server listening to upgrade event when accessed and prints a setup upgrade log. The listener just logs a upgrade log to indicate the upgrade event is handled. There is also a page (apps/page.tsx) that first calls the API route (to register the listener), and then tries to establish a WS connection to the server.

In Next.js 13.2.5, it works fine. Both setup upgrade and upgrade logs are printed.

In Next.js 13.4.2, only setup upgrade log is printed. It means the server.on("upgrade", {handler} is called, but the listener is ignored.

and do we have a workaround?

HarcheSamir · 2023-05-20T17:56:33Z

any solutions ? : (using App Router)

'use client'
import { useEffect, useState } from 'react';
import io from 'socket.io-client';/////this line is producing the error

const socket = io('http://localhost:3000');

export default function Page(){
const [newDecision, setNewDecision] = useState('');
useEffect(() => {
socket.on('newDecision', ({ decision }) => { setNewDecision(decision);}
});
}, []);

return (

);
};

errors :

Module not found: Can't resolve 'bufferutil' in ...
Module not found: Can't resolve 'utf-8-validate' in

rafael-14 · 2023-05-23T19:57:00Z

any solution?

IHarisImran · 2023-05-25T05:33:46Z

Any solution for pure app dir work? Currently my working approach is api is from pages dir and website is from app dir.

vimlesh1975 · 2023-05-25T09:39:52Z

Module not found: Can't resolve 'bufferutil' in ...
Module not found: Can't resolve 'utf-8-validate' in

npm install bufferutil utf-8-validate

ignwombat · 2023-05-25T10:27:24Z

For those still having issues, I found that removing the "transports" prop in the client worked for me (unless I did something else)

IHarisImran · 2023-05-25T10:44:40Z

GET http://localhost:3000/api/socket_io?EIO=4&transport=polling&t=OXIVwM_ 404 (Not Found)

For those who are having this 404 error, I found that removing not-found.jsx file fixes this.

markosoomets1 · 2023-05-25T15:43:45Z

Downgraded my NextJS version to 13.2.4 to resolve the issue temporarily.

saicharan-gevme · 2023-10-03T05:56:45Z

@huozhi I just realised that the socket.io is falling back to polling instead of WebSocket. Can you check on this once?
You can check that if you switch latest 13.5.4 with 13.2.4 it works with WebSocket.

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

ngocmobilefolk · 2023-10-03T15:10:25Z

I'm meeting this problem too when upgrading Next.js to 13.5.4

Hoping the issue can be resolved soon.

LeeBingler · 2023-10-03T20:55:45Z

I'm facing the same issue when upgrading to Next.js 13.5.3.

Good luck for the one who will resolve this issue.

bfeist · 2023-10-06T00:20:38Z

@huozhi I just realised that the socket.io is falling back to polling instead of WebSocket. Can you check on this once? You can check that if you switch latest 13.5.4 with 13.2.4 it works with WebSocket.

I'm seeing socket.io failing on nextjs 13.5.4. I downgraded to 13.2.4 as was suggested and it works

nfdenuzzo · 2023-10-06T14:21:09Z

tried using 13.5.4 with a custom server, and socket io implementation is stuck on switching protocol

dev2xl · 2023-10-07T15:06:30Z

Where I can deploy this setup NextJS + socketio?

RonaldErnst · 2023-10-10T09:09:30Z

I am having the same problems even without socket io. I'm using t3-stack with trpc's websocket implementation and the server is getting flooded with upgrade requests that close down with 1006 error immediately after.

I believe this is a general websocket problem since other libraries are having the same issue #54589 .
Latest working version for me is [email protected].

dymoo · 2023-10-10T10:24:44Z

Same issue. Downgraded to 13.4.12 like @RonaldErnst suggested and it works fine...

Hope we can get this resolved quickly.

Websockets are completely broken on nextJS, across all libraries. I need to force websocket transport with socket.io to deploy to cloud run. Alternative socket.io transports seem to work but I need websockets...

Another temp fix could be deploying WS server to a different port but once again that wouldn't work for people using cloud run etc...

Algram · 2023-10-17T06:55:30Z

We are a running the https://github.com/chimurai/http-proxy-middleware in our next app. This proxies requests for Grafana Loki, which uses websockets.

They same issue exists for this use-case and the proxy does not work anymore.

hvqzao · 2023-10-18T21:23:44Z

Issue still persists in [email protected].
I'm not using socket.io, just plain ws. Getting instant disconnects.
We are all stuck in [email protected] which is 3 months old and has security issues within dependencies.

Is there a chance to increase priority on this?

mustafademiray1 · 2023-10-20T19:49:21Z

I have same issiue with transport upgrades. It is always working as polling mode. It is never upgrading to websockets...

We should not close unmatched sockets as it might be handled by user's server. Fixes #56996 Fixes #49334 Fixes #55299

hvqzao · 2023-10-26T18:19:59Z

Thank you for the patch!
In my case, after upgrade to [email protected] I'm still facing the same issue.

beckinator1 · 2023-10-26T19:26:36Z

Still getting Websocket closed prematurely and Websocket is already in CLOSING or CLOSED state on [email protected] and [email protected] using a custom server and the ws library.

mustafademiray1 · 2023-10-26T19:30:13Z

Same issue still continues @huozhi

KillerCodeMonkey · 2023-10-27T06:44:32Z

so i use it with graphql + custom express server and it is working in dev and production with 13.5.7-canary.23.

  // init next app
  await nextApp.prepare()

  // create express app
  const expressApp = express()
  const httpServer = createServer(expressApp)

  // create the websocket server
  const wsServer = new WSServer({
    path: '/graphql',
    noServer: true
  })

  const cleanUp = useServer({ schema }, wsServer)

  const plugins = [
    ApolloServerPluginDrainHttpServer({ httpServer }),
    {
      async serverWillStart() {
        return {
          async drainServer() {
            await cleanUp.dispose()
          }
        }
      }
    }
  ]

  const apolloServer = new ApolloServer<Context>({
    csrfPrevention: true,
    schema,
    plugins
  })

  await apolloServer.start()

  expressApp.use(graphqlUploadExpress())

the important part is not to pass the httpServer to the initialisation of the wsServer. Instead use the option noServer: true

hvqzao · 2023-10-27T14:47:16Z

@KillerCodeMonkey that is valuable contribution, thanks! Finally upgraded to 14.0.0. I see that as long as you don't use same endpoints as these in pages / app routes, it works (websocket connections are no longer terminated). It even works without specifiying noServer: true, but does this mean we cannot use pages / app routes anymore as endpoints for websockets having standalone node server in place?

huozhi · 2023-10-29T15:58:56Z

The fix is landed in 14.0, please upgrade to the latest next.js! 🙏 btw there's no new feature so it should work well like v13

saicharan-gevme · 2023-10-30T03:38:43Z

I confirm its working perfectly fine with Next.js Latest version (14.0.0), however one must ensure to use Node v18.17.x or higher version, as its a breaking change in Next.js 14 - refer the changelog for Next.js v14 here.

Thank a lot @huozhi, @shuding and the Next.js team for resolving this issue. Also I thank you very much @leerob for helping me to create this issue page for the resolution. Lots of ❤️ for the great Next.js Community.

github-actions · 2023-11-13T12:01:38Z

This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.

saicharan-gevme added the bug Issue was opened via the bug report template. label May 5, 2023

github-actions bot added the area: app label May 5, 2023

saicharan-gevme changed the title ~~Socket.IO Not working anymore from Next.js 13.2.5-canary.27~~ Socket.IO Not working anymore from Next.js 13.2.5-canary.27 to latest Next.js 13.4.1 May 5, 2023

timneutkens added the linear: next Confirmed issue that is tracked by the Next.js team. label May 9, 2023

timneutkens changed the title ~~Socket.IO Not working anymore from Next.js 13.2.5-canary.27 to latest Next.js 13.4.1~~ [NEXT-1119] Socket.IO Not working anymore from Next.js 13.2.5-canary.27 to latest Next.js 13.4.1 May 9, 2023

This comment was marked as off-topic.

Sign in to view

at946 mentioned this issue May 25, 2023

Next.jsのバージョンを13.3以降にアップグレードしたい at946/tenkiru#141

Closed

huozhi closed this as completed Oct 8, 2023

huozhi reopened this Oct 8, 2023

This was referenced Oct 8, 2023

Websocket issue with latest version of NextJS #54589

Closed

Add socket.io packages to server external packages #56586

Closed

huozhi mentioned this issue Oct 21, 2023

Remove ending socket connection and log errors in dev #57182

Closed

shuding mentioned this issue Oct 23, 2023

Fix unmatched WebSocket upgrade requests being closed #57245

Merged

kodiakhq bot closed this as completed in #57245 Oct 23, 2023

kodiakhq bot pushed a commit that referenced this issue Oct 23, 2023

Fix unmatched WebSocket upgrade requests being closed (#57245)

eb4b41e

We should not close unmatched sockets as it might be handled by user's server. Fixes #56996 Fixes #49334 Fixes #55299

mattcasey mentioned this issue Nov 8, 2023

Socket server locally charmverse/app.charmverse.io#3063

Merged

github-actions bot added the locked label Nov 13, 2023

github-actions bot locked as resolved and limited conversation to collaborators Nov 13, 2023

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

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

Comments

saicharan-gevme commented May 5, 2023 • edited by timneutkens Loading

Verify canary release

Provide environment information

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

Link to the code that reproduces this issue

To Reproduce

Agenda of this project?

The App is have the following things -

Whats the Issue?

Since when this issue is happening?

Do we have an Example project?

Steps to Reproduce

Some References PR for / might this issue have created?

Describe the Bug

Expected Behavior

Which browser are you using? (if relevant)

How are you deploying your application? (if relevant)

flipUp02 commented May 5, 2023

AdamGonda commented May 6, 2023

leerob commented May 6, 2023

leerob commented May 6, 2023 • edited Loading

Minisaints commented May 9, 2023

saicharan-gevme commented May 9, 2023

Minisaints commented May 9, 2023 • edited Loading

flipUp02 commented May 9, 2023

flipUp02 commented May 9, 2023

flipUp02 commented May 9, 2023

newtmex commented May 9, 2023

berrugo commented May 9, 2023

This comment was marked as off-topic.

This comment was marked as off-topic.

ddadaal commented May 12, 2023 • edited Loading

saicharan-gevme commented May 12, 2023

CKGrafico commented May 14, 2023

HarcheSamir commented May 20, 2023

rafael-14 commented May 23, 2023

IHarisImran commented May 25, 2023

vimlesh1975 commented May 25, 2023 • edited Loading

ignwombat commented May 25, 2023

IHarisImran commented May 25, 2023

markosoomets1 commented May 25, 2023

saicharan-gevme commented Oct 3, 2023 • edited Loading

ngocmobilefolk commented Oct 3, 2023

LeeBingler commented Oct 3, 2023

bfeist commented Oct 6, 2023

nfdenuzzo commented Oct 6, 2023 • edited Loading

dev2xl commented Oct 7, 2023

RonaldErnst commented Oct 10, 2023

dymoo commented Oct 10, 2023 • edited Loading

Algram commented Oct 17, 2023

hvqzao commented Oct 18, 2023 • edited Loading

mustafademiray1 commented Oct 20, 2023

hvqzao commented Oct 26, 2023

beckinator1 commented Oct 26, 2023

mustafademiray1 commented Oct 26, 2023

KillerCodeMonkey commented Oct 27, 2023 • edited Loading

hvqzao commented Oct 27, 2023 • edited Loading

huozhi commented Oct 29, 2023

saicharan-gevme commented Oct 30, 2023 • edited Loading

github-actions bot commented Nov 13, 2023

saicharan-gevme commented May 5, 2023 •

edited by timneutkens

Loading

leerob commented May 6, 2023 •

edited

Loading

Minisaints commented May 9, 2023 •

edited

Loading

ddadaal commented May 12, 2023 •

edited

Loading

vimlesh1975 commented May 25, 2023 •

edited

Loading

saicharan-gevme commented Oct 3, 2023 •

edited

Loading

nfdenuzzo commented Oct 6, 2023 •

edited

Loading

dymoo commented Oct 10, 2023 •

edited

Loading

hvqzao commented Oct 18, 2023 •

edited

Loading

KillerCodeMonkey commented Oct 27, 2023 •

edited

Loading

hvqzao commented Oct 27, 2023 •

edited

Loading

saicharan-gevme commented Oct 30, 2023 •

edited

Loading