Events

An event is a message that the server pushes to the client. You declare each event in the contract with event<Args>(). The handler gets the typed arguments. Only events that the contract declares reach a handler.

Listen to an eventCopy Anchor Link

injectHubEvent subscribes to one event of one hub. The subscription ends when the consumer ends. This sample shows the messages of a room:

import { Component, input, signal } from "@angular/core";
import { injectHubEvent } from "./client";
import type { ChatMessage } from "./contract";

@Component({
  selector: "app-feed",
  template: `
    <ul>
      @for (message of messages(); track $index) {
        <li>{{ message.user }}: {{ message.text }}</li>
      }
    </ul>
  `,
})
export class FeedComponent {
  roomId = input.required<string>();
  messages = signal<ChatMessage[]>([]);

  constructor() {
    injectHubEvent("/hubs/rooms", "MessageReceived", (message) => {
      if (message.roomId === this.roomId()) this.messages.update((list) => [...list, message]);
    });
  }
}

The helper also counts as a consumer of the hub. See Lazy hubs.

Handlers across rebuildsCopy Anchor Link

The library keeps the handlers in the session, not in the connection. A reconnect or a rebuild of the connection does not remove them. After a rebuild, the new connection delivers events to the same handlers.

You can register several handlers for one event, in one component or in many. Each handler gets every event. Your code must not rely on the order in which the handlers run.

Handler at setupCopy Anchor Link

The helper reads the handler once, when the component sets up. Use the current state inside the handler. Closures read live state, so a handler can read a signal, a store, or a ref. A new function later does not replace the first one.

Errors in a handlerCopy Anchor Link

An error in a handler does not stop other handlers and does not break the connection. The library passes the error to onError with info.source set to "callback". A promise that a handler returns and that rejects gets the same treatment. For the full picture, see Recovery.