Extract ping into own class

client/index.ts

@@ -1,39 +1,17 @@
-import { io, Socket } from 'socket.io-client'
-
-import { ClientToServerEvents, ServerToClientEvents } from '../shared/socket'
+import { io } from 'socket.io-client'
 
+import { ClientSocket } from './socket'
 import { uri, username, password } from './env'
 import { generateToken } from './auth'
+import Ping from './ping'
 
-const socket: Socket<ServerToClientEvents, ClientToServerEvents> = io(uri, {
+const socket: ClientSocket = io(uri, {
   auth: {
     token: generateToken(username, password),
   },
 })
 
-const pings: number[] = []
-
-function updatePing() {
-  const start = Date.now()
-
-  socket.emit('ping', () => {
-    pings.push(Date.now() - start)
-
-    while (pings.length > 10) {
-      pings.shift()
-    }
-
-    const ping = Math.round(pings.reduce((a, b) => a + b) / pings.length)
-    const delta = Math.round(pings.map((d) => Math.abs(d - ping)).reduce((a, b) => a + b) / pings.length)
-
-    // eslint-disable-next-line no-console
-    console.log(`Ping: ${ping}ms ±${delta}ms (${JSON.stringify(pings)})`)
-  })
-
-  setTimeout(updatePing, 10000)
-}
-
-setTimeout(updatePing, 1000)
+new Ping(socket).start()
 
 socket.emit('characterList', (characters) => {
   // eslint-disable-next-line no-console

client/ping.ts

@@ -0,0 +1,54 @@
+import { ClientSocket } from './socket'
+
+const avg = (values: number[]) => values.reduce((a, b) => a + b) / values.length
+
+export default class Ping {
+  #socket: ClientSocket
+
+  #timeout: NodeJS.Timeout | undefined
+
+  readonly #pings: number[]
+
+  constructor(socket: ClientSocket) {
+    this.#socket = socket
+    this.#pings = []
+  }
+
+  #update() {
+    const start = Date.now()
+
+    this.#socket.emit('ping', () => {
+      this.#pings.push(Date.now() - start)
+
+      while (this.#pings.length > 10) {
+        this.#pings.shift()
+      }
+
+      // TODO: make calculations on demand and extract/remove logging of ping
+      const ping = Math.round(avg(this.#pings))
+      const delta = Math.round(avg(this.#pings.map((d) => Math.abs(d - ping))))
+
+      // eslint-disable-next-line no-console
+      console.debug(
+        `Ping: ${ping}ms ±${delta}ms (${JSON.stringify(this.#pings)})`,
+      )
+    })
+
+    this.#timeout = setTimeout(this.#update.bind(this), 10000)
+  }
+
+  start() {
+    this.stop()
+
+    this.#timeout = setTimeout(this.#update.bind(this), 1000)
+  }
+
+  stop() {
+    if (!this.#timeout) {
+      return
+    }
+
+    clearTimeout(this.#timeout)
+    this.#timeout = undefined
+  }
+}

client/socket.ts

@@ -0,0 +1,5 @@
+import { Socket } from 'socket.io-client'
+
+import { ClientToServerEvents, ServerToClientEvents } from '../shared/socket'
+
+export type ClientSocket = Socket<ServerToClientEvents, ClientToServerEvents>