Added WebSocket arg to allow manually setting port (#5963)

Saw a reply on the original pull request that the WebSocket using a random port broke their set up so I added a `--websocket` or `-w` argument similar to the `-p` argument to allow manually setting this port also.

packages/next-server/server/config.js

@@ -14,7 +14,12 @@ const defaultConfig = {
   generateBuildId: () => null,
   generateEtags: true,
   pageExtensions: ['jsx', 'js'],
-  target: 'server'
+  target: 'server',
+  onDemandEntries: {
+    maxInactiveAge: 60 * 1000,
+    pagesBufferLength: 2,
+    websocketPort: 0
+  }
 }
 
 function normalizeConfig (phase, config) {
@@ -40,6 +45,12 @@ export default function loadConfig (phase, dir, customConfig) {
     if (userConfig.target && !targets.includes(userConfig.target)) {
       throw new Error(`Specified target is invalid. Provided: "${userConfig.target}" should be one of ${targets.join(', ')}`)
     }
+    if (userConfig.onDemandEntries) {
+      userConfig.onDemandEntries = {
+        ...defaultConfig.onDemandEntries,
+        ...userConfig.onDemandEntries
+      }
+    }
     return {...defaultConfig, configOrigin: CONFIG_FILE, ...userConfig}
   }
 

packages/next/README.md

@@ -1292,7 +1292,9 @@ module.exports = {
     maxInactiveAge: 25 * 1000,
     // number of pages that should be kept simultaneously without being disposed
     pagesBufferLength: 2,
-  }
+    // optionally configure a port for the onDemandEntries WebSocket, not needed by default
+    websocketPort: 3001,
+  },
 }
 ```
 

packages/next/server/hot-reloader.js

@@ -173,8 +173,9 @@ export default class HotReloader {
     await this.clean()
 
     this.wsPort = await new Promise((resolve, reject) => {
-      // create dynamic entries WebSocket
+      const { websocketPort } = this.config.onDemandEntries
-      this.wss = new WebSocket.Server({ port: 0 }, function (err) {
+      // create on-demand-entries WebSocket
+      this.wss = new WebSocket.Server({ port: websocketPort }, function (err) {
         if (err) {
           return reject(err)
         }

packages/next/server/on-demand-entry-handler.js

@@ -33,8 +33,8 @@ export default function onDemandEntryHandler (devMiddleware, multiCompiler, {
   dev,
   reload,
   pageExtensions,
-  maxInactiveAge = 1000 * 60,
+  maxInactiveAge,
-  pagesBufferLength = 2,
+  pagesBufferLength,
   wsPort
 }) {
   const {compilers} = multiCompiler

test/integration/config/next.config.js

@@ -5,7 +5,8 @@ const path = require('path')
 module.exports = withCSS(withSass({
   onDemandEntries: {
     // Make sure entries are not getting disposed.
-    maxInactiveAge: 1000 * 60 * 60
+    maxInactiveAge: 1000 * 60 * 60,
+    websocketPort: 3001
   },
   cssModules: true,
   serverRuntimeConfig: {

test/integration/config/test/client.js

@@ -1,7 +1,7 @@
 /* eslint-env jest */
 
 import webdriver from 'next-webdriver'
-import { waitFor } from 'next-test-utils' /* check, File */
+import { waitFor, fetchViaHTTP } from 'next-test-utils' /* check, File */
 import { readFileSync, writeFileSync } from 'fs'
 import { join } from 'path'
 
@@ -20,6 +20,12 @@ export default (context, render) => {
       browser.close()
     })
 
+    it('should use websocketPort for on-demand-entries WebSocket', async () => {
+      const res = await fetchViaHTTP(context.appPort, '/_next/on-demand-entries-ping')
+      const wsPort = res.headers.get('port')
+      expect(wsPort).toBe(context.devWebSocketPort + '')
+    })
+
     it('should update css styles using hmr', async () => {
       let browser
       try {

test/integration/config/test/index.test.js

@@ -6,7 +6,8 @@ import {
   fetchViaHTTP,
   findPort,
   launchApp,
-  killApp
+  killApp,
+  File
 } from 'next-test-utils'
 
 // test suits
@@ -19,6 +20,15 @@ jasmine.DEFAULT_TIMEOUT_INTERVAL = 1000 * 60 * 5
 describe('Configuration', () => {
   beforeAll(async () => {
     context.appPort = await findPort()
+    context.devWebSocketPort = await findPort()
+
+    // update next.config with found devWebSocketPort (must come before launchApp)
+    context.nextConfig = new File(join(__dirname, '../next.config.js'))
+    context.nextConfig.replace(
+      'websocketPort: 3001',
+      `websocketPort: ${context.devWebSocketPort}`
+    )
+
     context.server = await launchApp(join(__dirname, '../'), context.appPort)
 
     // pre-build all pages at the start
@@ -28,7 +38,10 @@ describe('Configuration', () => {
       renderViaHTTP(context.appPort, '/webpack-css')
     ])
   })
-  afterAll(() => killApp(context.server))
+  afterAll(() => {
+    killApp(context.server)
+    context.nextConfig.restore()
+  })
 
   rendering(context, 'Rendering via HTTP', (p, q) => renderViaHTTP(context.appPort, p, q), (p, q) => fetchViaHTTP(context.appPort, p, q))
   client(context, (p, q) => renderViaHTTP(context.appPort, p, q))