channel.on not recognized as a function in Twilio API

Question

I have the following function in a ReactJS app that is supposed to initialize the Twilio services that I am using. However, it seems like the Twilio channels are not being accessed correctly. Here is my code:

componentDidMount() {
    let chatClient = this;
    $.ajax({
        method: "GET",
        url: 'get_twilio_token',
        data: {device: chatClient.device},
        success: (data) => {
            let accessManager = new Twilio.AccessManager(data.token);
            //let messagingClient = new Twilio.Chat.Client(data.token);
            let messagingClient = new Twilio.Chat.Client.create(data.token).then(client => {
                client.getUserChannelDescriptors().then(channels => {
                    let channelsHash = {};
                    console.log('inside callback of messagingClient2')
                    channels.items.map(channel => {
                        channel.on('messageAdded', () => {})
                        channelsHash[channel.uniqueName] = channel;
                    });
                });
            });
        }
    });
}

This function throws an error message saying TypeError: channel.on is not a function in the line channel.on('messageAdded', () => {}).

Any help is appreciated. Thanks.

Answer 1

getUserChannelDescriptors() returns ChannelDescriptors not Channels. To get Channel you have to call getChannel for the descriptor: https://media.twiliocdn.com/sdk/js/chat/releases/1.0.0/docs/ChannelDescriptor.html#getChannel__anchor

Answer 2

This is how I've done it

async function getChannels() {

// Initialize the chat client
this.chatClient = new Chat(this.state.twilioToken);
await this.chatClient.initialize();

// Get channel descriptors
this.chatClient.getUserChannelDescriptors().then(paginator => {
    let channels = [];
    let channelsBulkFetch = [];

    if (paginator.items.length) {
        channels = paginator.items;
        // Loop through all channels and call getChannel() for each cahnnel
        for (let i = 0; i < paginator.items.length; i++) {
            channelsBulkFetch.push(channels[i].getChannel());
        }

        // Loop through each channel detailed object and perform various operations
        channels.map(channel => {
            // Do whatever you want with channel object

            channel.on('messageAdded', this.messageAdded);
        });
    }
 })
}

And for sorted channels with respective to last message timestamp

async function getSortedChannels() {

// Initialize the chat client
this.chatClient = new Chat(this.state.twilioToken);
await this.chatClient.initialize();

// Get channel descriptors
this.chatClient.getUserChannelDescriptors().then(paginator => {
    let channels = [];
    let sortedChannels = [];
    let channelsBulkFetch = [];

    if (paginator.items.length) {
        channels = paginator.items;
        // Loop through all channels and call getChannel() for each cahnnel
        for (let i = 0; i < paginator.items.length; i++) {
            channelsBulkFetch.push(channels[i].getChannel());
        }

        /**
         * Additional part for sorting
         */
        sortedChannels = channels.sort(function (a, b) {
            // Turn strings into dates, and then subtract them
            // If channel doesn't have any message consider the dateDreated for sorting
            return new Date(b.lastMessage ? b.lastMessage.timestamp : b.dateCreated) - new Date(a.lastMessage ? a.lastMessage.timestamp : a.dateCreated);
        });

        // Loop through each channel detailed object and perform various operations
        sortedChannels.map(channel => {
            // Do whatever you want with channel object

            channel.on('messageAdded', this.messageAdded);
        });
    }
 })
}