Angular 8 使用 rxjs 的 Websocket 用户输入事件

Question

我正在 Angular 8 中通过 .Net 后端上的 Websocket 构建一个聊天应用程序。我需要一些帮助来尝试将 "User typing..." 事件从 Angular 发送到套接字。我的套接字服务器需要在用户开始输入和停止输入时接收，并将其传递给接收者。我有一个基本的反应形式，带有一个输入控件，它给我 valueChanges 事件。我已经尝试了许多可能的 RxJS 运算符组合来实现这一点，但无法使其工作。请帮忙

我得到的最接近的在下面。

this.newMessageForm.get('message').valueChanges
  .pipe(
    first(),
    tap(value => console.log('User is typing...')),
    debounceTime(1000)
  )
  .subscribe(value => {
    console.log('User has stopped typing');
  });

上面通过给我流的第一个值让我开始输入事件，但如果用户停止并再次开始输入，它不会重置。我是 Rxjs 的新手。请帮忙...

谢谢

Answer 1

可能是你想的太复杂了。

所以我尝试了一些更简单的辅助函数：


// ......

private IsTyping : boolean; // private Variable

// ......
  this.newMessageForm.get('message').valueChanges
.pipe(
    tap(value => this.checkTyping(true)),
    debounceTime(1000))
  .subscribe(value => {
    this.checkTyping(false);
  });
// ......

checkTyping(isTyping: boolean) {
  if (isTyping !== this.IsTyping) {
    this.IsTyping = isTyping;

    if (isTyping) {
      console.log("User is typing...");
    } else {
      console.log("User has stopped typing");
    }
  }
}

见stackblitz

Angular 8 使用 rxjs 的 Websocket 用户输入事件

Angular 8 Websocket user typing event using rxjs

chat

websocket

typescript

angular

rxjs6