-1

我有一些 websocket 代码，我在其中向 websocket 服务器发送消息并得到回复。

这段代码工作正常，但我想把它放在服务中，然后从组件中调用它。

这是现在在组件内部的代码：

import { Component } from '@angular/core';
import {webSocket, WebSocketSubject} from 'rxjs/webSocket';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {

  myWebSocket: WebSocketSubject<any> = webSocket('ws://localhost:8888');

  constructor() {

    this.myWebSocket.subscribe(
      msg => console.log('message received: ' + msg),
      err => console.log(err),
      () => console.log('complete')
   );

  }

  sendMessageToServer(msg) {
    const dte = Date.now();
    this.myWebSocket.next({message: `${msg} - ${dte}` });
  }

}

我现在创建了一个服务：

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class WsService {

  constructor() { }
}

我该怎么做...从组件到服务的哪些部分...例如，我是在服务内订阅还是在组件内订阅？

4

2 回答 2

1

乔，当您拥有服务时，您的想法是“订阅”是 IN 组件。好吧，您可以转为其他服务订阅

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class WsService {
  myWebSocket: WebSocketSubject<any> = webSocket('ws://localhost:8888');

  constructor() {
  }

  sendMessageToServer(msg) {
    const dte = Date.now();
    this.myWebSocket.next({message: `${msg} - ${dte}` });
  }
}

并在组件中订阅 ws.myWebSocket（我喜欢在 ngOnInit 中订阅）

export class AppComponent implements OnInit {
  constructor(private ws:WsService ) {

  ngOnInit()
  {
     this.ws.myWebSocket.subscribe(
      msg => console.log('message received: ' + msg),
      err => console.log(err),
      () => console.log('complete')
   );
  }
  addMessage(msg)
  {
   this.ws.sendMessageToServer(msg)
  }
}
于 2020-05-27T11:39:31.690 回答
0

您需要将服务引入您的组件。步骤：将您的服务导入组件。

import { WsService} from 'path/to/WsService';

引入本地字段private wsService: WsService; 将您的服务添加到组件构造函数中：

constructor(wsService: WsService)
{
    this.wsService = wsService;
}

使用您的服务，例如：this.wsService.Method()

于 2020-05-27T08:54:47.493 回答