使用 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);
    });
  }


}

上面的代码sn-p就是问题所在：

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;
  });
}