chore(gatsby): upgrade socket.io (#29765) (#29769)

* chore(gatsby): upgrade socket.io

* fix types

(cherry picked from commit 3ab492c)

Co-authored-by: Ward Peeters <ward@coding-tech.com>

Author: GatsbyJS Bot

packages/gatsby/package.json

@@ -138,8 +138,8 @@
     "shallow-compare": "^1.2.2",
     "signal-exit": "^3.0.3",
     "slugify": "^1.4.4",
-    "socket.io": "2.3.0",
-    "socket.io-client": "2.3.0",
+    "socket.io": "3.1.1",
+    "socket.io-client": "3.1.1",
     "source-map": "^0.7.3",
     "source-map-support": "^0.5.19",
     "st": "^2.0.0",
@@ -174,7 +174,6 @@
     "@types/reach__router": "^1.3.5",
     "@types/semver": "^7.1.0",
     "@types/signal-exit": "^3.0.0",
-    "@types/socket.io": "^2.1.4",
     "@types/string-similarity": "^3.0.0",
     "@types/tmp": "^0.2.0",
     "@types/webpack-dev-middleware": "^3.7.1",
@@ -259,4 +258,4 @@
   "yargs": {
     "boolean-negation": false
   }
-}
+}

packages/gatsby/src/commands/develop.ts

@@ -8,7 +8,7 @@ import execa from "execa"
 import chokidar from "chokidar"
 import getRandomPort from "detect-port"
 import { detectPortInUseAndPrompt } from "../utils/detect-port-in-use-and-prompt"
