Question

我几乎有一些代码可以在Angular服务中使用Observable提供websocket，但是不确定服务定义中的语法/实现是否正确。我该如何调整使其正常工作？

具体来说，我认为我的subscribeToTopic（）函数不太正确，并且我不确定如何将回调函数（处理消息）从组件传递到服务中的stompClient.subscribe（）。

（注意：我被要求在前端使用Observable和Service，并且必须使用SockJS和STOMP，因为后端（Spring框架）使用了它，我也是Angular的新手，所以学习了这一切在工作中！）

websockets.service.ts：

@Injectable({
  providedIn: 'root' // Register service in root component so accessible to all parts of the app
})
export class WebsocketsService {
  private serverUrl = ''; // http://localhost:8080/socket'
  private stompClient;

  subscribeToTopic(topic: string, callbackfn): Observable<Wsbasemsg[]> {
    return this.stompClient.subscribe(topic, (message) => callbackfn);
  }

  unsubscribeFromTopic(subscription: any) {
    subscription.unsubscribe(); // Unsubscribe from topic
  }

  constructor(){
    this.initializeWebSocketConnection();
  }

  initializeWebSocketConnection(){
    let ws = new SockJS(this.serverUrl); // Create a new SockJS socket
    this.stompClient = Stomp.over(ws); // Create a STOMP client to send messages over the socket
    this.stompClient.connect(); // Connect to the server using SockJS
  }
}

componentA.ts：（我也不确定如何在此处指定订阅呼叫吗？）

  handleLiveUpdate = function(message) {
    let wsMsg = JSON.parse(message);  // Parse JSON
    // etc...
  }

  ngOnInit() {
    // Subscribe to live updates over websockets:
    this.wsSubscription = this.websocketsService.subscribeToTopic('topic_A').subscribe(this.handleLiveUpdate);
  }

另外两个组件componentB.ts和componentC.ts与componentA.ts非常相似，但是它们订阅不同的主题并以不同的方式处理数据，但是原理是相同的。

谢谢

如何使用STOMP和SockJS在服务中提供可观察的websocket？

0 个答案: