美文网首页
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