Add Websockets based pinger.

Author: arunoda

client/on-demand-entries-client.js

@@ -1,36 +1,64 @@
-/* global fetch, location */
+/* global fetch, location, WebSocket */
 
 import Router from '../lib/router'
 import 'whatwg-fetch'
 
-// Ping on every page change
-const originalOnRouteChangeComplete = Router.onRouteChangeComplete
-Router.onRouteChangeComplete = function (...args) {
-  ping()
-  if (originalOnRouteChangeComplete) originalOnRouteChangeComplete(...args)
+initiatePinging()
+  .catch((err) => {
+    console.error(err.stack)
+  })
+
+async function initiatePinging () {
+  const res = await fetch('/on-demand-entries-pinger-port')
+  const payload = await res.json()
+  startPinging(payload.port)
 }
 
-async function ping () {
-  try {
-    const url = `/on-demand-entries-ping?page=${Router.pathname}`
-    const res = await fetch(url)
-    const payload = await res.json()
-    if (payload.invalid) {
-      location.reload()
+async function retry () {
+  while (true) {
+    try {
+      await initiatePinging()
+      break
+    } catch (err) {
+      await new Promise((resolve) => setTimeout(resolve, 2000))
     }
-  } catch (err) {
-    console.error(`Error with on-demand-entries-ping: ${err.message}`)
   }
 }
 
-async function runPinger () {
-  while (true) {
-    await new Promise((resolve) => setTimeout(resolve, 5000))
-    await ping()
+function startPinging (port) {
+  const conn = new WebSocket(`ws://localhost:${port}/`, 'protocolOne')
+  let pingingHandler = null
+  conn.onopen = () => {
+    console.log('> Start pinging for the active page.')
+    ping()
+    pingingHandler = setInterval(ping, 1000 * 5)
   }
-}
 
-runPinger()
-  .catch((err) => {
-    console.error(err)
-  })
+  conn.onmessage = (event) => {
+    const parsedMessage = JSON.parse(event.data)
+    if (parsedMessage.invalid) {
+      location.reload()
+    }
+  }
+
+  conn.onclose = () => {
+    clearInterval(pingingHandler)
+    retry()
+  }
+
+  conn.onerror = (error) => {
+    console.log(`Pinger error: ${error.message}`)
+  }
+
+  // Ping on every page change
+  const originalOnRouteChangeComplete = Router.onRouteChangeComplete
+  Router.onRouteChangeComplete = function (...args) {
+    ping()
+    if (originalOnRouteChangeComplete) originalOnRouteChangeComplete(...args)
+  }
+
+  function ping () {
+    const payload = { page: Router.pathname }
+    conn.send(JSON.stringify(payload))
+  }
+}

package.json

@@ -57,6 +57,7 @@
     "babel-preset-latest": "6.22.0",
     "babel-preset-react": "6.23.0",
     "babel-runtime": "6.23.0",
+    "bufferutil": "2.0.1",
     "case-sensitive-paths-webpack-plugin": "1.1.4",
     "cross-spawn": "5.0.1",
     "del": "2.2.2",
@@ -79,14 +80,16 @@
     "source-map-support": "0.4.11",
     "strip-ansi": "3.0.1",
     "styled-jsx": "0.5.7",
-    "touch": "^1.0.0",
+    "touch": "1.0.0",
     "url": "0.11.0",
+    "utf-8-validate": "3.0.1",
     "uuid": "3.0.1",
     "webpack": "2.2.1",
     "webpack-dev-middleware": "1.10.1",
     "webpack-hot-middleware": "2.17.0",
     "whatwg-fetch": "2.0.2",
-    "write-file-webpack-plugin": "3.4.2"
+    "write-file-webpack-plugin": "3.4.2",
+    "ws": "2.1.0"
   },
   "devDependencies": {
     "babel-eslint": "7.1.1",

server/hot-reloader.js

@@ -49,12 +49,13 @@ export default class HotReloader {
 
   async stop () {
     if (this.webpackDevMiddleware) {
-      return new Promise((resolve, reject) => {
+      await new Promise((resolve, reject) => {
         this.webpackDevMiddleware.close((err) => {
           if (err) return reject(err)
           resolve()
         })
       })
+      await this.onDemandEntries.close()
     }
   }
 
@@ -149,7 +150,7 @@ export default class HotReloader {
     })
 
     this.webpackHotMiddleware = webpackHotMiddleware(compiler, { log: false })
-    this.onDemandEntries = onDemandEntryHandler(this.webpackDevMiddleware, compiler, {
+    this.onDemandEntries = await onDemandEntryHandler(this.webpackDevMiddleware, compiler, {
       dir: this.dir,
       dev: true,
       ...this.config.onDemandEntries

server/on-demand-entry-handler.js

@@ -1,19 +1,23 @@
 import DynamicEntryPlugin from 'webpack/lib/DynamicEntryPlugin'
 import { EventEmitter } from 'events'
+import { createServer } from 'http'
 import { join } from 'path'
-import { parse } from 'url'
 import resolvePath from './resolve'
 import touch from 'touch'
+import WebSocket from 'ws'
 
 const ADDED = Symbol()
 const BUILDING = Symbol()
 const BUILT = Symbol()
 
-export default function onDemandEntryHandler (devMiddleware, compiler, {
+export default async function onDemandEntryHandler (devMiddleware, compiler, {
   dir,
   dev,
   maxInactiveAge = 1000 * 25
 }) {
+  const server = await getServer()
+  const wss = new WebSocket.Server({ server })
+
   const entries = {}
   const lastAccessPages = ['']
   const doneCallbacks = new EventEmitter()
@@ -58,6 +62,31 @@ export default function onDemandEntryHandler (devMiddleware, compiler, {
     disposeInactiveEntries(devMiddleware, entries, lastAccessPages, maxInactiveAge)
   }, 5000)
 
+  wss.on('connection', (conn) => {
+    conn.on('message', (message) => {
+      const parsedMessage = JSON.parse(message)
+      const page = normalizePage(parsedMessage.page)
+      const entryInfo = entries[page]
+
+      // If there's no entry.
+      // Then it seems like an weird issue.
+      if (!entryInfo) {
+        const message = `Client pings, but there's no entry for page: ${page}`
+        console.error(message)
+        conn.send(JSON.stringify({ invalid: true }))
+        return
+      }
+
+      // We don't need to maintain active state of anything other than BUILT entries
+      if (entryInfo.status !== BUILT) return
+
+      // If there's an entryInfo
+      lastAccessPages.pop()
+      lastAccessPages.unshift(page)
+      entryInfo.lastActiveTime = Date.now()
+    })
+  })
+
   return {
     async ensurePage (page) {
       page = normalizePage(page)
@@ -103,31 +132,25 @@ export default function onDemandEntryHandler (devMiddleware, compiler, {
 
     middleware () {
       return function (req, res, next) {
-        if (!/^\/on-demand-entries-ping/.test(req.url)) return next()
-
-        const { query } = parse(req.url, true)
-        const page = normalizePage(query.page)
-        const entryInfo = entries[page]
+        if (!/^\/on-demand-entries-pinger-port/.test(req.url)) return next()
 
-        // If there's no entry.
-        // Then it seems like an weird issue.
-        if (!entryInfo) {
-          const message = `Client pings, but there's no entry for page: ${page}`
-          console.error(message)
-          sendJson(res, { invalid: true })
-          return
-        }
-
-        // We don't need to maintain active state of anything other than BUILT entries
-        if (entryInfo.status !== BUILT) return
+        sendJson(res, {
+          port: server.address().port
+        })
+      }
+    },
 
-        // If there's an entryInfo
-        lastAccessPages.pop()
-        lastAccessPages.unshift(page)
-        entryInfo.lastActiveTime = Date.now()
+    close () {
+      return new Promise((resolve, reject) => {
+        server.close((err) => {
+          if (err) {
+            reject(err)
+            return
+          }
 
-        sendJson(res, { success: true })
-      }
+          resolve()
+        })
+      })
     }
   }
 }
@@ -182,3 +205,17 @@ function sendJson (res, payload) {
   res.status = 200
   res.end(JSON.stringify(payload))
 }
+
+function getServer () {
+  return new Promise((resolve, reject) => {
+    const server = createServer()
+    server.listen((err) => {
+      if (err) {
+        reject(err)
+        return
+      }
+
+      resolve(server)
+    })
+  })
+}