feat: Add bidirectional communication to exchange texts

flottform/forms/src/default-component.ts

@@ -305,8 +305,9 @@ const handleTextInputStates = ({
 	if (id) {
 		flottformItem.setAttribute('id', id);
 	}
-	flottformTextInputHost.on('done', (message: string) => {
-		statusInformation.innerHTML = onSuccessText ?? `✨ You have succesfully submitted your message`;
+	flottformTextInputHost.on('text-received', (message: string) => {
+		statusInformation.innerHTML =
+			onSuccessText ?? `✨ You have succesfully submitted your message: ${message}`;
 		statusInformation.appendChild(refreshChannelButton);
 		flottformItem.replaceChildren(statusInformation);
 	});

flottform/forms/src/flottform-channel-client.ts

@@ -16,6 +16,8 @@ type Listeners = {
 	'connecting-to-host': [];
 	connected: [];
 	'connection-impossible': [];
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	'receiving-data': [e: any];
 	done: [];
 	disconnected: [];
 	error: [e: string];
@@ -96,15 +98,8 @@ export class FlottformChannelClient extends EventEmitter<Listeners> {
 			this.logger.info(`ondatachannel: ${e.channel}`);
 			this.changeState('connected');
 			this.dataChannel = e.channel;
-			// Set the maximum amount of data waiting inside the datachannel's buffer
-			this.dataChannel.bufferedAmountLowThreshold = this.BUFFER_THRESHOLD;
-			// Set the listener to listen then emit an event when the buffer has more space available and can be used to send more data
-			this.dataChannel.onbufferedamountlow = () => {
-				this.emit('bufferedamountlow');
-			};
-			this.dataChannel.onopen = (e) => {
-				this.logger.info(`ondatachannel - onopen: ${e.type}`);
-			};
+			this.configureDataChannel();
+			this.setupDataChannelListener();
 		};
 
 		this.changeState('sending-client-info');
@@ -122,11 +117,41 @@ export class FlottformChannelClient extends EventEmitter<Listeners> {
 		this.changeState('disconnected');
 	};
 
-	// sendData = (data: string | Blob | ArrayBuffer | ArrayBufferView) => {
+	private setupDataChannelListener = () => {
+		if (!this.dataChannel) {
+			this.changeState(
+				'error',
+				'dataChannel is not defined. Unable to setup the listeners for the data channel'
+			);
+			return;
+		}
+
+		this.dataChannel.onmessage = (e) => {
+			// Handling the incoming data from the Host depends on the use case.
+			this.emit('receiving-data', e);
+		};
+	};
+
+	private configureDataChannel = () => {
+		if (!this.dataChannel) {
+			this.changeState('error', 'dataChannel is not defined! Unable to configure it!');
+			return;
+		}
+		// Set the maximum amount of data waiting inside the datachannel's buffer
+		this.dataChannel.bufferedAmountLowThreshold = this.BUFFER_THRESHOLD;
+		// Set the listener to listen then emit an event when the buffer has more space available and can be used to send more data
+		this.dataChannel.onbufferedamountlow = () => {
+			this.emit('bufferedamountlow');
+		};
+		this.dataChannel.onopen = (e) => {
+			this.logger.info(`ondatachannel - onopen: ${e.type}`);
+		};
+	};
+
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any
 	sendData = (data: any) => {
-		if (this.dataChannel == null) {
-			this.changeState('error', 'dataChannel is null. Unable to send the file to the Host!');
+		if (!this.dataChannel) {
+			this.changeState('error', 'dataChannel is not defined! Unable to send the file to the Host!');
 			return;
 		} else if (!this.canSendMoreData()) {
 			this.logger.warn('Data channel is full! Cannot send data at the moment');

flottform/forms/src/flottform-channel-host.ts

@@ -21,6 +21,7 @@ export class FlottformChannelHost extends EventEmitter<FlottformEventMap> {
 	private openPeerConnection: RTCPeerConnection | null = null;
 	private dataChannel: RTCDataChannel | null = null;
 	private pollForIceTimer: NodeJS.Timeout | number | null = null;
+	private BUFFER_THRESHOLD = 128 * 1024; // 128KB buffer threshold (maximum of 4 chunks in the buffer waiting to be sent over the network)
 
 	constructor({
 		flottformApi,
@@ -70,6 +71,10 @@ export class FlottformChannelHost extends EventEmitter<FlottformEventMap> {
 		this.openPeerConnection = new RTCPeerConnection(this.rtcConfiguration);
 
 		this.dataChannel = this.createDataChannel();
+		if (this.dataChannel) {
+			this.configureDataChannel();
+			this.setupDataChannelListener();
+		}
 
 		const session = await this.openPeerConnection.createOffer();
 		await this.openPeerConnection.setLocalDescription(session);
@@ -120,6 +125,40 @@ export class FlottformChannelHost extends EventEmitter<FlottformEventMap> {
 		};
 	};
 
+	private configureDataChannel = () => {
+		if (this.dataChannel == null) {
+			this.changeState('error', 'dataChannel is null. Unable to setup the configure it!');
+			return;
+		}
+		// Set the maximum amount of data waiting inside the datachannel's buffer
+		this.dataChannel.bufferedAmountLowThreshold = this.BUFFER_THRESHOLD;
+		// Set the listener to listen then emit an event when the buffer has more space available and can be used to send more data
+		this.dataChannel.onbufferedamountlow = () => {
+			this.emit('bufferedamountlow');
+		};
+		this.dataChannel.onopen = (e) => {
+			this.logger.info(`ondatachannel - onopen: ${e.type}`);
+		};
+	};
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	sendData = (data: any) => {
+		if (this.dataChannel == null) {
+			this.changeState('error', 'dataChannel is null. Unable to send the data to the Client!');
+			return;
+		} else if (!this.canSendMoreData()) {
+			this.logger.warn('Data channel is full! Cannot send data at the moment');
+			return;
+		}
+		this.dataChannel.send(data);
+	};
+
+	canSendMoreData = () => {
+		return (
+			this.dataChannel &&
+			this.dataChannel.bufferedAmount < this.dataChannel.bufferedAmountLowThreshold
+		);
+	};
+
 	private setupHostIceGathering = (
 		putHostInfoUrl: string,
 		hostKey: string,
@@ -279,7 +318,7 @@ export class FlottformChannelHost extends EventEmitter<FlottformEventMap> {
 
 		this.dataChannel.onerror = (e) => {
 			this.logger.log('channel.onerror', e);
-			this.changeState('error', { message: 'file-transfer' });
+			this.changeState('error', { message: e.error.message });
 		};
 	};
 

flottform/forms/src/flottform-text-input-client.ts

@@ -2,10 +2,11 @@ import { FlottformChannelClient } from './flottform-channel-client';
 import { EventEmitter, Logger, POLL_TIME_IN_MS } from './internal';
 
 type Listeners = {
+	init: [];
 	connected: [];
 	'webrtc:connection-impossible': [];
-	sending: []; // Emitted to signal the start of sending the file(s)
-	done: [];
+	'text-transferred': [text: string]; // Emitted to signal the transfer of one text TO the Host.
+	'text-received': [text: string]; // Emitted to signal the reception of one text FROM the Host.
 	disconnected: [];
 	error: [e: string];
 };
@@ -46,13 +47,19 @@ export class FlottformTextInputClient extends EventEmitter<Listeners> {
 
 	sendText = (text: string) => {
 		// For now, I didn't handle very large texts since for most use cases the text won't exceed the size of 1 chunk ( 16KB )
-		this.emit('sending');
 		this.channel?.sendData(text);
-		this.emit('done');
+		this.emit('text-transferred', text);
+	};
+
+	private handleIncomingData = (e: MessageEvent) => {
+		// We suppose that the data received is small enough to be all included in 1 message
+		this.emit('text-received', e.data);
 	};
 
 	private registerListeners = () => {
-		this.channel?.on('init', () => {});
+		this.channel?.on('init', () => {
+			this.emit('init');
+		});
 		this.channel?.on('retrieving-info-from-endpoint', () => {});
 		this.channel?.on('sending-client-info', () => {});
 		this.channel?.on('connecting-to-host', () => {});
@@ -62,8 +69,11 @@ export class FlottformTextInputClient extends EventEmitter<Listeners> {
 		this.channel?.on('connection-impossible', () => {
 			this.emit('webrtc:connection-impossible');
 		});
+		this.channel?.on('receiving-data', (e) => {
+			this.handleIncomingData(e);
+		});
 		this.channel?.on('done', () => {
-			this.emit('done');
+			//this.emit('done');
 		});
 		this.channel?.on('disconnected', () => {
 			this.emit('disconnected');

flottform/forms/src/flottform-text-input-host.ts

@@ -2,9 +2,9 @@ import { FlottformChannelHost } from './flottform-channel-host';
 import { BaseInputHost, BaseListeners, Logger, POLL_TIME_IN_MS } from './internal';
 
 type Listeners = BaseListeners & {
-	done: [data: string];
+	'text-transferred': [text: string]; // Emitted to signal the transfer of one text TO the Client.
+	'text-received': [text: string]; // Emitted to signal the reception of one text FROM the Client.
 	'webrtc:waiting-for-text': [];
-	receive: [];
 	'webrtc:waiting-for-data': [];
 };
 
@@ -67,10 +67,15 @@ export class FlottformTextInputHost extends BaseInputHost<Listeners> {
 		return this.qrCode;
 	};
 
+	sendText = (text: string) => {
+		// For now, I didn't handle very large texts since for most use cases the text won't exceed the size of 1 chunk ( 16KB )
+		this.channel?.sendData(text);
+		this.emit('text-transferred', text);
+	};
+
 	private handleIncomingData = (e: MessageEvent) => {
-		this.emit('receive');
 		// We suppose that the data received is small enough to be all included in 1 message
-		this.emit('done', e.data);
+		this.emit('text-received', e.data);
 		if (this.inputField) {
 			this.inputField.value = e.data;
 			const event = new Event('change');

flottform/forms/src/internal.ts

@@ -122,6 +122,7 @@ export type FlottformEventMap = {
 	error: [error: Error];
 	connected: [];
 	disconnected: [];
+	bufferedamountlow: [];
 };
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any

servers/demo/src/api.ts

@@ -21,3 +21,7 @@ export const createExpenseReportClientUrl = async ({ endpointId }: { endpointId:
 export const createDeExpenseReportClientUrl = async ({ endpointId }: { endpointId: string }) => {
 	return `${window.location.origin}${base}/belegeinreichung-client/${endpointId}`;
 };
+
+export const createFlottformMessagingClientUrl = async ({ endpointId }: { endpointId: string }) => {
+	return `${window.location.origin}${base}/flottform-messaging-client/${endpointId}`;
+};

servers/demo/src/routes/+page.svelte

@@ -64,5 +64,10 @@
 			title="Customized default UI"
 			description="See how you can tailor Flottform's default UI to better match your design, while still retaining all the powerful features of the original interface. This demo lets you explore how easy it is to adapt the default elements to fit seamlessly with your brand's style."
 		/>
+		<DemoLink
+			href="{base}/flottform-messaging"
+			title="Flottform Messaging"
+			description="See how you can use Flottform to build a simple messaging application!"
+		/>
 	</div>
 </section>