@addapptables/ng-signal-r 中文文档教程

Question

ADDAPPTABLES ng-signal-r

ADDAPPTABLES ng-signal-r 是一个用于角度的库， 这个库是@addapptables/ng-web-socket 的适配器

Getting Started

首先，让我们通过 npm 安装包：

选择与您的 Angular 版本相对应的版本：

Angular	@addapptables/ng-signal-r
8	2.x
7	1.x

npm i @addapptables/ng-signal-r  @addapptables/ng-web-socket @aspnet/signalr --S

How to use

创建一个 websocket 服务

// gateway with params
@WebSocketGateway<IHttpConnectionOptions>({
  url: 'http://localhost:22721/signalr-hub',
  autoConnect: true,
  options: {
    transport: HttpTransportType.WebSockets,
    skipNegotiation: true,
    logger: LogLevel.Information
  }
})
export class WebSocketService {

  // web socket connection
  @WebSocketServer()
  server: HubConnection;

  // subscribe event
  @Subscribe('news')
  connectedUsers(data: any) {
    console.log(data);
    this.server.emit('my other event', { my: 'data' });
  }

  // emit events
  sendMessage() {
    this.server.emit('my other event', { my: 'data' });
  }
}

导入适配器和 WebSocketService 到

import { NgWebSocketModule } from '@addapptables/ng-web-socket';
import { SignalRAdapter } from '@addapptables/ng-signal-r';
@NgModule({
  imports: [
    ...,
    NgWebSocketModule.forRoot(SignalRAdapter, [WebSocketService,  /* other services socket here*/]),
    /*
    Or
    NgWebSocketModule.forRoot(SignalRAdapter, [])
    Adapter is required
    */
  ]
})
export class AppModule { }

子模块

import { NgWebSocketModule } from '@addapptables/ng-web-socket';
@NgModule({
  imports: [
    ...,
    NgWebSocketModule.forFeature([WebSocketService, /* other services socket here*/])
  ]
})
export class AppModule { }

的模块中如果你需要一个服务来获取url，可以这样

// gateway with params
@WebSocketGateway<IHttpConnectionOptions>({
  autoConnect: false,
  options: {
    transport: HttpTransportType.WebSockets,
    skipNegotiation: true,
    logger: LogLevel.Information
  }
})
export class WebSocketService implements ISocketWithOptions<IHttpConnectionOptions> {

  // web socket connection
  @WebSocketServer()
  server: HubConnection;

  constructor(
    @Inject(API_BASE_URL) private _baseUrl: string,
    private _managerSocketAdapter: ManagerSocketAdapter
  ) { }

  //build options for websocket
  withOptions(): WebSocketOptions<IHttpConnectionOptions> {
    const token = '123';
    const url = this._baseUrl + '?token=' + token;
    return {
      url
    };
  }

  connect() {
    this._managerSocketAdapter.connect(this);
  }

  // subscribe event
  @Subscribe('news')
  connectedUsers(data: any) {
    console.log(data);
    this.server.emit('my other event', { my: 'data' });
  }

  // emit events
  sendMessage() {
    this.server.emit('my other event', { my: 'data' });
  }
}

在组件中注入websocket

@Component({
    ...
})
export class YourComponent implements OnInit {

  constructor(
    public _webSocketService: WebSocketService
  ) {
  }

  ngOnInit() {
    this._webSocketService.connect();
  }
}