Add WebSocket ping-pong heartbeat mechanism to monitor connection health and terminate stale clients

- it's been reported that sometimes we see duplicates in 'Connected Browsers' quick pick. Restarting the connected browser extension fixes it.
- [Pasted text]
- Property 'terminate' does not exist on type 'WebSocket'
-  [Changes] (old browser extension would not return pong) - check version and respect pong on  >=[Fragment] 

Author: robertpiosik

apps/browser/src/background/websocket.ts

@@ -27,8 +27,11 @@ export const check_and_recover_connection = () => {
     }
   }
 
-  if (!is_reconnecting && websocket?.readyState !== WebSocket.OPEN &&
-      websocket?.readyState !== WebSocket.CONNECTING) {
+  if (
+    !is_reconnecting &&
+    websocket?.readyState !== WebSocket.OPEN &&
+    websocket?.readyState !== WebSocket.CONNECTING
+  ) {
     connect_websocket()
   }
 }
@@ -70,8 +73,11 @@ export const connect_websocket = async (): Promise<void> => {
 
     websocket.onmessage = async (event) => {
       const message = JSON.parse(event.data)
-      if (message.action === 'ping') {
+      if (message.action == 'ping') {
         last_ping_timestamp = Date.now()
+        if (websocket?.readyState == WebSocket.OPEN) {
+          websocket.send(JSON.stringify({ action: 'pong' }))
+        }
         return
       }
       console.debug(message)

apps/browser/src/manifest.json

@@ -4,7 +4,7 @@
   "name": "Autofill for Code Web Chat",
   "short_name": "CWC",
   "description": "Got tired with copy and paste? Enable prompt autofill!",
-  "version": "2026.7.1",
+  "version": "2026.7.2",
   "homepage_url": "https://github.com/robertpiosik/CodeWebChat",
   "icons": {
     "16": "icons/icon-16.png",

apps/editor/src/services/websocket-manager.ts

@@ -5,6 +5,7 @@ import * as http from 'http'
 import * as path from 'path'
 import * as net from 'net'
 import {
+  ApplyResponseMessage,
   ConnectedBrowser,
   InitializeChatMessage,
   WebSocketMessage
@@ -184,6 +185,14 @@ export class WebSocketManager {
     this.client.on('message', async (data) => {
       try {
         const message = JSON.parse(data.toString()) as WebSocketMessage
+
+        if (message.action === 'ping') {
+          if (this.client?.readyState === WebSocket.WebSocket.OPEN) {
+            this.client.send(JSON.stringify({ action: 'pong' }))
+          }
+          return
+        }
+
         Logger.info({
           function_name: '_connect_as_client',
           message: 'Incoming WS message',
@@ -200,9 +209,10 @@ export class WebSocketManager {
           message.action == 'apply-response' ||
           (message.action as any) == 'apply-chat-response' // Backward compatibility 20.07.26
         ) {
+          const apply_msg = message as ApplyResponseMessage
           vscode.commands.executeCommand('codeWebChat.applyResponse', {
-            raw_instructions: message.raw_instructions,
-            url: message.url
+            raw_instructions: apply_msg.raw_instructions,
+            url: apply_msg.url
           } as ApplyResponseCommandArgs)
         }
       } catch (error) {

apps/editor/src/services/websocket-server-process.ts

@@ -5,16 +5,31 @@ const WebSocket = require('ws')
 
 import { DEFAULT_PORT, SECURITY_TOKENS } from '@shared/constants/websocket'
 
+const is_version_gte = (v: string, target: string) => {
+  if (v === 'unknown') return false
+  const vParts = v.split('.').map(Number)
+  const tParts = target.split('.').map(Number)
+  for (let i = 0; i < Math.max(vParts.length, tParts.length); i++) {
+    const p1 = vParts[i] || 0
+    const p2 = tParts[i] || 0
+    if (p1 > p2) return true
+    if (p1 < p2) return false
+  }
+  return true
+}
+
 interface BrowserClient {
   ws: WebSocket
   version: string
   id: number
   user_agent: string
+  is_alive: boolean
 }
 
 interface VSCodeClient {
   ws: WebSocket
   client_id: number
+  is_alive: boolean
 }
 
 class WebSocketServer {
@@ -88,7 +103,7 @@ class WebSocketServer {
 
     this.connections.add(ws)
 
-    ws.on('message', (message: any) => this._handle_message(message))
+    ws.on('message', (message: any) => this._handle_message(message, ws))
     ws.on('close', () => this._handle_disconnection(ws, is_browser_client))
   }
 
@@ -99,7 +114,13 @@ class WebSocketServer {
     this.browser_client_counter++
     const id = this.browser_client_counter
 
-    const client: BrowserClient = { ws, version, id, user_agent }
+    const client: BrowserClient = {
+      ws,
+      version,
+      id,
+      user_agent,
+      is_alive: true
+    }
     this.browser_clients.set(id, client)
 
     this._notify_vscode_clients()
@@ -108,7 +129,7 @@ class WebSocketServer {
 
   private _handle_vscode_connection(ws: WebSocket) {
     const client_id = this._generate_client_id()
-    this.vscode_clients.set(client_id, { ws, client_id })
+    this.vscode_clients.set(client_id, { ws, client_id, is_alive: true })
 
     ws.send(
       JSON.stringify({
@@ -136,9 +157,30 @@ class WebSocketServer {
     }
   }
 
-  private _handle_message(message: any) {
+  private _handle_message(message: any, ws: any) {
     const msg_string = message.toString()
-    const msg_data = JSON.parse(msg_string)
+    let msg_data
+    try {
+      msg_data = JSON.parse(msg_string)
+    } catch {
+      return
+    }
+
+    if (msg_data.action === 'pong') {
+      for (const client of this.browser_clients.values()) {
+        if (client.ws === ws) {
+          client.is_alive = true
+          return
+        }
+      }
+      for (const client of this.vscode_clients.values()) {
+        if (client.ws === ws) {
+          client.is_alive = true
+          return
+        }
+      }
+      return
+    }
 
     if (msg_data.action == 'initialize-chat') {
       if (msg_data.target_browser_id) {
@@ -231,12 +273,26 @@ class WebSocketServer {
     const ping_message = JSON.stringify({ action: 'ping' })
 
     for (const client of this.browser_clients.values()) {
+      const expects_pong = is_version_gte(client.version, '2026.7.2')
+
+      if (expects_pong) {
+        if (!client.is_alive) {
+          ;(client.ws as any).terminate()
+          continue
+        }
+        client.is_alive = false
+      }
       if (client.ws.readyState === WebSocket.OPEN) {
         client.ws.send(ping_message)
       }
     }
 
     for (const client of this.vscode_clients.values()) {
+      if (!client.is_alive) {
+        ;(client.ws as any).terminate()
+        continue
+      }
+      client.is_alive = false
       if (client.ws.readyState == WebSocket.OPEN) {
         client.ws.send(ping_message)
       }

packages/shared/src/types/websocket-message.ts

@@ -47,8 +47,18 @@ export type ClientIdAssignmentMessage = {
   client_id: number
 }
 
+export type PingMessage = {
+  action: 'ping'
+}
+
+export type PongMessage = {
+  action: 'pong'
+}
+
 export type WebSocketMessage =
   | InitializeChatMessage
   | BrowserConnectionStatusMessage
   | ClientIdAssignmentMessage
   | ApplyResponseMessage
+  | PingMessage
+  | PongMessage