Promise based wrapper for Acknowledgements with inferred type

[panwauu]

I am using the typed event and thus res is inferred but it does not infer the type of the promise. So the Promise is typed Promise although the type returnData is inferred for the res.

const promise = new Promise((resolve) => {
  const timeout = setTimeout(() => { reject(new Error("Socket.io Acknowledgement timed out")) }, 1000)

  socket.emit("testEvent", 1, (res) => {
    clearTimeout(timeout)
    resolve(res)
  });
});

export interface ClientToServerEvents {
  'testEvent': (testData: number, cb: (data: returnData) => void) => void,
}

This solution does not infer types which is suboptimal but also writing this everytime is alot of overhead.
It would be nice to just call it like below and get a promise with the correct return type (with optional timeout).

const promise = socket.emitWithAck("testEvent", 1, timeout)

Do you have any better way to write this?

[darrachequesne]

Not promise based, but you could use something like this:

const withTimeout = (onSuccess, onTimeout, timeout) => {
  let called = false;

  const timer = setTimeout(() => {
    if (called) return;
    called = true;
    onTimeout();
  }, timeout);

  return (...args) => {
    if (called) return;
    called = true;
    clearTimeout(timer);
    onSuccess.apply(this, args);
  }
}

socket.emit("hello", 1, 2, withTimeout(() => {
  console.log("success!");
}, () => {
  console.log("timeout!");
}, 1000));

Reference: https://socket.io/docs/v4/emitting-events/#acknowledgements

[panwauu]

As a developer I would want it to be similar to the emit method but returning a promise with the data from the server.
The data type should be infered and we should not be allowed to call this method with a event that does not include an Acknowledgement.
The name here is not really nice. So maybe someone has a better idea?
Also in which way you supply the timeout could be different.

try {
  const data = await socket.emitWithAck('hello', timeout)
} catch (err) {
  //timeout
}

[darrachequesne]

Hmm, let's play with TypeScript then! You should be able to do something like that:

import { io, Socket } from "socket.io-client";
import type { EventNames, EventParams } from "@socket.io/component-emitter";

type Head<T extends any[]> = T extends [ ...infer Head, any ] ? Head : any[];
type Last<T extends any[]> = T extends [ ...any, infer Last ] ? Last : any;
type FirstParamType<T extends (...args: any[]) => void> = Parameters<T>[0];

class CustomSocket<L, E> extends Socket<L, E> {
  emitWithAck<Ev extends EventNames<E>>(
      timeout: number,
      ev: Ev,
      ...args: Head<EventParams<E, Ev>>
  ): Promise<FirstParamType<Last<EventParams<E, Ev>>>> {
    return new Promise(((resolve, reject) => {
      let called = false;

      const timer = setTimeout(() => {
        if (called) return;
        called = true;
        reject(new Error("timeout!"));
      }, timeout);

      args.push((res) => {
        if (called) return;
        called = true;
        clearTimeout(timer);
        resolve(res);
      })

      this.emit(ev, ...args);
    }))
  }
}

// @ts-ignore
Socket.prototype.emitWithAck = CustomSocket.prototype.emitWithAck;

Usage:

interface ClientToServerEvent {
  test: (a: number, cb: (b: string) => void) => void
}

const socket = io("http://localhost:3000") as CustomSocket<never, ClientToServerEvent>;

const res = await socket.emitWithAck(1000, "test", 123);
console.log(res); // res is inferred as string

[panwauu]

Thanks that looks already really great!

I removed the called logic as it is not needed with Promises. The first call of resolve, reject is relevant and we dont need to care for the later calls.

import { io, Socket } from "socket.io-client";
import type { EventNames, EventParams } from "@socket.io/component-emitter";

type Head<T extends any[]> = T extends [ ...infer Head, any ] ? Head : any[];
type Last<T extends any[]> = T extends [ ...any, infer Last ] ? Last : any;
type FirstParamType<T extends (...args: any[]) => void> = Parameters<T>[0];

class CustomSocket<L, E> extends Socket<L, E> {
  emitWithAck<Ev extends EventNames<E>>(
      timeout: number,
      ev: Ev,
      ...args: Head<EventParams<E, Ev>>
  ): Promise<FirstParamType<Last<EventParams<E, Ev>>>> {
    return new Promise(((resolve, reject) => {
      const timer = setTimeout(() => { reject(new Error("timeout!")) }, timeout);

      args.push((res: FirstParamType<Last<EventParams<E, Ev>>>) => {
        clearTimeout(timer);
        resolve(res);
      })

      this.emit(ev, ...args);
    }))
  }
}

// @ts-ignore
Socket.prototype.emitWithAck = CustomSocket.prototype.emitWithAck;

For an event with an acknowledgement it works fine and infers the return type.
Problem: If i use an event that is in the ClientToServerEvents but without a callback, I can use this eventname without arguments and get type unknown in the res. But if I try to use the arguments defined for the event (in this example data: {definedData: number}) I get an ts-error.

const res0 = await socket.emitWithAck(1000, "knownEventWithoutAck"); // -> res0 is of type unknown
const res1 = await socket.emitWithAck(1000, "knownEventWithoutAck", {definedData: 0}); // -> Expected 2 arguments, but got 3.

It would be perfect we get a ts-error if we use any events that are not defined with a callback. I am no typescript expert so I would be thankfull for further help. Would you think about including it in the Library? Otherwise I would add it to the docs of the Ackn. section once we have a good solution.

[panwauu]

I would have used something like this in order to allow only the events with a callback function.

type EventsWithAck<E> = { [Ev in keyof E as Last<Parameters<E[Ev]>> extends Function ? Ev : never]: E[Ev] };
...
// The emitWithAck can use this:
emitWithAck<Ev extends EventNames<E>>(
becomes
emitWithAck<Ev extends EventNames<EventsWithAck<E>>>(

But I get an error in the EventsWithAck: Parameters<E[Ev]> - Type 'E[Ev]' does not satisfy the constraint '(...args: any) => any'
The only solution I found was typing E extends Record<string, (...args: any) => any> but then all eventnames are accepted of course.
Do you have a suggestion to change this error?

Also the extends Function part allows for data with any for example. And for Functions with multiple parameters and a return type different to void. Ideally it would only allow () => void or (data: any) => void

[darrachequesne]

Not a TypeScript expert either, there is surely a way but I wasn't able to find it for now..