RTM:ERROR Error Code 102: sendMessage failed with args: {“messageType”:”TEXT”}

I am developing a chat service using channel messaging of Agora RTM WebSDK. I would like to call the sendMessage method and to send the input message (input element with id is “message”) when the send button is pushed. However, RTM ERROR has occurred and the sendMessage method did not work when the sendMessage method is called. I confirmed the token was generated and the login was succeeded. The script and the error are as follows.

<template>
    <div>
        <table class="comment-sender-box">
            <tr>
                <td colspan="3">
                    <textarea id="chatBox" rows="4" cols="40">{{ messages }}</textarea>
                </td>
            </tr>
            <tr>
                <td colspan="2" class="message-wrapper">
                    <input id="message" v-model="message">
                </td>
                <td class="btnSendMessage-wrapper">
                    <button id="btnSendMessage">
                        <font-awesome-icon icon="paper-plane" />
                    </button>
                </td>            
            </tr>
        </table>
        
    </div>
</template>

<script>
    import Vue from 'vue';
    import {RtcTokenBuilder, RtmTokenBuilder, RtcRole, RtmRole} from 'agora-access-token';
    import AgoraRTM from 'agora-rtm-sdk';
    import { library } from '@fortawesome/fontawesome-svg-core';
    import { fas } from '@fortawesome/free-solid-svg-icons';
    import { fab } from '@fortawesome/free-brands-svg-icons';
    import { far } from '@fortawesome/free-regular-svg-icons';
    import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
    library.add(fas, far, fab);
    Vue.component('font-awesome-icon', FontAwesomeIcon);

    export default Vue.extend({
        data: {
            name: '',
            messages: '',
            message: ''
        },
        async created() {
            this.name = this.$route.query.user;
            var user_id = this.name;
            const appID = "**********";
            const channelName = "**********";

            const chat_token = await function(){
                const appCertificate = "**********";
                const role = RtmRole.Rtm_User;
                const expirationTimeInSeconds = 36000;
                const currentTimestamp = Math.floor(Date.now() / 1000);
                const privilegeExpiredTs = currentTimestamp + expirationTimeInSeconds;
                const token = RtmTokenBuilder.buildToken(appID, appCertificate, user_id, role, privilegeExpiredTs);
                console.log("RTM Token : " + token);
                return token
            };

            const chat_client = AgoraRTM.createInstance(appID);
            chat_client.on('ConnectionStateChanged', (newState, reason) => {
                console.log('on connection state changed to ' + newState + ' reason: ' + reason);
            });
            chat_client.login({ token: chat_token(), uid: user_id }).then(() => {
                console.log('AgoraRTM client login success');
            }).catch(err => {
                console.log('AgoraRTM client login failure', err);
            });
            const chat_channel = chat_client.createChannel(channelName);
            chat_channel.join().then(() => {}).catch(error => {});
            chat_channel.on('ChannelMessage', ({ text }, senderId) => {
                this.messages = this.messages + "n" + text;
            });

            document.getElementById("btnSendMessage").addEventListener("click", ()=>{
                chat_channel.sendMessage({text: 'test message'}).then(() => {
                    this.messages = this.messages + "n" + this.message;
                }).catch(error => {});
            })
        }
    })

</script>

RTM:ERROR Error Code 102: sendMessage failed with args: {"messageType":"TEXT"}.

Answer

Per the official documentation: Check here

error code 102

suggests that

the login operation did not complete when you start to send a channel message.