Add: PHP/HTTP signaling server for collaborative editing

lib/load.php

@@ -199,3 +199,4 @@ function gutenberg_is_experiment_enabled( $name ) {
 require __DIR__ . '/block-supports/duotone.php';
 require __DIR__ . '/block-supports/shadow.php';
 require __DIR__ . '/block-supports/behaviors.php';
+require __DIR__ . '/sync/endpoint.php';

lib/sync/endpoint.php

@@ -0,0 +1,174 @@
+<?php
+ini_set('display_errors', 1);
+ini_set('display_startup_errors', 1);
+error_reporting(E_ALL);
+
+
+function gutenberg_get_contents_from_file_descriptor( $fd ) {
+    $contents_raw = stream_get_contents($fd);
+    $return = array();
+    if ( $contents_raw  ) {
+        $return = unserialize($contents_raw);
+    }
+    return $return;
+}
+
+function gutenberg_save_contents_to_file_descriptor( $fd, $contents ) {
+    rewind( $fd );
+    $data = serialize($contents);
+    fwrite( $fd, $data );
+    ftruncate($fd, strlen($data));
+}
+
+function gutenberg_wp_ajax_signaling_server() {
+    $subscriber_to_messages_path = sys_get_temp_dir() . DIRECTORY_SEPARATOR . 'subscribers_to_messages.txt';
+    $topics_to_subscribers_path = sys_get_temp_dir() . DIRECTORY_SEPARATOR . 'topics_to_subscribers.txt';
+    $subscribers_to_last_connection_path = sys_get_temp_dir() . DIRECTORY_SEPARATOR . 'subscribers_to_last_connection.txt';
+
+    $subscriber_id = $_REQUEST['unique'];
+    if ( ! $subscriber_id ) {
+        die('no identifier');
+    }
+
+    if ( 'GET' === $_SERVER['REQUEST_METHOD'] ) {
+        header('Content-Type: text/event-stream');
+        header('Cache-Control: no-cache');
+        while (true) {
+            echo 'retry: 1000' . PHP_EOL;
+            $fd = fopen($subscriber_to_messages_path, 'c+');
+            flock($fd, LOCK_EX );
+            $subscriber_to_messages = gutenberg_get_contents_from_file_descriptor($fd);
+            if( $subscriber_to_messages[$subscriber_id] && count($subscriber_to_messages[$subscriber_id]) > 0 ) {
+                $messages = array_map( 'json_encode', $subscriber_to_messages[$subscriber_id] );
+                $subscriber_to_messages[$subscriber_id] = array();
+                $data;
+                if( count($messages) > 1 ) {
+                    $data = implode('|MULTIPLE|', $messages);
+                } else {
+                    $data = $messages[0];
+                }
+                if ( $data ) {
+                    echo 'id: ' . time() . PHP_EOL;
+                    echo 'event: message' . PHP_EOL;
+                    echo 'data: ', $data, PHP_EOL, PHP_EOL;
+                }
+                gutenberg_save_contents_to_file_descriptor($fd , $subscriber_to_messages);
+
+            }
+            flock($fd, LOCK_UN);
+            fclose($fd );
+            flush();
+            sleep(1); 
+        }
+    } else {
+        $raw_data = $_POST['data'];
+        $message = json_decode( wp_unslash( $raw_data ), true );
+        if ( ! $message ) {
+            die('no message');
+        }
+        $fd_topics_subscriber = fopen($topics_to_subscribers_path, 'c+');
+        flock($fd_topics_subscriber, LOCK_EX );
+        $topics_to_subscribers = gutenberg_get_contents_from_file_descriptor($fd_topics_subscriber);
+
+        switch( $message['type'] ) {
+            case 'subscribe':
+                $topics = $message['topics'];
+                 foreach( $topics as $topic ) {
+                    if ( ! $topics_to_subscribers[$topic] ) {
+                        $topics_to_subscribers[$topic] = array();
+                    }
+                    $topics_to_subscribers[$topic] = array_unique(array_merge($topics_to_subscribers[$topic], array($subscriber_id)));
+                }
+                gutenberg_save_contents_to_file_descriptor($fd_topics_subscriber, $topics_to_subscribers);
+                break;
+            case 'unsubscribe':
+                $topics = $message['topics'];
+                foreach( $topics as $topic ) {
+                    if ( $topics_to_subscribers[$topic] ) {
+                        $topics_to_subscribers[$topic] = array_diff($topics_to_subscribers[$topic], array($subscriber_id));
+                    }
+                }
+                gutenberg_save_contents_to_file_descriptor($fd_topics_subscriber,$topics_to_subscribers);
+                break;
+            case 'publish':
+                $fd_subscriber_messages = fopen($subscriber_to_messages_path, 'c+');
+                flock($fd_subscriber_messages, LOCK_EX );
+                $subscriber_to_messages = gutenberg_get_contents_from_file_descriptor($fd_subscriber_messages);
+                $topic = $message['topic'];
+                $receivers = $topics_to_subscribers[$topic];
+                if ( $receivers ) {
+                    $message['clients'] = count($receivers);
+                    foreach( $receivers as $receiver ) {
+                        if ( ! $subscriber_to_messages[$receiver] ) {
+                            $subscriber_to_messages[$receiver] = array();
+                        }
+                        $subscriber_to_messages[$receiver][] = $message;
+                    }
+                    gutenberg_save_contents_to_file_descriptor($fd_subscriber_messages, $subscriber_to_messages );
+                }
+                flock($fd_subscriber_messages, LOCK_UN);
+                fclose($fd_subscriber_messages );
+                break;
+            case 'ping':
+                $fd_subscriber_messages = fopen($subscriber_to_messages_path, 'c+');
+                flock($fd_subscriber_messages, LOCK_EX );
+                $subscriber_to_messages = gutenberg_get_contents_from_file_descriptor($fd_subscriber_messages);
+                if ( ! $subscriber_to_messages[$subscriber_id] ) {
+                    $subscriber_to_messages[$subscriber_id] = array();
+                }
+                $subscriber_to_messages[$subscriber_id][] = array( 'type' => 'pong' );
+                gutenberg_save_contents_to_file_descriptor($fd_subscriber_messages, $subscriber_to_messages );
+                flock($fd_subscriber_messages, LOCK_UN);
+                fclose($fd_subscriber_messages );
+                break;
+        }
+        flock($fd_topics_subscriber, LOCK_UN );
+        fclose($fd_topics_subscriber);
+    }
+
+    $fd_subscribers_last_connection = fopen($subscribers_to_last_connection_path, 'c+');
+    flock($fd_subscribers_last_connection, LOCK_EX );
+    $subscribers_to_last_connection_time = gutenberg_get_contents_from_file_descriptor($fd_subscribers_last_connection);
+    $subscribers_to_last_connection_time[$subscriber_id] = time();
+    $needs_cleanup = false;
+    foreach( $subscribers_to_last_connection_time as $subscriber_id => $last_connection_time ) {
+        if ( $last_connection_time < time() - 10 ) {
+            unset($subscribers_to_last_connection_time[$subscriber_id]);
+            $needs_cleanup = true;
+        }
+    }
+    if( $needs_cleanup ) {
+        $fd_subscriber_messages = fopen($subscriber_to_messages_path, 'c+');
+        flock($fd_subscriber_messages, LOCK_EX );
+        $subscriber_to_messages = gutenberg_get_contents_from_file_descriptor($fd_subscriber_messages);
+        foreach( $subscriber_to_messages as $subscriber_id => $messages ) {
+            if ( ! isset( $subscribers_to_last_connection_time[$subscriber_id] ) ) {
+                unset($subscriber_to_messages[$subscriber_id]);
+            }
+        }
+        gutenberg_save_contents_to_file_descriptor($fd_subscriber_messages, $subscriber_to_messages );
+        flock($fd_subscriber_messages, LOCK_UN);
+        fclose($fd_subscriber_messages );
+
+
+        $fd_topics_subscriber = fopen($topics_to_subscribers_path, 'c+');
+        flock($fd_topics_subscriber, LOCK_EX );
+        $topics_to_subscribers = gutenberg_get_contents_from_file_descriptor($fd_topics_subscriber);
+        foreach( $topics_to_subscribers as $topic => $subscribers ) {
+            foreach( $subscribers as $subscriber_id ) {
+                if ( ! isset( $subscribers_to_last_connection_time[$subscriber_id] ) ) {
+                    $topics_to_subscribers[$topic] = array_diff($topics_to_subscribers[$topic], array($subscriber_id));
+                }
+            }
+        }
+        gutenberg_save_contents_to_file_descriptor($fd_topics_subscriber, $topics_to_subscribers );
+        flock($fd_topics_subscriber, LOCK_UN);
+        fclose($fd_topics_subscriber );
+    }
+
+    gutenberg_save_contents_to_file_descriptor($fd_subscribers_last_connection, $subscribers_to_last_connection_time );
+    flock($fd_subscribers_last_connection, LOCK_UN);
+    fclose($fd_subscribers_last_connection );
+}
+
+add_action( 'wp_ajax_gutenberg_signaling_server','gutenberg_wp_ajax_signaling_server');

packages/sync/package.json

@@ -30,9 +30,16 @@
 		"@babel/runtime": "^7.16.0",
 		"y-indexeddb": "~9.0.11",
 		"y-webrtc": "~10.2.5",
-		"yjs": "~13.6.6"
+		"yjs": "~13.6.6",
+		"lib0": "^0.2.42",
+		"y-protocols": "^1.0.5",
+		"simple-peer": "^9.11.0",
+		"@wordpress/url": "file:../url"
 	},
 	"publishConfig": {
 		"access": "public"
+	},
+	"devDependencies": {
+		"@types/simple-peer": "^9.11.5"
 	}
 }

