Run function every 5 seconds automatically(Angular)

Question

I have an Angular component that fetches data from the backend.

Here is code of component

 export class MessagesComponent implements OnInit {
  constructor(private _router: Router, private http: HttpClient) {
  }
  timer: any;
  chats: any;
  autoresize: boolean = false;
  chatId: number;
  moment: any = moment;
  chatMessages: any;
  messageToSend: string;
  messageObject: CreateMessageDto = new CreateMessageDto();
  ngOnInit(): void {
    this.getChatsList();

  }


  getChatsList(): any {
    var reqHeader = new HttpHeaders({
      'Content-Type': 'application/json',
      Authorization: 'Bearer ' + localStorage.getItem('jwt'),
    });
    return this.http
      .get(environment.baseUrl + '/Chat/GetUserChats', {
        headers: reqHeader,
      })
      .subscribe((data: any) => {
        this.chats = data.reverse();
        this.getChatId(data[0].id);
      });
  }

  getChatId(chatId: number): any {
    this.chatId = chatId;
    this.getChatMessages();
  }


  getChatMessages(): any {
    var reqHeader = new HttpHeaders({
      'Content-Type': 'application/json',
      Authorization: 'Bearer ' + localStorage.getItem('jwt'),
    });

    return this.http
      .post(
        environment.baseUrl + '/Messages/GetChatMessages',
        JSON.stringify(this.chatId),
        { headers: reqHeader }
      )
      .subscribe((data: any) => {
        this.chatMessages = data;

      });

  }

  createMessage(): any {
    this.messageObject.chatId = this.chatId;
    var reqHeader = new HttpHeaders({
      'Content-Type': 'application/json',
      Authorization: 'Bearer ' + localStorage.getItem('jwt'),
    });
    return this.http
      .post(
        environment.baseUrl + '/Messages/CreateMessage',
        JSON.stringify(this.messageObject),
        { headers: reqHeader }
      )
      .subscribe((data: any) => {
        this.getChatMessages();
      });
  }
}

I need to run getChatsList() every 5 seconds after componenet initialize

How I can achieve this?

Does this answer your question? [Run a function every 30 seconds javascript](https://stackoverflow.com/questions/21638574/run-a-function-every-30-seconds-javascript). Or more popular [Calling a function every 60 seconds](https://stackoverflow.com/q/3138756/364696) — ShadowRanger, Feb 10 '21 at 16:50
okay, but where I need to run interval? at ngOnInit or where?? @ShadowRanger — Eugene Sukh, Feb 10 '21 at 16:54
That seems reasonable. If the component is otherwise fully initialized (and it seems like it is, since you're able to call `getChatsList` at that point), that seems a good place to do it. — ShadowRanger, Feb 10 '21 at 16:58
try to do it like this `setInterval(function(){ this.getChatMessages() }, 3000)` and get `this.getChatMessages is not a function` @ShadowRanger — Eugene Sukh, Feb 10 '21 at 17:04
See (and upvote if it helps you) [this.method Is not function with setInterval](https://stackoverflow.com/q/56661554/364696). — ShadowRanger, Feb 10 '21 at 17:08

score 3 · Accepted Answer · answered Feb 10 '21 at 17:30

3

use interval rxjs function to call every seconds.

  import { interval } from 'rxjs';

  ngOnInit(): void {
      interval(5000).subscribe(() => {
          this.getChatsList();
      });
  }

answered Feb 10 '21 at 17:30

Msk Satheesh

932
1
3
6

Run function every 5 seconds automatically(Angular)

1 Answers1