美文网首页
ng-alain 项目免编译修改websocket连接地址

ng-alain 项目免编译修改websocket连接地址

作者: 成长开发者 | 来源:发表于2021-09-28 17:49 被阅读0次

使用 ng-alain 框架开发项目的时候,在websocket 功能开发的时候,使用了这个包 ngx-socket-io。
ngx-socket-io 包的示例代码,都是在 app.module.ts 里写。这里写的代码,都不能动态改变。因为项目需要给不同的客户使用,websocket 地址也都会发生变化。系统更新的时候,需要多次编译,非常不便。

  1. 我们可以利用在 src\app@core\startup\startup.service.ts 文件内,增加配置文件(例如: src\assets\data\appConfig.json)读取,然后放入配置服务(ConfigService)里
// src\app\@core\startup\startup.service.ts
  load(): Promise<any> {
    // only works with promises
    // https://github.com/angular/angular/issues/15088
    return new Promise((resolve, reject) => {
      zip(
        this.httpClient.get(`assets/data/i18n/${this.i18NSrv.defaultLang}.json`),
        this.httpClient.get(`assets/data/app.json`),
        this.httpClient.get(`assets/data/appConfig.json`),
      )
        .pipe(
          // 接收其他拦截器后产生的异常消息
          catchError(([langData, appData, appConfig]) => {
            resolve(null);
            return [langData, appData, appConfig];
          }),
        )
        .subscribe(
          ([langData, appData, appConfig]) => {
            this.configSrv.websocket.url = appConfig.websocketUrl;
            this.configSrv.websocket.options.path = appConfig.websocketPath;
          },
          err => {},
          () => {
            resolve(null);
          },
        );
    });
  }
  1. 新建一个 自定义的 socket 类。在实例化 socket 的时候,调用配置服务里的内容。
import { Injectable, Injector } from '@angular/core';
import { ConfigService } from '@core/data';
import { Socket } from 'ngx-socket-io';
import { of } from 'rxjs';
import { mergeMap } from 'rxjs/operators';

@Injectable({
  providedIn: 'root',
})
export class SocketService {
  socketTime: number;
  isAuth: Boolean = true;
  cronDeviceTimer: any = undefined;
  socket: Socket;

  get configSrv() {
    return this.injector.get(ConfigService);
  }

  constructor(private injector: Injector) {
    this.socketTime = 0;
    this.socket = new Socket(this.configSrv.websocket);
  }

  // 连接
  connect() {
    this.socket.disconnect();
    this.socket.connect();
  }

  // 断开当前连接
  disConnect() {
    if (this.cronDeviceTimer) clearInterval(this.cronDeviceTimer);
    this.socket.disconnect();
  }

  sendMessage(msg: any) {
    this.socketTime = Date.now();
    this.socket.emit('message', msg);
  }

  getMessage() {
    return this.socket.fromEvent('message').pipe(
      mergeMap((event: any) => {
        this.socketTime = Date.now();
        return of(event);
      }),
    );
  }

  event(eventName: string) {
    return this.socket.fromEvent<any>(eventName);
  }

  removeListener(listener: string) {
    return this.socket.removeListener(listener);
  }
}

  1. 使用的时候是这样
  get socketSrv() {
    return this.injector.get(SocketService);
  }

相关文章

网友评论

      本文标题:ng-alain 项目免编译修改websocket连接地址

      本文链接:https://www.haomeiwen.com/subject/bmsrnltx.html