Question

我正在尝试使用Angular PWA和具有WebSocket连接的Java Server创建一个小型Messenger。

我已经有一个聊天列表组件，可以在其中看到一些联系人。如果我单击某个联系人，则应打开包含所有消息的聊天窗口。它打开了窗口并显示console.log告诉我它从服务器加载了正确的消息数据，但是它立即关闭了该窗口并返回到聊天列表组件。

我遇到的另一个问题是this.websocket.socket.unsubscribe（）;。某种程度上是行不通的，这意味着在我订阅了Websocket的每个组件中，我都无法取消订阅。

请帮助，我越来越绝望

在ngOnInit中调用的此方法中，我从服务器加载消息。如果我记录message.data，我可以看到它是正确的，但是执行该功能后，它会返回到聊天列表。

loadNewMessages() {
    console.log('refresh');
    this.websocket.socket.next(new MessageEvent('{' +
      '"action": "get_person",' +
      '"on": "message",' +
      '"attributes": {' +
      '"person_name": "' + this.chatPartner + '"' +
      '}}'
    ));
    this.websocket.messageReceived.subscribe(
      (message: MessageEvent) => {
        const res = JSON.parse(message.data);
        if (res.error) {
          console.log(res.error);
        } else if (res.messages) {
          this.tmList = [];
          res.messages.forEach(m => {
            const writer = m.from_name;
            let reader = this.websocket.Username;
            let fromMe = false;
            if (this.websocket.Username === writer) {
              reader = this.chatPartner;
              fromMe = true;
            }
            const msg = new Message(new Person(writer, ''), new Person(reader, ''), fromMe, false, m.text, new Date(m.date), false, null);
            if (!this.tmList.includes(msg)) {
              this.tmList.push(msg);
            }
          });
        }
      });
    this.sendText = '';
  }

这是我的websocket实现

import { Injectable } from '@angular/core';
import { Subject, Observer, Observable } from 'rxjs/Rx';
import { Person } from '../entities/Person';

@Injectable()
export class ObservableWebsocket {

  Username: string;
  newMessageUsernames: string[] = [];
  newMessageGroupnames: number[] = [];
  actualHost: Person = null;

  public socket: Subject<MessageEvent>;
  public messageReceived: Subject<MessageEvent> = new Subject<MessageEvent>();

  public constructor() {
    this.createWebsocket();
    this.socket.subscribe(
      (message: MessageEvent) => {
        this.messageReceived.next(message);
      });
  }

  public createWebsocket(): void {
    //let socket = new WebSocket('ws://88.117.121.8:8025/websockets/chat');
    let socket = new WebSocket('ws://localhost:8025/websocket/chat');

    let observable = Observable.create(
      (observer: Observer<MessageEvent>) => {
        socket.onmessage = observer.next.bind(observer);
        socket.onerror = observer.error.bind(observer);
        socket.onclose = observer.complete.bind(observer);
        return socket.close.bind(socket);
      }
    );

    let observer = {
      next: (data: MessageEvent) => {
        if (socket.readyState === WebSocket.OPEN) {
          socket.send(data.type);
          //socket.send(data.data);
        }
      }
    };

    this.socket = Subject.create(observer, observable);
  }
}

这是一个示例，其中我尝试退订websocket，这是行不通的

login() {
    this.websocket.socket.next(new MessageEvent('{' +
      '"action": "login",' +
      '"on": "person",' +
      '"attributes": {' +
        '"person_name": "' + this.username + '"' +
      '}' +
    '}'
    ));
  }

  constructor(private router: Router, private websocket: ObservableWebsocket) { }

  ngOnInit() {
    this.websocket.messageReceived.subscribe(
      (message: MessageEvent) => {
        const res = JSON.parse(message.data);
        if (res.error) {
          console.log(res.error);
        } else {
          this.websocket.socket.unsubscribe();
          this.websocket.Username = this.username;
          this.router.navigateByUrl('/chats');
        }
      }
    );
  }

聊天应用程序中的角组件立即关闭

0 个答案: