DeXun/fad_oa
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

一对一聊天开发完成

Browse Source
This commit is contained in:
86156
2024-10-31 17:24:37 +08:00
parent 8662ce971d
commit 1c152e2d1a
5 changed files with 103 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

97
ruoyi-ui/src/layout/components/Navbar.vue
View File

@@ -11,8 +11,8 @@
<search id="header-search" class="right-menu-item" />
<div style="position: absolute;top: 0;right: 280px;font-weight: 200">
<i style="position: relative;top: -7px;font-size: small;right: -20px;background-color: red;border-radius: 50%;color: white;width: 50px">99</i>
<div style="position: absolute;top: 0;right: 300px;font-weight: 200">
<!-- <i style="position: relative;top: -7px;font-size: small;right: -20px;background-color: red;border-radius: 50%;color: white;width: 50px">99</i>-->
<i class="el-icon-s-comment" @click="chat = true" style=""></i>
</div>
@@ -43,11 +43,81 @@
<el-drawer
size="50%"
:visible.sync="chat"
:with-header="false">
<!-- 好友列表-->
<el-aside width="" style="background-color: white">
<el-aside width="" style="background-color: white;display: flex;height: 90%">
<el-main :class="currentContact.id ? 'main' : 'main_empty'" v-loading="msgListLoading">
<div v-if="currentContact.id">
<el-row style="position: absolute;background: white;width: 50%;z-index: 999;height: 10%;top: 0;left: 10px">
<el-col :span="24" style="color: #666;position: relative;top: 25px">
<span style="font-weight: 500; font-size: 16px">{{currentContact.user.nickName}}</span>
<el-divider direction="vertical"/>
</el-col>
</el-row>
<el-row style="height: 60%">
<el-col :span="24" class="msg_content" id="message_content">
<el-row v-for="(item, index) in msgList" :key="item.id" :style="index > 0 && 'margin-top: 30px'">
<div v-if="item.userId === currentContact.contactUserId" style="">
<el-col :span="24" style="font-size: 16px;">
<div>{{item.user.nickName}}:</div>
<div style="display: flex">
<div style="background-color: #f6f6f6;border-radius: 5px;padding: 0 12px 0 12px;">
{{item.content}}
</div>
</div>
<div style="font-size: 11px; color: gray; margin-left: 5px">{{item.createTime}}</div>
</el-col>
</div>
<div v-else>
<el-col :span="24" style="font-size: 16px;">
<div class="chat_bubble">
<span>{{item.content}}</span>
</div>
<i class="el-icon-circle-check" style="float: right; margin-right: 5px; color: lightgray; vertical-align: bottom; margin-top: 23px"></i>
<span style="font-size: 11px; color: gray; margin-right: 5px; float: right; margin-top: 25px">{{item.createTime}}</span>
</el-col>
</div>
</el-row>
<el-row id="message_content_end" style="height: 15px"><el-col></el-col></el-row>
</el-col>
</el-row>
<el-row style="position: absolute;background: white;width: 50%;z-index: 999;height: 20%;bottom: 15px;left: 10px">
<el-col :span="24">
<el-row>
<el-col :span="24">
<el-popover
placement="top-start"
trigger="click">
<div>
<VEmojiPicker :showSearch="false" @select="insertEmoji" />
</div>
<img slot="reference" src="@/assets/images/emoji.png" title="表情" class="input_top_menu_img"/>
</el-popover>
</el-col>
</el-row>
<el-input type="textarea" :rows="3" v-model="inputVal" style="font-size: 17px; color: black;position: relative;height: 20%" @keyup.enter.native="send" placeholder="Enter 回车发送消息"/>
<el-button style="position: relative;left: 80%;top:10px" @click="send">发送</el-button>
</el-col>
</el-row>
</div>
<div v-else>
<el-row>
<el-col :span="24">
<img src="@/assets/images/message.png"/>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<span style="color: gray">与您进行过沟通的联系人都会在左侧列表中显示</span>
</el-col>
</el-row>
</div>
</el-main>
<el-container>
<el-header>
<el-row>
@@ -55,18 +125,13 @@
<el-input suffix-icon="el-icon-search" placeholder="Enter 回车搜索联系人" v-model="contactQueryParams.userName" @keyup.enter.native="getContactList"/>
</el-col>
</el-row>
<el-row style="margin-top: 5px">
<!-- TODO 这里搞一个弹窗去搜索用户表 从而进行添加好友操作 -->
<el-button size="mini">添加联系人</el-button>
</el-row>
<el-row style="margin-top: 5px">
<el-row style="margin-top: 15px">
<el-button size="mini">全部</el-button>
<el-button size="mini">个人</el-button>
<el-button size="mini">群聊</el-button>
</el-row>
</el-header>
<div v-loading="contactListLoading" style="margin-top: 30px">
<div v-loading="contactListLoading" style="margin-top: 10px">
<el-main v-if="contactList.length > 0" v-infinite-scroll="contactLoadMore" :infinite-scroll-distance="750" :infinite-scroll-disabled="contactListTotal < 10" class="msgListMain">
<el-row class="msgUserList" v-for="(item, index) in contactList" :key="item.contactUserId" :style="index > 0 && 'margin-top: 10px'" @click.native="loadMessage(item.id)">
<el-col :span="6">
@@ -111,7 +176,11 @@
</el-row>
</el-main>
</div>
</el-container>
</el-aside>
</el-drawer>
</div>
@@ -293,7 +362,6 @@ export default {
this.fleshScroll();
},
subscribeMessage(res) {
if (res) {
const { sendUserId, sendUserName, userId, type, detail } = res.detail.data;
const message = {
@@ -310,6 +378,7 @@ export default {
}
},
fleshLastMsg() {
console.log(this.contactList)
const index = this.contactList.findIndex(e => e.id === this.currentContact.id);
this.contactList[index].endMsg = this.msgList[this.msgList.length - 1].content;
},
@@ -452,7 +521,7 @@ export default {
}
.main {
background-color: white;
height: 600px;
height: 86%;
margin-left: 5px;
}
.main_empty {
@@ -471,7 +540,7 @@ export default {
}
.msg_content {
margin-top: 30px;
height: 390px;
height: 50%;
overflow: auto;
//background-color: gray;
}

5
ruoyi-ui/src/utils/websocket.js
View File

@@ -15,15 +15,11 @@ const initWebSocket = async () => {
console.log("未登录！websocket工具获取不到userId")
}else {
const wsUrl = process.env.VUE_APP_SOCKET_SERVER + store.state.user.id;
console.log("连接已开启")
socket = new WebSocket(wsUrl);
socket.onerror = webSocketOnError;
socket.onmessage = webSocketOnMessage;
socket.onclose = closeWebsocket;
socket.onopen = openWebsocket;
console.log(socket)
}
} else {
Notification.error({
@@ -94,6 +90,7 @@ const webSocketOnError = (e) => {
//服务器返回的数据
const webSocketOnMessage = (e)=> {
console.log(e)
//判断是否登录
if (getToken()) {
//window自定义事件