一对一聊天开发完成
This commit is contained in:
@@ -69,9 +69,12 @@ public class WebSocketServer {
|
||||
*/
|
||||
@OnMessage
|
||||
public void onMessage(String message) throws IOException {
|
||||
System.out.println("-------------------------------------------------------------------");
|
||||
JSONObject jsonObject = JSONObject.parseObject(message);
|
||||
String userId = jsonObject.getString("userId");
|
||||
String type = jsonObject.getString("type");
|
||||
System.out.println(type);
|
||||
System.out.println(message);
|
||||
if (type.equals(MessageType.CHAT.getType())) {
|
||||
log.debug("聊天消息推送");
|
||||
sendToUser(userId, JSONObject.toJSONString(jsonObject));
|
||||
|
||||
@@ -4,6 +4,7 @@ import com.alibaba.excel.annotation.ExcelIgnoreUnannotated;
|
||||
import com.alibaba.excel.annotation.ExcelProperty;
|
||||
import com.ruoyi.common.annotation.ExcelDictFormat;
|
||||
import com.ruoyi.common.convert.ExcelDictConvert;
|
||||
import com.ruoyi.common.core.domain.entity.SysUser;
|
||||
import lombok.Data;
|
||||
import java.util.Date;
|
||||
|
||||
@@ -58,5 +59,10 @@ public class SocketMessageVo {
|
||||
@ExcelProperty(value = "备注")
|
||||
private String remark;
|
||||
|
||||
/**
|
||||
* 用户数据
|
||||
*/
|
||||
private SysUser user;
|
||||
|
||||
|
||||
}
|
||||
|
||||
@@ -9,6 +9,7 @@ import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
|
||||
import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
|
||||
import com.baomidou.mybatisplus.core.toolkit.Wrappers;
|
||||
import com.ruoyi.system.domain.SocketMessage;
|
||||
import com.ruoyi.system.domain.vo.SocketMessageVo;
|
||||
import com.ruoyi.system.mapper.SocketMessageMapper;
|
||||
import com.ruoyi.system.mapper.SysUserMapper;
|
||||
import com.ruoyi.system.service.ISysUserService;
|
||||
@@ -25,6 +26,7 @@ import com.ruoyi.system.service.ISocketContactService;
|
||||
import java.util.List;
|
||||
import java.util.Map;
|
||||
import java.util.Collection;
|
||||
import java.util.stream.Collectors;
|
||||
|
||||
/**
|
||||
* 通信目录Service业务层处理
|
||||
@@ -56,7 +58,14 @@ public class SocketContactServiceImpl implements ISocketContactService {
|
||||
.eq(SocketMessage::getUserId, socketContactVo.getUserId())
|
||||
);
|
||||
|
||||
socketContactVo.setMessages(socketMessageMapper.selectVoList(socketMessageLambdaQueryWrapper));
|
||||
socketContactVo.setUser(sysUserMapper.selectUserById(socketContactVo.getContactUserId()));
|
||||
List<SocketMessageVo> socketMessageVos = socketMessageMapper.selectVoList(socketMessageLambdaQueryWrapper);
|
||||
socketMessageVos.stream()
|
||||
.peek(item->{
|
||||
SysUser sysUser = sysUserMapper.selectUserById(item.getUserId());
|
||||
item.setUser(sysUser);
|
||||
}).collect(Collectors.toList());
|
||||
socketContactVo.setMessages(socketMessageVos);
|
||||
return socketContactVo;
|
||||
}
|
||||
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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自定义事件
|
||||
|
||||
Reference in New Issue
Block a user