|
|
@@ -9,169 +9,274 @@ declare const AgoraRTM: any;
|
|
|
})
|
|
|
export class MessageService {
|
|
|
rtmClient: any; // RTM实例
|
|
|
+ // rtmClientMap: any = {};
|
|
|
+ channelNameList: any = {}; //订阅频道状态
|
|
|
msChannelName: string = 'global_room'; // 全球频道
|
|
|
options: any = {
|
|
|
- appid: '',
|
|
|
- userId: Parse.User.current()?.id,
|
|
|
- token:
|
|
|
- '007eJxTYGh7sUrIjKd9bl9ncuOq0mvLordY/r5dWv64Y3Wz5uVrNcwKDMmJBqbmJpaGickWliapFkYWBkYWqclp5sbmaSaphhYm+juD0hsCGRlOuFsyMDIwATEjA4jPxZBjkO5maeoU4OMEACaMIUE=',
|
|
|
+ connectState: false,
|
|
|
};
|
|
|
+ appid?: string;
|
|
|
+ userId: string = Parse.User.current()?.id!;
|
|
|
+
|
|
|
+ pageFun?: Function; //页面传入的方法
|
|
|
constructor(private liveService: LiveService, private http: HttpService) {
|
|
|
- this.initRTM();
|
|
|
+ // this.initRTM(this.msChannelName);
|
|
|
}
|
|
|
- messageList: any = [
|
|
|
- {
|
|
|
- is_self: true,
|
|
|
- avatar:
|
|
|
- 'https://file-cloud.fmode.cn/Qje9D4bqol/20241109/2t1lp0032258601.png',
|
|
|
- msg_type: 1,
|
|
|
- content: 'nihao',
|
|
|
- create_time: new Date(),
|
|
|
- istoday: true,
|
|
|
- timeStamp: new Date(),
|
|
|
- data: [
|
|
|
- {
|
|
|
- create_time: new Date(),
|
|
|
- },
|
|
|
- ],
|
|
|
- },
|
|
|
- {
|
|
|
- is_self: true,
|
|
|
- avatar:
|
|
|
- 'https://file-cloud.fmode.cn/Qje9D4bqol/20241109/2t1lp0032258601.png',
|
|
|
- msg_type: 1,
|
|
|
- content: `Use the pipe name to trace where the pipe is declared and used. To resolve this error: If the pipe is local to the NgModule, give it a unique name in the pipe's decorator and declared it in the NgModule. If the pipe is standalone or is declared in another NgModule, add it to the imports field of the standalone component or the current NgModule.`,
|
|
|
- create_time: new Date(),
|
|
|
- istoday: true,
|
|
|
- timeStamp: new Date(),
|
|
|
- data: [
|
|
|
- {
|
|
|
- create_time: new Date(),
|
|
|
- },
|
|
|
- ],
|
|
|
- },
|
|
|
- {
|
|
|
- is_self: false,
|
|
|
- avatar:
|
|
|
- 'https://file-cloud.fmode.cn/Qje9D4bqol/20241109/2t1lp0032258601.png',
|
|
|
- msg_type: 1,
|
|
|
- content: 'nihao',
|
|
|
- create_time: new Date(),
|
|
|
- istoday: true,
|
|
|
- timeStamp: new Date(),
|
|
|
- data: [
|
|
|
- {
|
|
|
- create_time: new Date(),
|
|
|
- },
|
|
|
- ],
|
|
|
- },
|
|
|
- ]; // 世界频道消息列表
|
|
|
+ messageMapList: any = {
|
|
|
+ global_room: [
|
|
|
+ // 世界频道消息列表
|
|
|
+ {
|
|
|
+ is_self: true,
|
|
|
+ avatar:
|
|
|
+ 'https://file-cloud.fmode.cn/Qje9D4bqol/20241109/2t1lp0032258601.png',
|
|
|
+ msg_type: 1,
|
|
|
+ content: 'nihao',
|
|
|
+ create_time: new Date(),
|
|
|
+ istoday: true,
|
|
|
+ timeStamp: new Date(),
|
|
|
+ },
|
|
|
+ {
|
|
|
+ is_self: true,
|
|
|
+ avatar:
|
|
|
+ 'https://file-cloud.fmode.cn/Qje9D4bqol/20241109/2t1lp0032258601.png',
|
|
|
+ msg_type: 1,
|
|
|
+ content: `Use the pipe name to trace where the pipe is declared and used. To resolve this error: If the pipe is local to the NgModule, give it a unique name in the pipe's decorator and declared it in the NgModule. If the pipe is standalone or is declared in another NgModule, add it to the imports field of the standalone component or the current NgModule.`,
|
|
|
+ create_time: new Date(),
|
|
|
+ istoday: true,
|
|
|
+ timeStamp: new Date(),
|
|
|
+ },
|
|
|
+ {
|
|
|
+ is_self: true,
|
|
|
+ avatar:
|
|
|
+ 'https://file-cloud.fmode.cn/Qje9D4bqol/20241109/2t1lp0032258601.png',
|
|
|
+ msg_type: 1,
|
|
|
+ content: `Use the pipe name to trace where the pipe is declared and used. To resolve this error: If the pipe is local to the NgModule, give it a unique name in the pipe's decorator and declared it in the NgModule. If the pipe is standalone or is declared in another NgModule, add it to the imports field of the standalone component or the current NgModule.`,
|
|
|
+ create_time: new Date(),
|
|
|
+ istoday: true,
|
|
|
+ timeStamp: new Date(),
|
|
|
+ },
|
|
|
+ {
|
|
|
+ is_self: true,
|
|
|
+ avatar:
|
|
|
+ 'https://file-cloud.fmode.cn/Qje9D4bqol/20241109/2t1lp0032258601.png',
|
|
|
+ msg_type: 1,
|
|
|
+ content: `Use the pipe name to trace where the pipe is declared and used. To resolve this error: If the pipe is local to the NgModule, give it a unique name in the pipe's decorator and declared it in the NgModule. If the pipe is standalone or is declared in another NgModule, add it to the imports field of the standalone component or the current NgModule.`,
|
|
|
+ create_time: new Date(),
|
|
|
+ istoday: true,
|
|
|
+ timeStamp: new Date(),
|
|
|
+ },
|
|
|
+ {
|
|
|
+ is_self: false,
|
|
|
+ avatar:
|
|
|
+ 'https://file-cloud.fmode.cn/Qje9D4bqol/20241109/2t1lp0032258601.png',
|
|
|
+ msg_type: 1,
|
|
|
+ content: 'nihao',
|
|
|
+ create_time: new Date(),
|
|
|
+ istoday: true,
|
|
|
+ timeStamp: new Date(),
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+
|
|
|
/* 获取token */
|
|
|
- async getToken(channel: string) {
|
|
|
+ async getToken(channel?: string) {
|
|
|
//获取频道token记录
|
|
|
let uid = Parse.User.current()?.id;
|
|
|
let baseurl = 'https://server.fmode.cn/api/webrtc/build_token';
|
|
|
let reqBody = {
|
|
|
company: this.liveService.company, // this.aiSer.company,
|
|
|
- channelName: channel,
|
|
|
+ channelName: this.msChannelName,
|
|
|
type: 'withrtm',
|
|
|
account: uid,
|
|
|
};
|
|
|
let data: any = await this.http.httpRequst(baseurl, reqBody, 'POST');
|
|
|
console.log(data);
|
|
|
if (data.code == 200) {
|
|
|
+ // this.options[channel] = {
|
|
|
+ // token: data.data.token,
|
|
|
+ // };
|
|
|
this.options.token = data.data.token;
|
|
|
- this.options.appid = data.data.appid;
|
|
|
+ this.appid = data.data.appid;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- async initRTM() {
|
|
|
- await this.getToken(this.msChannelName);
|
|
|
- console.log();
|
|
|
- this.rtmClient = new AgoraRTM.RTM(this.options.appid, this.options.userId);
|
|
|
+ async initRTM(channelName: string) {
|
|
|
+ // let states = ['CONNECTED', 'CONNECTING'];
|
|
|
+ //已连接，无需重复连接
|
|
|
+ // if (
|
|
|
+ // this.rtmClientMap?.[channelName]?.connectState &&
|
|
|
+ // states.includes(this.rtmClientMap[channelName].connectState)
|
|
|
+ // )
|
|
|
+ // return;
|
|
|
+ // console.log('initRTM');
|
|
|
+
|
|
|
+ if (this.options.connectState) return;
|
|
|
+ await this.getToken(channelName);
|
|
|
+ this.rtmClient = new AgoraRTM.RTM(this.appid, this.userId);
|
|
|
+ // this.rtmClientMap[channelName] = {
|
|
|
+ // rtmClient: new AgoraRTM.RTM(this.appid, this.userId),
|
|
|
+ // };
|
|
|
this.joinReady();
|
|
|
await this.loginRTM();
|
|
|
- // await this.join();
|
|
|
- this.subscribeMessage(this.msChannelName);
|
|
|
+ this.subscribeMessage(channelName);
|
|
|
}
|
|
|
/* 监听频道消息 */
|
|
|
- joinReady() {
|
|
|
+ joinReady(channelName?: string) {
|
|
|
this.rtmClient.addEventListener('message', (event: any) => {
|
|
|
- this.showMessage(event.publisher, event.message);
|
|
|
+ console.log('message', event);
|
|
|
+ this.showMessage(event);
|
|
|
});
|
|
|
- console.log('initRTM');
|
|
|
- // Pressence event handler.
|
|
|
this.rtmClient.addEventListener('presence', (event: any) => {
|
|
|
- console.log('presence event: ', event);
|
|
|
- if (event.eventType === 'SNAPSHOT') {
|
|
|
- this.showMessage('INFO', 'I Join');
|
|
|
- } else {
|
|
|
- this.showMessage('INFO', event.publisher + ' is ' + event.eventType);
|
|
|
- }
|
|
|
+ console.log('频道人员状态变化 ', event);
|
|
|
+ this.pageFun?.();
|
|
|
});
|
|
|
- this.rtmClient.addEventListener('status', (event: any) => {
|
|
|
- console.log('status event: ', event);
|
|
|
- // The current connection state.
|
|
|
- const currentState = event.state;
|
|
|
- const changeReason = event.reason;
|
|
|
- // this.showMessage('INFO', JSON.stringify(event));
|
|
|
+ this.rtmClient.addEventListener('linkState', (event: any) => {
|
|
|
+ console.log('连接状态: ', event);
|
|
|
+ // this.rtmClientMap[channelName].connectState = event.currentState;
|
|
|
});
|
|
|
}
|
|
|
/* 加入频道 */
|
|
|
- async join() {
|
|
|
- const options = {
|
|
|
- token: this.options.token,
|
|
|
- withPresence: true,
|
|
|
- withLock: true,
|
|
|
- withMetadata: true,
|
|
|
- };
|
|
|
+ // async join(channelName: string) {
|
|
|
+ // const options = {
|
|
|
+ // token: this.options[channelName].token,
|
|
|
+ // withPresence: true,
|
|
|
+ // withLock: true,
|
|
|
+ // withMetadata: true,
|
|
|
+ // };
|
|
|
+ // try {
|
|
|
+ // const streamChannel =
|
|
|
+ // this.rtmClientMap[channelName].rtmClient.createStreamChannel(
|
|
|
+ // channelName
|
|
|
+ // );
|
|
|
+ // const result = await streamChannel.join(options);
|
|
|
+ // } catch (status) {
|
|
|
+ // console.error('join channel failed: ', status);
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ async loginRTM(channelName?: string) {
|
|
|
try {
|
|
|
- const streamChannel = this.rtmClient.createStreamChannel(
|
|
|
- this.msChannelName
|
|
|
- );
|
|
|
- const result = await streamChannel.join(options);
|
|
|
- } catch (status) {
|
|
|
- console.error('join channel failed: ', status);
|
|
|
- }
|
|
|
- }
|
|
|
- async loginRTM() {
|
|
|
- // console.log(this.options.token);
|
|
|
- try {
|
|
|
- const result = await this.rtmClient.login({ token: this.options.token });
|
|
|
- // console.log(result);
|
|
|
+ await this.rtmClient.login({
|
|
|
+ token: this.options.token,
|
|
|
+ });
|
|
|
+ this.options.connectState = true; // 登录成功
|
|
|
+ let userMateData = await this.getUserMetadata(this.userId);
|
|
|
+ if(!userMateData){
|
|
|
+ let user = Parse.User.current();
|
|
|
+ const metadata = [
|
|
|
+ {
|
|
|
+ key: 'nickname',
|
|
|
+ value: user?.get('nickname'),
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: 'avatar',
|
|
|
+ value:
|
|
|
+ user?.get('avatar') ??
|
|
|
+ 'https://file-cloud.fmode.cn/DXNgcD6zo6/20221202/j6p8kb034039.png',
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ const options = {
|
|
|
+ userId: this.userId,
|
|
|
+ addTimeStamp: true,
|
|
|
+ addUserId: true,
|
|
|
+ };
|
|
|
+ let result = await this.rtmClient.storage.setUserMetadata(
|
|
|
+ metadata,
|
|
|
+ options
|
|
|
+ );
|
|
|
+ console.log(JSON.stringify(result));
|
|
|
+ }
|
|
|
} catch (status) {
|
|
|
console.log(status);
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
- subscribeMessage(channelId: string, callback?: any) {
|
|
|
- this.rtmClient.subscribe(channelId);
|
|
|
+ logOutRTM() {
|
|
|
+ this.rtmClient.logout().then(() => {
|
|
|
+ console.log('logout success');
|
|
|
+ this.options.connectState = false
|
|
|
+ });
|
|
|
+ }
|
|
|
+ /* 订阅消息 */
|
|
|
+ subscribeMessage(channelName: string, param?: any, callback?: any) {
|
|
|
+ if (this.channelNameList[channelName]) return;
|
|
|
+ const options = {
|
|
|
+ withMessage: param?.message ?? false, // message 事件
|
|
|
+ withPresence: false, // presence 事件
|
|
|
+ beQuiet: false, // quiet 事件
|
|
|
+ withMetadata: false, // metadata 事件
|
|
|
+ withLock: false, // lock 事件
|
|
|
+ };
|
|
|
+ this.rtmClient
|
|
|
+ .subscribe(channelName, options)
|
|
|
+ .then((res: any) => {
|
|
|
+ console.log('subscribeMessage', res);
|
|
|
+ //订阅成功
|
|
|
+ this.channelNameList[channelName] = true;
|
|
|
+ })
|
|
|
+ .catch((err: any) => {
|
|
|
+ console.error('subscribeMessageErr', err);
|
|
|
+ });
|
|
|
+ }
|
|
|
+ /* 取消订阅 */
|
|
|
+ unsubscribeMessage(channelName: string) {
|
|
|
+ this.rtmClient
|
|
|
+ .unsubscribe(channelName)
|
|
|
+ .then((res: any) => {
|
|
|
+ console.log('unsubscribeMessage', res);
|
|
|
+ //订阅成功
|
|
|
+ this.channelNameList[channelName] = false;
|
|
|
+ })
|
|
|
+ .catch((err: any) => {
|
|
|
+ console.error('unsubscribeMessage', err);
|
|
|
+ });
|
|
|
}
|
|
|
|
|
|
- showMessage(user: any, msg: string) {
|
|
|
- console.log(user, msg);
|
|
|
- this.messageList.push({
|
|
|
- user,
|
|
|
- msg,
|
|
|
+ async showMessage(param: any) {
|
|
|
+ let userData = await this.getUserMetadata(param.publisher);
|
|
|
+ let is_self = param.publisher == this.userId;
|
|
|
+ // let r: any = Parse.User.current()!;
|
|
|
+ // if (!is_self) {
|
|
|
+ // let queryUser = new Parse.Query('_User');
|
|
|
+ // queryUser.equalTo('objectId', param.publisher);
|
|
|
+ // queryUser.select('avatar', 'nickname');
|
|
|
+ // r = await queryUser.first();
|
|
|
+ // }
|
|
|
+ console.log(userData);
|
|
|
+ let message = JSON.parse(param.message);
|
|
|
+ this.messageMapList[param.channelName].push({
|
|
|
+ is_self: is_self,
|
|
|
+ avatar:
|
|
|
+ userData.avatar.value ??
|
|
|
+ 'https://file-cloud.fmode.cn/DXNgcD6zo6/20221202/j6p8kb034039.png',
|
|
|
+ msg_type: 1,
|
|
|
+ name: userData.nickname.value ?? '未知用户',
|
|
|
+ content: message?.message ?? '',
|
|
|
+ create_time: new Date(param.timeStamp),
|
|
|
+ istoday: true,
|
|
|
+ timeStamp: new Date(param.timeStamp),
|
|
|
});
|
|
|
- // const inputText = textInput.value;
|
|
|
- // const newText = document.createTextNode(user + ": " + msg);
|
|
|
- // const newLine = document.createElement("br");
|
|
|
- // textDisplay.appendChild(newText);
|
|
|
- // textDisplay.appendChild(newLine);
|
|
|
+ this.pageFun?.();
|
|
|
+ }
|
|
|
+ async getUserMetadata(uid: string) {
|
|
|
+ try {
|
|
|
+ const result = await this.rtmClient.storage.getUserMetadata({
|
|
|
+ userId: uid,
|
|
|
+ });
|
|
|
+ return result.metadata;
|
|
|
+ } catch (status) {
|
|
|
+ console.log(JSON.stringify(status));
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
- async publishMessage(message: string) {
|
|
|
+ async publishMessage(message: string, channelName: string) {
|
|
|
const payload = { type: 'text', message: message };
|
|
|
const publishMessage = JSON.stringify(payload);
|
|
|
const publishOptions = { channelType: 'MESSAGE' };
|
|
|
try {
|
|
|
const result = await this.rtmClient.publish(
|
|
|
- this.msChannelName,
|
|
|
+ channelName,
|
|
|
publishMessage,
|
|
|
publishOptions
|
|
|
);
|
|
|
- this.showMessage(this.options.userId, publishMessage);
|
|
|
console.log(result);
|
|
|
} catch (status) {
|
|
|
console.log(status);
|
