Real-time collaboration: Remove ghost awareness state explicitly when refreshing (WordPress#75883)

* Explicitly send a null awareness state on pagehide to remove stale cursors

* Add postSyncUpdateNonBlocking instead of sendDisconnect, construct sync payload in caller

* Add backport changelog file

Co-authored-by: alecgeatches <alecgeatches@git.wordpress.org>
Co-authored-by: chriszarate <czarate@git.wordpress.org>

Author: 3 people

backport-changelog/7.0/11049.md

@@ -0,0 +1,3 @@
+https://github.com/WordPress/wordpress-develop/pull/11049
+
+* https://github.com/WordPress/gutenberg/pull/75883

lib/compat/wordpress-7.0/class-wp-http-polling-sync-server.php

@@ -124,7 +124,7 @@ public function register_routes(): void {
 				),
 				'awareness' => array(
 					'required' => true,
-					'type'     => 'object',
+					'type'     => array( 'object', 'null' ),
 				),
 				'client_id' => array(
 					'minimum'  => 1,

packages/sync/src/providers/http-polling/polling-manager.ts

@@ -25,6 +25,7 @@ import {
 	createSyncUpdate,
 	createUpdateQueue,
 	postSyncUpdate,
+	postSyncUpdateNonBlocking,
 } from './utils';
 
 const POLLING_INTERVAL_IN_MS = 1000; // 1 second or 1000 milliseconds
@@ -240,6 +241,25 @@ function processDocUpdate(
 
 let isPolling = false;
 let pollInterval = POLLING_INTERVAL_IN_MS;
+let pageHideListenerRegistered = false;
+
+/**
+ * Send a disconnect signal for all registered rooms when the page is
+ * being unloaded. Uses `sendBeacon` so the request survives navigation.
+ */
+function handlePageHide(): void {
+	const rooms = Array.from( roomStates.entries() ).map(
+		( [ room, state ] ) => ( {
+			after: 0,
+			awareness: null,
+			client_id: state.clientId,
+			room,
+			updates: [],
+		} )
+	);
+
+	postSyncUpdateNonBlocking( { rooms } );
+}
 
 function poll(): void {
 	isPolling = true;
@@ -394,7 +414,6 @@ function registerRoom( {
 	function unregister(): void {
 		doc.off( 'update', onDocUpdate );
 		awareness.off( 'change', onAwarenessUpdate );
-		// TODO: poll will null awareness state to trigger removal
 		updateQueue.clear();
 	}
 
@@ -421,14 +440,40 @@ function registerRoom( {
 	awareness.on( 'change', onAwarenessUpdate );
 	roomStates.set( room, roomState );
 
+	if ( ! pageHideListenerRegistered ) {
+		window.addEventListener( 'pagehide', handlePageHide );
+		pageHideListenerRegistered = true;
+	}
+
 	if ( ! isPolling ) {
 		poll();
 	}
 }
 
 function unregisterRoom( room: string ): void {
-	roomStates.get( room )?.unregister();
-	roomStates.delete( room );
+	const state = roomStates.get( room );
+	if ( state ) {
+		// Send a disconnect signal so the server removes this client's
+		// awareness entry immediately instead of waiting for the timeout.
+		const rooms = [
+			{
+				after: 0,
+				awareness: null,
+				client_id: state.clientId,
+				room,
+				updates: [],
+			},
+		];
+
+		postSyncUpdateNonBlocking( { rooms } );
+		state.unregister();
+		roomStates.delete( room );
+	}
+
+	if ( roomStates.size === 0 && pageHideListenerRegistered ) {
+		window.removeEventListener( 'pagehide', handlePageHide );
+		pageHideListenerRegistered = false;
+	}
 }
 
 export const pollingManager: PollingManager = {

packages/sync/src/providers/http-polling/utils.ts

@@ -126,3 +126,24 @@ export async function postSyncUpdate(
 
 	return await response.json();
 }
+
+/**
+ * Fire-and-forget variant of postSyncUpdate. Uses `keepalive` so the
+ * request survives page unload, and errors are silently ignored.
+ *
+ * @param payload The sync payload to send.
+ */
+export function postSyncUpdateNonBlocking( payload: SyncPayload ): void {
+	if ( payload.rooms.length === 0 ) {
+		return;
+	}
+
+	apiFetch( {
+		body: JSON.stringify( payload ),
+		headers: { 'Content-Type': 'application/json' },
+		keepalive: true,
+		method: 'POST',
+		parse: false,
+		path: SYNC_API_PATH,
+	} ).catch( () => {} );
+}