使用 javascript 客户端 sdk 和 angular

如何解决使用 javascript 客户端 sdk 和 angular

快速注释和编辑，看起来本教程可能是赢家 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

解决方法

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

聊天服务：

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