启动会话客户端，加入会话，并使用javascript客户端sdk和angular订阅twilio上的会话更改

Question

快速注释和编辑，看起来本教程可能会成为赢家https://recursive.codes/blog/post/37

我正在angular 8项目中使用twilio对话javascript客户端sdk。

订阅和异步操作仍然是我正在努力理解的内容。下面是我使用twilio对话的整个组件。之后我会列出我的问题。

import {Component, Input, OnInit} from '@angular/core';
import {Client as ConversationsClient} from '@twilio/conversations';
@Component({
selector: 'app-shochat-contentcreator-chat',
templateUrl: './shochat-contentcreator-chat.component.html',
styleUrls: ['./shochat-contentcreator-chat.component.scss']
})
export class ShochatContentcreatorChatComponent implements OnInit {
constructor() { }
@Input() twiliochattoken = null;
conversationsclient;
currentconnectionstate = null;

ngOnInit(): void {
console.log('here we are and stuff tho');
let initConversations = async () => {
this.conversationsclient = await ConversationsClient.create(this.twiliochattoken);
this.conversationsclient.join().then((result) => {
console.log('here is the result of joining the conversation');
console.log(result);
});
}

this.conversationsclient.on("connectionStateChanged", (state) => {
if (state == "connecting") {
this.currentconnectionstate = 'connecting';
}
if (state == "connected") {
this.currentconnectionstate = 'connected';
}
if (state == 'disconnecting') {
this.currentconnectionstate = 'disconnecting';
}
if (state == 'disconnected') {
this.currentconnectionstate = 'disconnected';
}
if (state == 'denied') {
this.currentconnectionstate = 'denied';
}
});
this.conversationsclient.on("conversationJoined", (conversation) => {
console.log('here is the result of the conversationJoined hook');
console.log(conversation);
});
}

}

上面的以下代码片段就是问题所在：

this.conversationsclient.on("connectionStateChanged", (state) => {
if (state == "connecting") {
this.currentconnectionstate = 'connecting';
}
......

我得到的错误是，代码无法对未定义的执行.on函数。这是有道理的，上面的函数是在init函数上调用的。

conversationsclient仍然未定义。但是，放置此代码的正确方式是什么？await ConversationsClient.create(.....)代码内部？

这会在状态更改时创建我想要的订阅吗？

此外，基于其意图，我的代码看起来如何。我觉得我错过了目标，不确定我是接近还是远离目标。

我参考了以下文件

https://www.twilio.com/docs/chat/initializing-sdk-clients

Answer 1

本教程给出了答案。我需要使用服务。

聊天服务：

import {EventEmitter, Injectable} from '@angular/core';
import * as Twilio from 'twilio-chat';
import Client from "twilio-chat";
import {Util} from "../util/util";
import {Channel} from "twilio-chat/lib/channel";
import {Router} from "@angular/router";
import {AuthService} from "./auth.service";
@Injectable()
export class ChatService {
public chatClient: Client;
public currentChannel: Channel;
public chatConnectedEmitter: EventEmitter<any> = new EventEmitter<any>()
public chatDisconnectedEmitter: EventEmitter<any> = new EventEmitter<any>()
constructor(
private router: Router,
private authService: AuthService,
) { }
connect(token) {
Twilio.Client.create(token).then( (client: Client) => {
this.chatClient = client;
this.chatConnectedEmitter.emit(true);
}).catch( (err: any) => {
this.chatDisconnectedEmitter.emit(true);
if( err.message.indexOf('token is expired') ) {
localStorage.removeItem('twackToken');
this.router.navigate(['/']);
}
});
}
getPublicChannels() {
return this.chatClient.getPublicChannelDescriptors();
}
getChannel(sid: string): Promise<Channel> {
return this.chatClient.getChannelBySid(sid);
}
createChannel(friendlyName: string, isPrivate: boolean=false) {
return this.chatClient.createChannel({friendlyName: friendlyName, isPrivate: isPrivate, uniqueName: Util.guid()});
}
}

组件：

ngOnInit() {
this.isConnecting = true;
this.chatService.connect(localStorage.getItem('twackToken'));
this.conSub = this.chatService.chatConnectedEmitter.subscribe( () => {
this.isConnected = true;
this.isConnecting = false;
this.getChannels();
this.chatService.chatClient.on('channelAdded', () => {
this.getChannels();
});
this.chatService.chatClient.on('channelRemoved', () => {
this.getChannels();
});
this.chatService.chatClient.on('tokenExpired', () => {
this.authService.refreshToken();
});
})
this.disconSub = this.chatService.chatDisconnectedEmitter.subscribe( () => {
this.isConnecting = false;
this.isConnected = false;
});
}