What are the steps to expand the WebSocket interface using the 'ws' library?

Question

What are the steps to expand the WebSocket interface using the 'ws' library?

I am struggling to extend an interface in a library and I need some help. I am trying to extend the WebSocket interface from the ws library.

...
declare class WebSocket extends events.EventEmitter {
   ...
}

declare namespace WebSocket {
   ...
}

export = WebSocket;

In particular, I need to add a property called isAlive of type boolean to the WebSocket class.

I have tried:

import ws from 'ws';

declare module 'ws' {
    export interface WebSocket {
        isAlive: boolean;
    }
}

but so far it has not been successful.

typescript

Answer 1

Answer №1

This information was originally shared on my Github page here.

declare module "ws" {
  class _WS extends WebSocket { }
  export interface WebSocket extends _WS {
      isOnline: boolean;
  }
}

It's worth noting that the following code snippet will not function as intended, given that WebSocket refers to the class rather than the declared interface:

socket.on('connection', (ws: WebSocket, req: http.IncomingMessage) => {
    ws.isOnline = true;
}

However, these alternatives will work correctly:

Without specifying a type:

socket.on('connection', (ws, req: http.IncomingMessage) => {
    ws.isOnline = true;
}

With type definition (WebSocket.WebSocket):

socket.on('connection', (ws: WebSocket.WebSocket, req: http.IncomingMessage) => {
    ws.isOnline = true;
}

Answer 2

This information was originally shared on my Github page here.

declare module "ws" {
  class _WS extends WebSocket { }
  export interface WebSocket extends _WS {
      isOnline: boolean;
  }
}

It's worth noting that the following code snippet will not function as intended, given that WebSocket refers to the class rather than the declared interface:

socket.on('connection', (ws: WebSocket, req: http.IncomingMessage) => {
    ws.isOnline = true;
}

However, these alternatives will work correctly:

Without specifying a type:

socket.on('connection', (ws, req: http.IncomingMessage) => {
    ws.isOnline = true;
}

With type definition (WebSocket.WebSocket):

socket.on('connection', (ws: WebSocket.WebSocket, req: http.IncomingMessage) => {
    ws.isOnline = true;
}

Answer 3

Answer №2

To overcome this issue, one possible solution is to define a new class that extends WebSocket and then convert the original WebSocket instance to this new class. Create a file named WebSocketEx.ts with the following content:

  import WebSocket from 'ws'

  export default interface WebSocketEx extends WebSocket {
    myProperty?: string
  }

You can then use it in your code like so:

  import WebSocketEx from './WebSocketEx'

  fastify.get('/', { websocket: true }, function wsHandler(connection, req) {
    const socket = connection.socket // This is the regular WebSocket object
    const socketEx = (socket as unknown) as WebSocketEx

    socketEx.myProperty = 'abcdef'

    socketEx.on('message', (message) => {
      log(`WS: message: ${JSON.stringify(message)}`)
    })

Answer 4

To overcome this issue, one possible solution is to define a new class that extends WebSocket and then convert the original WebSocket instance to this new class. Create a file named WebSocketEx.ts with the following content:

  import WebSocket from 'ws'

  export default interface WebSocketEx extends WebSocket {
    myProperty?: string
  }

You can then use it in your code like so:

  import WebSocketEx from './WebSocketEx'

  fastify.get('/', { websocket: true }, function wsHandler(connection, req) {
    const socket = connection.socket // This is the regular WebSocket object
    const socketEx = (socket as unknown) as WebSocketEx

    socketEx.myProperty = 'abcdef'

    socketEx.on('message', (message) => {
      log(`WS: message: ${JSON.stringify(message)}`)
    })

Answer 5

Answer №3

class SocketConnection {
    isOnline: boolean;
}

Answer 6

class SocketConnection {
    isOnline: boolean;
}

What are the steps to expand the WebSocket interface using the 'ws' library?

Answer №1

Answer №2

Answer №3

Similar questions

NestJS Exporting: Establishing a connection for PostgreSQL multi tenancy

Is it possible to define a constant enum within a TypeScript class?

Can we define the input and return types for functions using httpsCallables?

What is the process for importing a TypeScript module exclusively through typings without having to download it separately?

What sets apart extending and intersecting interfaces in TypeScript?

Setting up ESLint and Prettier with TypeScript on Node 20: A Guide

Sort the observable data by a value returned from an API request

When using a Redux action type with an optional payload property, TypeScript may raise complaints within the reducer

Is there a way to implement several filters on an array simultaneously?

The 'string[]' type cannot be assigned to the 'string | ParsedUrlQueryInput | null | undefined' type in Next.js and Typescript

Loading fonts using next.js and style jsx

I'm having trouble with my Typescript file in Vscode - every time I try to edit the css code, all the text turns red. Can someone

Error in VS Code related to Vue Array Prop JSDoc TypeScript: The properties of type 'ArrayConstructor' are not found in type 'MyCustomType[]'

Encountered an error with API request while utilizing Cashfree in a React Native environment

Convert Time: segment time devoted to the main content from the time dedicated to advertisements

Incorporating an Ionic application into a Rails 4 application

What is the most effective method for obtaining the ViewContainerRef of a mat-row in Angular 4

Tips for properly handling a property that receives its value from a callback function and waiting for it to be updated

Is it possible to directly parse a multipart/mixed response without needing to first convert it into a string?

The error message "TypeScript reflect-metadata Cannot find name 'Symbol'" indicates that TypeScript is unable to locate