javascript - 使用 javascript 客户端 sdk 和 Angular 启动对话客户端、加入对话以及订阅 twilio 上的对话更改
问题描述
快速注释和编辑,看起来本教程可能是赢家 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(.....)
?
当状态发生变化时,这会创建我想要的订阅吗?
另外,我的代码如何根据其意图查看。我觉得我错过了目标,不确定我是接近还是远离目标。
我引用了以下文档
解决方案
本教程有答案。我需要使用服务。
聊天服务:
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;
});
}
推荐阅读
- html - 我正在使用 bootstrap v4.5,由于某种原因,当我使用 jumbotron 时,它会占据页面的整个宽度。我没有使用 jumbotron-fluid
- html - 最大高度和最大宽度不适用于 flex 子项
- python - 在 numba 的提前编译中使用类型化的字典
- database - 我正在寻找一个合适的数据库来分层存储社交媒体评论
- c# - 通过单击选择无法聚焦的 ListViewItem
- c++ - 为什么调用另一个函数后 lock_guard 不会被破坏?
- makefile - Makefile 中的虚假 docker.* 目标是什么意思?
- azure-data-factory-2 - 管道调试不做任何事情
- python - GeoPandas:如何绘制六边形几何图形?
- sql - 如何从 datediff 结果中删除尾随零?