使用websocket 实现的,以下是基本的步骤
基本思路:
-
安装包
npm i socket.io-client
-
在创建组件时
-
创建websocket连接
-
监听connect事件,连接成功
-
监听message事件,收到回复时,添加到聊天记录中
-
-
点击发送按钮后
-
按照接口要求,封装消息对象
-
通过emit发出去
-
清空输入框内容
-
以下代码呢,是聊天室的基本结构与样式!!!
<template>
<div class="container">
<!-- 固定导航 -->
<van-nav-bar fixed left-arrow @click-left="$router.back()" title="聊天室"></van-nav-bar>
<!-- 聊天主体区域 -->
<div class="chat-list">
<!-- 左侧是机器人 -->
<div class="chat-item left">
<van-image fit="cover" round src="https://img.yzcdn.cn/vant/cat.jpeg" />
<div class="chat-pao">hi,你好</div>
</div>
<!-- 右侧是当前用户 -->
<div class="chat-item right">
<div class="chat-pao">123123</div>
<van-image fit="cover" round src="https://img.yzcdn.cn/vant/cat.jpeg" />
</div>
</div>
<!-- 对话区域 -->
<div class="reply-container van-hairline--top">
<van-field v-model.trim="word" placeholder="说点什么...">
<span @click="send()" slot="button" style="font-size:12px;color:#999">提交</span>
</van-field>
</div>
</div>
</template>
<script>
export default {
name: 'UserChat',
data () {
return {
word: ''
}
},
methods: {
send () {
console.log(this.word)
}
}
}
</script>
<style lang="less" scoped>
.container {
height: 100%;
width: 100%;
position: absolute;
left: 0;
top: 0;
box-sizing: border-box;
background:#fafafa;
padding: 46px 0 50px 0;
.chat-list {
height: 100%;
overflow-y: scroll;
.chat-item{
padding: 10px;
.van-image{
vertical-align: top;
width: 40px;
height: 40px;
}
.chat-pao{
vertical-align: top;
display: inline-block;
min-width: 40px;
max-width: 70%;
min-height: 40px;
line-height: 38px;
border: 0.5px solid #c2d9ea;
border-radius: 4px;
position: relative;
padding: 0 10px;
background-color: #e0effb;
word-break: break-all;
font-size: 14px;
color: #333;
&::before{
content: "";
width: 10px;
height: 10px;
position: absolute;
top: 12px;
border-top:0.5px solid #c2d9ea;
border-right:0.5px solid #c2d9ea;
background: #e0effb;
}
}
}
}
}
.chat-item.right{
text-align: right;
.chat-pao{
margin-left: 0;
margin-right: 15px;
&::before{
right: -6px;
transform: rotate(45deg);
}
}
}
.chat-item.left{
text-align: left;
.chat-pao{
margin-left: 15px;
margin-right: 0;
&::before{
left: -5px;
transform: rotate(-135deg);
}
}
}
.reply-container {
position: fixed;
left: 0;
bottom: 0;
height: 44px;
width: 100%;
background: #f5f5f5;
z-index: 9999;
}
</style>
以下代码解决聊天滚动条的问题
scrollToBottom () {
this.$nextTick(() => {
const dom = this.$refs.refList
// scrollTop 是dom元素的属性,可以去手动设置
// 它表示当前dom元素中的滚动条距离元素顶部的距离
dom.scrollTop = dom.scrollHeight
})
}
这里为啥会想到用$nextTick呢?
每次把数组里面push新的消息的时候,在执行滚动条,如果我不用这个,滚动条位置不会更新,$nextTick是在下次dom更新完成之后执行回调,可以完美的解决这个问题。