packages/sync/src/connect-webrtc.js

@@ -1,8 +1,12 @@
 /**
  * External dependencies
  */
-// @ts-ignore
-import { WebrtcProvider } from 'y-webrtc';
+// import { WebrtcProvider } from 'y-webrtc';
+
+/**
+ * Internal dependencies
+ */
+import { WebrtcProvider } from './webrtc-http-stream-signaling';
 
 /** @typedef {import('./types').ObjectType} ObjectType */
 /** @typedef {import('./types').ObjectID} ObjectID */
@@ -20,9 +24,13 @@ import { WebrtcProvider } from 'y-webrtc';
 export function connectWebRTC( objectId, objectType, doc ) {
 	const docName = `${ objectType }-${ objectId }`;
 	new WebrtcProvider( docName, doc, {
+		signaling: [
+			//'ws://localhost:4444',
+			// @ts-ignore
+			window.wp.ajax.settings.url,
+		],
 		// @ts-ignore
 		password: window.__experimentalCollaborativeEditingSecret,
 	} );
-
 	return Promise.resolve( () => true );
 }

packages/sync/src/crypto.js

@@ -0,0 +1,125 @@
+/* eslint-env browser */
+
+/**
+ * External dependencies
+ */
+import * as encoding from 'lib0/encoding';
+import * as decoding from 'lib0/decoding';
+import * as promise from 'lib0/promise';
+import * as error from 'lib0/error';
+import * as string from 'lib0/string';
+
+/**
+ * @param {string} secret
+ * @param {string} roomName
+ * @return {PromiseLike<CryptoKey>} Crypto key.
+ */
+export const deriveKey = ( secret, roomName ) => {
+	const secretBuffer = string.encodeUtf8( secret ).buffer;
+	const salt = string.encodeUtf8( roomName ).buffer;
+	return crypto.subtle
+		.importKey( 'raw', secretBuffer, 'PBKDF2', false, [ 'deriveKey' ] )
+		.then( ( keyMaterial ) =>
+			crypto.subtle.deriveKey(
+				{
+					name: 'PBKDF2',
+					salt,
+					iterations: 100000,
+					hash: 'SHA-256',
+				},
+				keyMaterial,
+				{
+					name: 'AES-GCM',
+					length: 256,
+				},
+				true,
+				[ 'encrypt', 'decrypt' ]
+			)
+		);
+};
+
+/**
+ * @param {Uint8Array} data data to be encrypted
+ * @param {CryptoKey?} key
+ * @return {PromiseLike<Uint8Array>} encrypted, base64 encoded message
+ */
+export const encrypt = ( data, key ) => {
+	if ( ! key ) {
+		return /** @type {PromiseLike<Uint8Array>} */ (
+			promise.resolve( data )
+		);
+	}
+	const iv = crypto.getRandomValues( new Uint8Array( 12 ) );
+	return crypto.subtle
+		.encrypt(
+			{
+				name: 'AES-GCM',
+				iv,
+			},
+			key,
+			data
+		)
+		.then( ( cipher ) => {
+			const encryptedDataEncoder = encoding.createEncoder();
+			encoding.writeVarString( encryptedDataEncoder, 'AES-GCM' );
+			encoding.writeVarUint8Array( encryptedDataEncoder, iv );
+			encoding.writeVarUint8Array(
+				encryptedDataEncoder,
+				new Uint8Array( cipher )
+			);
+			return encoding.toUint8Array( encryptedDataEncoder );
+		} );
+};
+
+/**
+ * @param {Object}     data data to be encrypted
+ * @param {CryptoKey?} key
+ * @return {PromiseLike<Uint8Array>} encrypted data, if key is provided
+ */
+export const encryptJson = ( data, key ) => {
+	const dataEncoder = encoding.createEncoder();
+	encoding.writeAny( dataEncoder, data );
+	return encrypt( encoding.toUint8Array( dataEncoder ), key );
+};
+
+/**
+ * @param {Uint8Array} data
+ * @param {CryptoKey?} key
+ * @return {PromiseLike<Uint8Array>} decrypted buffer
+ */
+export const decrypt = ( data, key ) => {
+	if ( ! key ) {
+		return /** @type {PromiseLike<Uint8Array>} */ (
+			promise.resolve( data )
+		);
+	}
+	const dataDecoder = decoding.createDecoder( data );
+	const algorithm = decoding.readVarString( dataDecoder );
+	if ( algorithm !== 'AES-GCM' ) {
+		promise.reject( error.create( 'Unknown encryption algorithm' ) );
+	}
+	const iv = decoding.readVarUint8Array( dataDecoder );
+	const cipher = decoding.readVarUint8Array( dataDecoder );
+	return crypto.subtle
+		.decrypt(
+			{
+				name: 'AES-GCM',
+				iv,
+			},
+			key,
+			cipher
+		)
+		.then( ( _data ) => new Uint8Array( _data ) );
+};
+
+/**
+ * @param {Uint8Array} data
+ * @param {CryptoKey?} key
+ * @return {PromiseLike<Object>} decrypted object
+ */
+export const decryptJson = ( data, key ) =>
+	decrypt( data, key ).then( ( decryptedValue ) =>
+		decoding.readAny(
+			decoding.createDecoder( new Uint8Array( decryptedValue ) )
+		)
+	);