Add experimental method to prepare connection in order to speed up subsequent ws connection (#469)

* add method to prepare connection for speeding up subsequent first connection attempt

* changeset

* update comment

* mark as experimental

* update changeset

Author: lukasIO

.changeset/smooth-dots-breathe.md

@@ -0,0 +1,5 @@
+---
+'livekit-client': patch
+---
+
+Add experimental method to prepare connection for speeding up subsequent first connection attempt

example/sample.ts

@@ -98,6 +98,11 @@ const appActions = {
   ): Promise<Room | undefined> => {
     const room = new Room(roomOptions);
 
+    startTime = Date.now();
+    await room.prepareConnection(url);
+    const prewarmTime = Date.now() - startTime;
+    appendLog(`prewarmed connection in ${prewarmTime}ms`);
+
     room
       .on(RoomEvent.ParticipantConnected, participantConnected)
       .on(RoomEvent.ParticipantDisconnected, participantDisconnected)
@@ -149,6 +154,8 @@ const appActions = {
         renderScreenShare(room);
       })
       .on(RoomEvent.SignalConnected, async () => {
+        const signalConnectionTime = Date.now() - startTime;
+        appendLog(`signal connection established in ${signalConnectionTime}ms`);
         if (shouldPublish) {
           await Promise.all([
             room.localParticipant.setCameraEnabled(true),
@@ -159,7 +166,6 @@ const appActions = {
       });
 
     try {
-      startTime = Date.now();
       await room.connect(url, token, connectOptions);
       const elapsed = Date.now() - startTime;
       appendLog(

src/room/Room.ts

@@ -218,6 +218,18 @@ class Room extends (EventEmitter as new () => TypedEmitter<RoomEventCallbacks>)
     return DeviceManager.getInstance().getDevices(kind, requestPermissions);
   }
 
+  /**
+   * prepares the connection to the livekit server by sending a HEAD request in order to
+   * 1. speed up DNS resolution
+   * 2. speed up TLS setup
+   * on the actual connection request
+   * throws an error if server is not reachable after the request timeout
+   * @experimental
+   */
+  async prepareConnection(url: string) {
+    await fetch(`http${url.substring(2)}`, { method: 'HEAD' });
+  }
+
   connect = (url: string, token: string, opts?: RoomConnectOptions): Promise<void> => {
     if (this.state === ConnectionState.Connected) {
       // when the state is reconnecting or connected, this function returns immediately