前言

okey,我们再来实现一个小东西，没错就是这个玩意：

就是这个在线群聊的一个窗口。那么这里的实现的话，也是非常的简便，这里就不做那么复杂了。有需要再迭代，CAP当中的BASE理论的B是这样的。

当然这里的后端实现的话，当然还是通过netty进行实现，然后当你点击进入这个文章的实时聊天页面的时候，也就是进入了这个房间。当有新的消息发送的时候，我们就会刷新一次这个房间的消息，做一个推送到这个房间的所有用户。当然，这里的话，这些弹幕是不会保存的，在这里，如果一篇文章超过多少时间没有用户查看，那么这个文章对应的房间就会销毁，那么原来对应的弹幕记录就会释放。这个是没有办法的事情。服务器开销太大了，确实都顶不住。当然，在后端进行编写的时候，对应的接口肯定留下，那么你感兴趣，你自己后面扩展去。

结构

老规矩，看到结构：

html 复制代码

  <!-- 弹幕抽屉 -->
    <el-drawer v-model="drawer" title="I am the title" :with-header="false">
        <div class="Barrage">

            <h6>当前在线阅读人数：3</h6>
            <el-scrollbar class="chat-content">
                <!-- recordContent 聊天记录数组-->
                <div v-for="(itemc, indexc) in recordContent" :key="indexc">
                    <!-- 其他人发送的 -->
                    <div class="word" v-if="!itemc.mineMsg">
                        <img :src="itemc.headUrl">
                        <div class="info">
                            <p class="time">{{ itemc.nickName }} {{ itemc.timestamp }}</p>
                            <div class="info-content">{{ itemc.contactText }}</div>
                        </div>
                    </div>
                    <!-- 我发送的 -->
                    <div class="word-my" v-else>
                        <div class="info">
                            <p class="time">{{ itemc.nickName }} {{ itemc.timestamp }}</p>
                            <div class="info-content">{{ itemc.contactText }}</div>
                        </div>
                        <img :src="itemc.headUrl">
                    </div>
                </div>
            </el-scrollbar>
            <!-- 发送弹幕的输入按钮 -->
            <br>
            <div class="speak">
                <el-input v-model="input" placeholder="发送弹幕" clearable />
                <el-button type="primary">发送</el-button>
            </div>
        </div>
    </el-drawer>

这里的话，还是用了一下这个element-plus的。主要就是v-if然后判断一下，消息是别人发的就放在左边，自己的在右边。

然后差不多这个玩意就写好了。

CSS

然后看到对应的CSS，然后就差不多了。

css 复制代码

.speak {
    display: flex;
    gap: 10px;
    height: 30px;
    width: 90%;
    margin: 0 auto;
    padding: 20px;
    border-radius: 5px;
    background-color: #a4adbc;
}

.Barrage {
    display: flex;
    flex-direction: column;
}

.chat-content {
    width: 90%;
    margin: 0 auto;
    padding: 20px;
    border-radius: 5px;
    height: 500px;
    background-color: #e2e3e4;
}

.chat-content .word {
    display: flex;
    margin-bottom: 20px;
}

.chat-content .word img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.chat-content .word .info {
    margin-left: 10px;
}

.chat-content .word .info .time {
    font-size: 12px;
    color: rgba(51, 51, 51, 0.8);
    margin: 0;
    height: 20px;
    line-height: 20px;
    margin-top: -5px;
}

.chat-content .word .info .info-content {
    padding: 10px;
    font-size: 14px;
    background: #fff;
    position: relative;
    margin-top: 8px;
}

.chat-content .word .info .info-content::before {
    position: absolute;
    left: -8px;
    top: 8px;
    content: '';
    border-right: 10px solid #FFF;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
}

.chat-content .word-my {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 20px;
}

.chat-content .word-my img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.chat-content .word-my .info {
    width: 90%;
    margin-left: 10px;
    text-align: right;
}

.chat-content .word-my .info .time {
    font-size: 12px;
    color: rgba(51, 51, 51, 0.8);
    margin: 0;
    height: 20px;
    line-height: 20px;
    margin-top: -5px;
    margin-right: 10px;
}

.chat-content .word-my .info .info-content {
    max-width: 70%;
    padding: 10px;
    font-size: 14px;
    float: right;
    margin-right: 10px;
    position: relative;
    margin-top: 8px;
    background: #A3C3F6;
    text-align: left;
}

.chat-content .word-my .info .info-content::after {
    position: absolute;
    right: -8px;
    top: 8px;
    content: '';
    border-left: 10px solid #A3C3F6;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
}

然后这的话，对应的一个数据是这样的：

js 复制代码

interface RecordContent {
    timestamp: string;
    nickName: string;
    headUrl: string;
    contactText: string;
    mineMsg: boolean;
}
const recordContent = ref<RecordContent[]>([
    {
        headUrl: "./../static/image/card1.png", nickName: "Java",
        contactText: "Java是一种通用的，基于类的，面向对象的编程语言。",
        timestamp: "2023-12-11-15:52",
        mineMsg: false
    },
    {
        headUrl: "./../static/image/card1.png", nickName: "Java",
        contactText: "Java是一种通用的，基于类的，面向对象的编程语言。",
        timestamp: "2023-12-11-15:52",
        mineMsg: false
    },
    {
        headUrl: "./../static/image/card1.png", nickName: "Java",
        contactText: "Java是一种通用的，基于类的，面向对象的编程语言。",
        timestamp: "2023-12-11-15:52",
        mineMsg: false
    },
    {
        headUrl: "./../static/image/card1.png", nickName: "Java",
        contactText: "Java是一种通用的，基于类的，面向对象的编程语言。",
        timestamp: "2023-12-11-15:52",
        mineMsg: false
    },
    {
        headUrl: "./../static/image/card1.png", nickName: "Java",
        contactText: "Java是一种通用的，基于类的，面向对象的编程语言。",
        timestamp: "2023-12-11-15:52",
        mineMsg: false
    },
    {
        headUrl: "./../static/image/card1.png", nickName: "Java",
        contactText: "Java是一种通用的，基于类的，面向对象的编程语言。",
        timestamp: "2023-12-11-15:52",
        mineMsg: false
    },
    {
        headUrl: "./../static/image/card1.png", nickName: "Java",
        contactText: "Java是一种通用的，基于类的，面向对象的编程语言。",
        timestamp: "2023-12-11-15:52",
        mineMsg: true
    },
])

okey，这个的话，就是完整的代码了那么到这里的话，我觉得基本的前端就差不多了，那么就是我们后面的一个编写

毕设之-Hlang社区-简易前端聊天对话窗实现

前言

结构

CSS