completed OT client base functionality (#193)

Author: Varun-Sethu

backend/client/.eslintrc.js renamed to backend/OTClient/.eslintrc.js

@@ -6,6 +6,7 @@ module.exports = {
   extends: [
     'standard'
   ],
+  semi: [1, "always"],
   parser: '@typescript-eslint/parser',
   parserOptions: {
     ecmaVersion: 'latest',

backend/client/.prettierrc renamed to backend/OTClient/.prettierrc

@@ -0,0 +1,94 @@
+/**
+ * Client server implementation
+ */
+
+import { io, Socket } from 'socket.io-client';
+import { Operation } from './operation';
+import { OperationQueue } from './operationQueue';
+import { bind } from './option';
+
+const ACK_TIMEOUT_DURATION = 10_000;
+
+/*
+	The Client-Server protocol
+		- The general outline of our client-server protocol is as follows:
+			- Client wants to send an operation (it applies it locally)
+			- If there are any operations in the op buffer it pushes it to the end
+			- If there aren't it sends it directly to the server
+
+			- The client then awaits for an acknowledgment
+			- While it waits of an acknowledgement it queues everything in the buffer
+			- All incoming operations from the server are transformed against buffer operations (As they haven't been applied yet)
+			- When at acknowledgement is received the client then sends the next queued operation to the server
+*/
+
+export default class Client {
+  	// TODO: Handle destruction / closing of the websocket
+	constructor (opCallback: (op: Operation) => void) {
+		this.socket = io(`ws://localhost:8080/edit?document=${document}`);
+		
+		this.socket.on('connect', this.handleConnection);
+		this.socket.on('ack', this.handleAck);
+		this.socket.on('op', this.handleOperation (opCallback));
+  	}
+
+	// handleAck handles an incoming acknowledgement operation
+	private handleAck = () => {
+		clearTimeout(this.timeoutID);
+		this.pendingAcknowledgement = false;
+		
+		// dequeue the current operation and send a new one if required
+		this.queuedOperations.dequeueOperation();
+		bind((op) => this.sendToServer(op), this.queuedOperations.peekHead());
+	}
+
+	// handleOperation handles an incoming operation from the server
+	private handleOperation = (opCallback: (op: Operation) => void) => (operation: Operation) => {
+		const transformedOp = this.queuedOperations.applyAndTransformIncomingOperation(operation);
+		opCallback(transformedOp);
+
+		this.appliedOperations += 1;
+	};
+
+	// handleConnection handles the even when the connection opens
+	private handleConnection = () => {
+		console.log(
+			`Socket ${this.socket.id} connected: ${this.socket.connected}`
+		);
+	};
+
+  	/**
+  	 * Send an operation from client to centralised server through websocket
+  	 *
+  	 * @param operation the operation the client wants to send
+  	 */
+  	public pushOperation = (operation: Operation) => {
+		// Note that if there aren't any pending acknowledgements then the operation queue will be empty
+		this.queuedOperations.enqueueOperation(operation);
+		
+		if (!this.pendingAcknowledgement) {
+			this.sendToServer(operation);
+		}
+ 	}
+
+	// sendToServer pushes an operation to the server
+	private sendToServer = (operation: Operation) => {
+		this.pendingAcknowledgement = true;
+
+		this.socket.send(JSON.stringify({ operation, appliedOperations: this.appliedOperations }));
+		this.timeoutID = setTimeout(() => {
+				throw new Error(`Did not receive ACK after ${ACK_TIMEOUT_DURATION} ms!`);
+		  },
+		  ACK_TIMEOUT_DURATION,
+		  'finish'
+		);
+	}
+
+	private socket: Socket;
+
+	private queuedOperations: OperationQueue = new OperationQueue();
+	private pendingAcknowledgement = false;
+	private appliedOperations = 0;
+	
+	private timeoutID: number = NaN;
+}

backend/OTClient/client.ts

@@ -0,0 +1,7 @@
+export interface Operation {
+	operation: string;
+	index: number;
+}
+
+
+export const transform = (a: Operation, b: Operation): [Operation, Operation] => [{ operation: 'add', index: 3}, { operation: 'add', index: 3}];

backend/OTClient/operation.ts

@@ -0,0 +1,46 @@
+import { Operation, transform } from './operation'
+import { None, Option, Some } from './option'
+
+// OperationQueue is a simple data structure of the maintenance of outgoing operations, new operations are pushed to this queue
+// and when and incoming operation from the server applies that operation is transformed against all elements of this queue
+export class OperationQueue {
+    
+    // queueOperation pushes an operation to the end of the operation queue
+    public enqueueOperation = (operation: Operation) => 
+        this.operationQueue.push(operation); 
+    
+    // applyIncomingOperation takes an incoming operation from the server and applies
+    // it to all elements of the queue, it returns the serverOp transformed against all operations
+    // in the operation queue
+    public applyAndTransformIncomingOperation = (serverOp: Operation): Operation => {
+        const { newQueue, newOp } = 
+            this.operationQueue.reduce(
+                (prevSet, op) => { 
+                    const newOp = transform(op, prevSet.newOp); 
+                    return { newQueue: prevSet.newQueue.concat(newOp), newOp: newOp[1] }; 
+                },
+                { newQueue: [] as Operation[], newOp: serverOp}
+            );
+
+        this.operationQueue = newQueue;
+        return newOp;
+    }
+
+    // isEmpty determines if there are any operations queued or not
+    public isEmpty = (): boolean => this.operationQueue.length === 0;
+
+    // dequeueOperation removes the operation at the head of the operation queue
+    public dequeueOperation = (): Option<Operation> =>
+        this.isEmpty()
+            ? None()
+            : Some(this.operationQueue.shift());
+
+    // peekHead just peeks at the head of the operation queue
+    public peekHead = (): Option<Operation> => 
+        this.isEmpty()
+            ? None()
+            : Some(this.operationQueue[0]);
+
+    // operationQueue is our internal operation queue
+    private operationQueue = [] as Operation[];
+}

backend/OTClient/operationQueue.ts

@@ -0,0 +1,10 @@
+// Type definitions for the option type
+export type Option<T> = T | undefined;
+export const Some = <T>(x: T) : Option<T> => x;
+export const None = <T>() : Option<T> => undefined;
+
+// Optional Bind functions
+export const bind = <T, V>(f: (x: T) => V, y: Option<T>): Option<V> =>
+    y !== undefined
+        ? Some(f(y))
+        : None();