Nuxt.js: Can't open more than 6 tabs in development

[bdrtsky]

Version

v2.8.0

Reproduction link

https://nuxtjs.com

Steps to reproduce

When running app in dev mode, I noticed that I can't open more than 6-7 tabs. They remain loading until I close opened tabs.

In prod everything is ok. Is this behavior intended?

What is expected ?

I expect any amount of tabs to be loaded

What is actually happening?

More than 6-7 tabs doesn't load

_{This bug report is available on Nuxt community (#c9434)}

[manniL]

Can reproduce this with a local project

[pimlie]

I think because Chrome has a default limit of 6 http sockets per domain. Eg for me it says Waiting for available socket when I open the 7th tab.

Related: https://stackoverflow.com/questions/32697909/how-to-solve-chromes-6-connection-limit-when-using-xhr-polling

[bdrtsky]

@pimlie I think you are right. Then not an issue, I guess? Feel free to close if so.

[bdrtsky]

What I want to add - besides sockets that Nuxt using internally (that hangs Chrome), I am using native Websockets in my app. And in prod I can open any amount of tabs...Not sure how to interpret this.

[pimlie]

Might be because of the loading screen, that uses fetch/xhr to retrieve the bundle statuses in json.

[pi0]

Loading screen socket is not in final rendered page.

XHR build indicator opens a WebSocket (not fetch/XHR) per tab + Webpack dev middleware which opens a long polling connection per tab

[bdrtsky]

@pi0 but why I can open any amount of tabs with Websockets in my app, while having Websockets in Loading screen are limited with 6 tabs? So the problem in long polling?

[pimlie]

@bdrtsky the limit of 6 sockets only applies to http / xhr sockets. Not websockets.

As pi0 mentioned the xhr sockets originates from the webpack dev middleware so thats not something we can change unfortunately.

If you really need to have more then 6 tabs, you can probably trick your browser by adding local dev domains to your host file. Eg add the following to your hosts file and you should be able to use 6 tabs per domain

s1.myproject.dev 127.0.0.1
s2.myproject.dev 127.0.0.1
s3.myproject.dev 127.0.0.1

[manniL]

For anyone coming along, the [Next.js docs](https://github.com/zeit/next.js/blob/master/errors/multi-tabs.md9 summarize it nicely as Next as a similar limitation.

---

Quoted from https://github.com/zeit/next.js/blob/master/errors/multi-tabs.md

Multiple Tabs

Why This Error Occurred

In development mode Next.js creates 2 persistent connections to the server to receive hot updates and to keep pages active. Each browser has their own limit for the number of concurrent connections to a specific server a site is allowed to have so if you open the same Next.js site in multiple tabs of the same browser you could exceed your browser's limit.

More info here: https://tools.ietf.org/html/rfc6202#section-5.1

Possible Ways to Fix It

• Don't have too many tabs open to the same Next.js site open in development in the same browser at the same time.
• If using Firefox you can increase this limit by navigating to about:config and setting network.http.max-persistent-connections-per-server to a higher number