Client state

Creating a client

To connect a user, you need to have a client. This is how you can create one:

import { ChatClientService } from "stream-chat-angular";

export class AppComponent {
  constructor(private chatService: ChatClientService) {
    this.chatService.init(
      "<API key>",
      "<user or id>",
      "<token or provider>",
      "<client options>",
    );
  }
}

The Angular SDK uses the stream-chat-js client under the hood, but most of the time you don't need to interact with the client directly, instead, you'll use the ChatClientService or ChannelService. However, it's still possible to access the client directly:

import { StreamChat } from "stream-chat";

// only possible to do after chatService.init was called
const client: StreamChat = this.chatService.chatClient;

// independently from chatService
const client: StreamChat = StreamChat.getInstance("<API key>");

The StreamChat client uses singleton pattern to ensure only one instance is created, so you'll get the same instance with both methods

You can refer the stream-chat-js client documentation to understand the most important concepts of the Stream API.

Client options

Optionally you can provide configuration options to the client using the init method. The options follow the stream-chat configuration tree: client options go under the client key, and HTTP (axios) options under client.axiosRequestConfig. Here is a simple example that sets the timeout for HTTP requests:

this.chatService.init("<API key>", "<user or id>", "<token or provider>", {
  client: { axiosRequestConfig: { timeout: 10000 } },
});

Logging isn't a client option anymore. You can configure it with chatLoggerSystem from stream-chat. This example provides console.log for logging:

import { chatLoggerSystem } from "stream-chat";

chatLoggerSystem.configureLoggers({
  default: { level: "info", sink: console.log },
});

Connecting and disconnecting users

Please refer to the Users and tokens guide.

Reference

For more information, please refer to the ChatClientService reference documentation.