angular - 我可以使用 Observable 进行简单的网络聊天吗？

Question

我是 Angular 和 Typescript 的新手，基本上是编程，所以我在寻求你的帮助。

我正在开发一个简单的网络聊天，其中 2 个预定义的用户可以登录并互相聊天。

您将消息输入文本字段并使用按钮发送。

该按钮调用'ChatComponent' 中的函数sendMessage，这是指将消息放入名为'messages' 的数组中的ChatService。

之后，我在“ChatComponent”中订阅了我的 Observable，并在屏幕上收到了我的消息。但现在问题出在：我看不到第二个用户的相同屏幕/消息。有任何想法吗？

export class ChatComponent implements OnInit {

  message: string;
  selectedUser: string;

  messages: Message[];

  constructor(private route: ActivatedRoute, private userService: UserService, private chatService: ChatService) {
  }

  ngOnInit() {
    this.route.params.subscribe(params => {
      console.log(this.route.snapshot.paramMap.getAll('param1'));
      this.selectedUser= this.route.snapshot.paramMap.get('param1');
    });
    this.getMessage();
  }

  sendMessage(text: string): void {
    this.chatService.sendMsg(text);
  }

  getMessage():void{
    this.chatService.getMessages().subscribe(messages => this.messages = messages)
  }

}

此外，我使用下面的代码获取“用户指定”链接/ID 或其他任何内容，以便稍后在聊天中显示用户名。

this.route.params.subscribe(params => {
      console.log(this.route.snapshot.paramMap.getAll('param1'));
      this.selectedUser= this.route.snapshot.paramMap.get('param1');
    });

在这里你可以看到它在哪里被放在一个 Observable 中（..我猜）。

export class ChatService {

  messages = [];

  constructor() {  }

  getMessages(): Observable<Message[]>{
    return of (this.messages);
  }

  sendMsg(text: string): void{
    let msg: Message = new Message();
    msg.text = text;
    this.messages.push(msg);
  }

  clear(): void{
    this.messages = [];
  }
}

标签： angulartypescriptchat