js实现发送消息功能

最新推荐文章于 2023-03-22 12:14:44 发布

Wanjun1772

最新推荐文章于 2023-03-22 12:14:44 发布

阅读量3.2k

点赞数

分类专栏：前端小功能实现

本文链接：https://blog.csdn.net/wa2661391317/article/details/105561071

版权

前端小功能实现专栏收录该内容

1 篇文章 0 订阅

订阅专栏

方法：1.一是函数传值告诉要不要发送（即按Enter键可以发送消息）

async handleEnter(e,isPaste) {
        let message = this.state.html
        var conversation = this.props.conversation;

        if( !conversation || !message) return

        if(e.ctrlKey && e.charCode === 13){
            e.preventDefault();
            this.setState({
                html: message + '\n'
            })
            return;
        }

        if(e.charCode === 13 || isPaste)
        {
            //修改一直回车发送空白
            let reg = new RegExp('<div><br></div>','g')
            let reg2 = new RegExp('<div></div>','g')
            let removeEnter = message.replace(reg,'')
            removeEnter = removeEnter.replace(/\s/g , '')
            removeEnter = removeEnter.replace(reg2 , '')
            if(removeEnter.trim() === ''){
                return
            }
            // TODO batch
            var batch = conversation.length > 1;

            // You can not send message to yourself
            // await this.props.sendMessage(
            //     new TextMessageContent(message)
            // )
            
            // 如果含有表情 发送前要处理掉[微笑]  解决方案来自光
            var regSendMsg = message.replace(/<[^>]+>/g, function (match) {
                var flag = match.match(/flag\=\"(\[.+\])\"/g)
                return flag[0].replace(/(flag\=\"|\")/g, '')
                // var flag = match.match(/(?<=flag\=\")\[.+\]/g)
                // return flag[0]                
              })

            let textMessageContent = this.handleMention(regSendMsg);

            this.props.sendMessage(textMessageContent);
            this.setState({
                html: ''
            })
            wfc.setConversationDraft(conversation, '');
            e.preventDefault();
        }
    }

JSX部分

 <ContentEditable
                    id="messageInput"
                    ref="input"
                    onPaste={e => this.handlePaste(e,true)}
                    onKeyPress={e => this.handleEnter(e)}
                    placeholder="输入消息"
                    tagName="pre"
                    html={this.state.html} // innerHTML of the editable div
                    disabled={!canisend}       // use true to disable editing
                    onChange={this.contentChange} // handle innerHTML change
                />

2.是去掉发送前的判断，（ if(e.charCode === 13 || isPaste)）跟第一种方法一样，只是去掉if的判断条件,即点击发送按钮发送消息

async clickSendMessage(e,isPaste) {
        let message = this.state.html
        var conversation = this.props.conversation;

        if( !conversation || !message) return

        if(e.ctrlKey && e.charCode === 13){
            e.preventDefault();
            this.setState({
                html: message + '\n'
            })
            return;
        }

        if(true)
        {
            //修改一直回车发送空白
            let reg = new RegExp('<div><br></div>','g')
            let reg2 = new RegExp('<div></div>','g')
            let removeEnter = message.replace(reg,'')
            removeEnter = removeEnter.replace(/\s/g , '')
            removeEnter = removeEnter.replace(reg2 , '')
            if(removeEnter.trim() === ''){
                return
            }
            // TODO batch
            var batch = conversation.length > 1;

            // You can not send message to yourself
            // await this.props.sendMessage(
            //     new TextMessageContent(message)
            // )
            
            // 如果含有表情 发送前要处理掉[微笑]  解决方案来自光
            var regSendMsg = message.replace(/<[^>]+>/g, function (match) {
                var flag = match.match(/flag\=\"(\[.+\])\"/g)
                return flag[0].replace(/(flag\=\"|\")/g, '')
                // var flag = match.match(/(?<=flag\=\")\[.+\]/g)
                // return flag[0]                
              })

            let textMessageContent = this.handleMention(regSendMsg);

            this.props.sendMessage(textMessageContent);
            this.setState({
                html: ''
            })
            wfc.setConversationDraft(conversation, '');
            e.preventDefault();
        }      
    }

JSX

 <div 
                    id="sendAMessage"
                    disabled={!canisend}
                    className={classes.send_btn} 
                    onClick = {e => this.clickSendMessage(e)}>发送
                </div>