-import socket from "socket.io"
+import { Server as SocketIO } from "socket.io"
 import fs from "fs-extra"
 import onExit from "signal-exit"
 import {
@@ -344,7 +344,13 @@ module.exports = async (program: IProgram): Promise<void> => {
     : http.createServer()
   statusServer.listen(statusServerPort)
 
-  const io = socket(statusServer)
+  const io = new SocketIO(statusServer, {
+    // whitelist all (https://github.com/expressjs/cors#configuration-options)
+    cors: {
+      origin: true,
+    },
+    cookie: true,
+  })
 
   const handleChildProcessIPC = (msg): void => {
     if (msg.type === `HEARTBEAT`) return

packages/gatsby/src/utils/__tests__/websocket-manager.ts

@@ -19,6 +19,11 @@ jest.mock(`fs-extra`, () => {
   }
 })
 
+// we mock it to make tests faster
+jest.mock(`gatsby-cli/lib/reporter`, () => {
+  return {}
+})
+
 const INTERVAL_TIMEOUT = 500
 const TEST_TIMEOUT = 30000
 
@@ -49,9 +54,13 @@ describe(`websocket-manager`, () => {
   let websocketManager: WebsocketManager
   let httpServerAddr
 
-  async function getClientSocket(): Promise<typeof io.Socket> {
+  function getClientSocket(): typeof io.Socket {
+    return io.default(`http://127.0.0.1:${httpServerAddr.port}`)
+  }
+
+  function getClientSocketAndWaitForConnect(): Promise<typeof io.Socket> {
     return new Promise(resolve => {
-      const clientSocket = io.default(`http://127.0.0.1:${httpServerAddr.port}`)
+      const clientSocket = getClientSocket()
       clientSocket.on(`connect`, () => {
         resolve(clientSocket)
       })
@@ -149,7 +158,7 @@ describe(`websocket-manager`, () => {
     `Can connect`,
     async () => {
       expect.assertions(1)
-      const clientSocket = await getClientSocket()
+      const clientSocket = await getClientSocketAndWaitForConnect()
       expect(clientSocket.connected).toBe(true)
       clientSocket.disconnect()
     },
@@ -170,7 +179,7 @@ describe(`websocket-manager`, () => {
       async () => {
         expect.assertions(3)
 
-        const clientSocket = await getClientSocket()
+        const clientSocket = await getClientSocketAndWaitForConnect()
 
         expect(websocketManager.activePaths).toEqual(new Set())
 
@@ -202,8 +211,8 @@ describe(`websocket-manager`, () => {
       `track individual clients`,
       async () => {
         expect.assertions(5)
-        const clientSocket1 = await getClientSocket()
-        const clientSocket2 = await getClientSocket()
+        const clientSocket1 = await getClientSocketAndWaitForConnect()
+        const clientSocket2 = await getClientSocketAndWaitForConnect()
         expect(websocketManager.activePaths).toEqual(new Set())
 
         let activePathAdjustedPromise = waitUntil(done => {
@@ -261,7 +270,7 @@ describe(`websocket-manager`, () => {
       async function registerPathnameAndGetPath(
         pathname: string
       ): Promise<string> {
-        const clientSocket = await getClientSocket()
+        const clientSocket = await getClientSocketAndWaitForConnect()
 
         if (websocketManager.activePaths.size > 0) {
           throw new Error(`There was client connected already`)
@@ -465,7 +474,7 @@ describe(`websocket-manager`, () => {
         `Client can receive page query update`,
         async () => {
           expect.assertions(1)
-          const clientSocket = await getClientSocket()
+          const clientSocket = await getClientSocketAndWaitForConnect()
 
           const pageQueryId = `/blog/`
           const result = {
@@ -512,7 +521,7 @@ describe(`websocket-manager`, () => {
         `Client can receive static query update`,
         async () => {
           expect.assertions(1)
-          const clientSocket = await getClientSocket()
+          const clientSocket = await getClientSocketAndWaitForConnect()
 
           const staticQueryId = `12345`
           const result = {
@@ -553,7 +562,7 @@ describe(`websocket-manager`, () => {
     it(`Emits errors to display by clients`, async done => {
       expect.assertions(1)
 
-      const clientSocket = await getClientSocket()
+      const clientSocket = await getClientSocketAndWaitForConnect()
 
       function handler(msg): void {
         if (
@@ -575,7 +584,7 @@ describe(`websocket-manager`, () => {
     it(`Emits stored errors to new clients`, async done => {
       expect.assertions(1)
 
-      const clientSocket = await getClientSocket()
+      const clientSocket = getClientSocket()
 
       function handler(msg): void {
         if (
@@ -597,7 +606,7 @@ describe(`websocket-manager`, () => {
     it(`Can clear errors by emitting empty "overlayError" msg`, async done => {
       expect.assertions(1)
 
-      const clientSocket = await getClientSocket()
+      const clientSocket = await getClientSocketAndWaitForConnect()
 
       function handler(msg): void {
         if (

packages/gatsby/src/utils/websocket-manager.ts

@@ -10,7 +10,7 @@ import telemetry from "gatsby-telemetry"
 import url from "url"
 import { createHash } from "crypto"
 import { findPageByPath } from "./find-page-by-path"
-import socketIO from "socket.io"
+import { Server as SocketIO, Socket } from "socket.io"
 
 export interface IPageQueryResult {
   id: string
@@ -31,7 +31,7 @@ function hashPaths(paths: Array<string>): Array<string> {
 
 interface IClientInfo {
   activePath: string | null
-  socket: socketIO.Socket
+  socket: Socket
 }
 
 export class WebsocketManager {
@@ -40,19 +40,22 @@ export class WebsocketManager {
   errors: Map<string, string> = new Map()
   pageResults: PageResultsMap = new Map()
   staticQueryResults: QueryResultsMap = new Map()
-  websocket: socketIO.Server | undefined
-
-  init = ({
-    server,
-  }: {
-    server: HTTPSServer | HTTPServer
-  }): socketIO.Server => {
-    this.websocket = socketIO(server, {
+  websocket: SocketIO | undefined
+
+  init = ({ server }: { server: HTTPSServer | HTTPServer }): SocketIO => {
+    // make typescript happy, else it complained about this.websocket being undefined
+    const websocket = new SocketIO(server, {
       // we see ping-pong timeouts on gatsby-cloud when socket.io is running for a while
       // increasing it should help
       // @see https://github.com/socketio/socket.io/issues/3259#issuecomment-448058937
       pingTimeout: 30000,
+      // whitelist all (https://github.com/expressjs/cors#configuration-options)
+      cors: {
+        origin: true,
+      },
+      cookie: true,
     })
+    this.websocket = websocket
 
     const updateServerActivePaths = (): void => {
       const serverActivePaths = new Set<string>()
@@ -64,7 +67,7 @@ export class WebsocketManager {
       this.activePaths = serverActivePaths
     }
 
-    this.websocket.on(`connection`, socket => {
+    websocket.on(`connection`, socket => {
       const clientInfo: IClientInfo = {
         activePath: null,
         socket,
@@ -148,10 +151,10 @@ export class WebsocketManager {
       this.emitStalePageDataPathsFromStaticQueriesAssignment.bind(this)
     )
 
-    return this.websocket
+    return websocket
   }
 
-  getSocket = (): socketIO.Server | undefined => this.websocket
+  getSocket = (): SocketIO | undefined => this.websocket
 
   emitStaticQueryData = (data: IStaticQueryResult): void => {
     this.staticQueryResults.set(data.id, data)