ng-alain 项目免编译修改websocket连接地址
2021-09-28 本文已影响0人
成长开发者
使用 ng-alain 框架开发项目的时候,在websocket 功能开发的时候,使用了这个包 ngx-socket-io。
ngx-socket-io 包的示例代码,都是在 app.module.ts 里写。这里写的代码,都不能动态改变。因为项目需要给不同的客户使用,websocket 地址也都会发生变化。系统更新的时候,需要多次编译,非常不便。
- 我们可以利用在 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);
},
);
});
}
- 新建一个 自定义的 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);
}
}
- 使用的时候是这样
get socketSrv() {
return this.injector.get(SocketService);
}