fix: use a single websocket connection for HMR (vuejs#5069)

* fix(hmr-websocket): add failing test

* fix(hmr-websocket): set injectClient to false, as we inject our own client

* fix(hmr-websocket): change test project name

Author: lbogdan

packages/@vue/cli-service/__tests__/serve.spec.js

@@ -180,3 +180,17 @@ test('dart sass', async () => {
   // should build successfully
   await project.run('vue-cli-service build')
 })
+
+test('use a single websocket connection for HMR', async () => {
+  const project = await create('e2e-serve-hmr', defaultPreset)
+
+  await serve(
+    () => project.run('vue-cli-service serve'),
+    async ({ helpers, requestUrls }) => {
+      const msg = `Welcome to Your Vue.js App`
+      expect(await helpers.getText('h1')).toMatch(msg)
+
+      expect(requestUrls.filter(url => url.includes('sockjs-node')).length).toBe(1)
+    }
+  )
+})

packages/@vue/cli-service/lib/commands/serve.js

@@ -172,6 +172,7 @@ module.exports = (api, options) => {
       contentBase: api.resolve('public'),
       watchContentBase: !isProduction,
       hot: !isProduction,
+      injectClient: false,
       compress: isProduction,
       publicPath: options.publicPath,
       overlay: isProduction // TODO disable this

packages/@vue/cli-test-utils/launchPuppeteer.js

@@ -9,9 +9,16 @@ module.exports = async function launchPuppeteer (url) {
   const page = await browser.newPage()
 
   const logs = []
+  const requestUrls = []
   page.on('console', msg => logs.push(msg.text()))
 
+  await page.setRequestInterception(true)
+  page.on('request', interceptedRequest => {
+    requestUrls.push(interceptedRequest.url())
+    interceptedRequest.continue()
+  })
+
   await page.goto(url)
 
-  return { browser, page, logs }
+  return { browser, page, logs, requestUrls }
 }

packages/@vue/cli-test-utils/serveWithPuppeteer.js

@@ -44,7 +44,7 @@ module.exports = async function serveWithPuppeteer (serve, test, noPuppeteer) {
             await test({ url })
           } else {
             // start browser
-            const { page, browser } = await launchPuppeteer(url)
+            const { page, browser, requestUrls } = await launchPuppeteer(url)
             activeBrowser = browser
 
             const helpers = createHelpers(page)
@@ -54,7 +54,8 @@ module.exports = async function serveWithPuppeteer (serve, test, noPuppeteer) {
               page,
               url,
               nextUpdate,
-              helpers
+              helpers,
+              requestUrls
             })
 
             await browser.close()