聊天Demo

参考链接

vue.js实现带表情评论功能前后端实现（仿B站评论）
vue.js实现带表情评论仿bilibili（滚动加载效果）

vue.js支持表情输入
vue.js表情文本输入框组件

个人说说vue组件

JS操作文本域获取光标/指定位置插入

使用

前端使用：vue.js + vuex + iconfont + element-ui
后端使用：springboot + mybatisplus + redis + netty + websocket + spring security

可能有不少问题，反正先按照自己思路一点一点写，再参考下别人是怎么搞的再优化

前端界面

先写下大概的前端界面，界面出来了，才有继续写下去的动力

消息窗口平滑滚动至底部

<div class="panel-main-body" ref="panelMainBodyContainerRef">

    <!-- 对应会话 的消息列表 -->
    <div class="msg-item-list" ref="msgItemListContainerRef">

        <div :class="['msg-item', familyChatMsg.senderId != currUserId ? 'other' : 'owner']"
             v-for="(familyChatMsg, idx) in familyChatMsgList" 
             :key="idx">
             
            <div class="avatar-wrapper ">
                <img :src="familyChatMsg.avatar" class="avatar fit-img" alt="">
            </div>
            
            <div class="msg">
            
                <div class="msg-header">
                    {
  { familyChatMsg.nickName }}
                </div>
                
                <div class="msg-content" v-html="familyChatMsg.content"></div>
            </div>

        </div>
    </div>
    
</div>

<script>
export default {
     

	methods: {
     
		/* 滚动至底部，不过调用此方法的时机应当在familyChatMsgList更新之后, 因此需要监听它 */
        scrollToEnd() {
     
            const panelMainBodyContainerRef = this.$refs['panelMainBodyContainerRef']
            const msgItemListContainerRef = this.$refs['msgItemListContainerRef']
            // console.log(msgItemListContainerRef.scrollTop);
            // console.log(panelMainBodyContainerRef.scrollHeight);
            msgItemListContainerRef.scrollTop = msgItemListContainerRef.scrollHeight
            console.log('滚动至底部~');
        },
    }

}
</script>

<style>
.msg-item-list {
     
     
	 /* 平滑滚动 */
     scroll-behavior: smooth;
}
</style>

vue使用watch监听vuex中的变量变化

computed: {
   
    ...mapGetters('familyChatStore', ['familyChatMsgList']),
},

watch: {
   
    // 监听store中的数据 - 是通过监听getters完成的
    familyChatMsgList:{
   
        handler(newVal, oldVal) {
   
            // console.log('---------------------');
            // console.log(newVal.length, oldVal.length);
            this.$nextTick(()=>{
   
                this.scrollToEnd()
            })
        }
    }

},