This commit is contained in:
Vinjor 2025-07-25 17:35:23 +08:00
commit cdd4faddca
11 changed files with 73 additions and 100 deletions

View File

@ -336,7 +336,6 @@ public class WebController extends BaseController {
* @param busiChatMain {@link BusiChatMain} * @param busiChatMain {@link BusiChatMain}
* @return com.ruoyi.common.core.domain.AjaxResult * @return com.ruoyi.common.core.domain.AjaxResult
**/ **/
@Log(title = "在线聊天", businessType = BusinessType.INSERT)
@PostMapping("/chatMain") @PostMapping("/chatMain")
public AjaxResult saveChatMain(@RequestBody BusiChatMain busiChatMain, HttpServletRequest request) { public AjaxResult saveChatMain(@RequestBody BusiChatMain busiChatMain, HttpServletRequest request) {
String ip = ""; String ip = "";

View File

@ -7,8 +7,16 @@ import java.util.Date;
@Data @Data
public class Message { public class Message {
private Integer id; private Integer id;
private String username; // private String username;
private String userface; // private String userface;
private String text; // private String text;
private Date date; // private Date date;
/**发送方*/
private String dataFrom;
/**聊天内容*/
private String content;
/**创建时间*/
private Date createTime;
} }

View File

@ -10,17 +10,14 @@ public class MessageUtil {
public Message toMessage(String content){ public Message toMessage(String content){
Message message = new Message(); Message message = new Message();
int id = atomicInteger.incrementAndGet();
message.setId(id);
String[] contents=content.split(","); String[] contents=content.split(",");
String name=contents[0]; String name=contents[0];
String userface=contents[1]; String text=contents[1];
String text=contents[2]; int id = atomicInteger.incrementAndGet();
message.setUsername(name); message.setId(id);
message.setUserface(userface); message.setDataFrom(name);
message.setText(text); message.setContent(text);
message.setDate(new Date()); message.setCreateTime(new Date());
return message; return message;
} }
} }

View File

@ -75,7 +75,6 @@ public class WebSocketServer {
}else{ }else{
GroupSending(message); GroupSending(message);
} }
} }
/** /**

View File

@ -2,28 +2,36 @@
<div id="app"> <div id="app">
<router-view /> <router-view />
<theme-picker /> <theme-picker />
<!-- 聊天记录弹出框-->
<chat-form ref="chatFrom"></chat-form>
</div> </div>
</template> </template>
<script> <script>
import ThemePicker from "@/components/ThemePicker"; import ThemePicker from "@/components/ThemePicker";
import Cookies from "js-cookie"; import Cookies from "js-cookie";
import { EventBus } from '@/utils/eventBus';
import chatForm from "@/views/busi/chatMain/chatForm";
export default { export default {
name: "App", name: "App",
components: { ThemePicker }, components: { ThemePicker,chatForm },
data(){ data(){
return{ return{
b:false, b:false,
} }
}, },
destroyed: function () { // destroyed: function () { //
this.$websocket.dispatch('websocket_close'); this.$store.dispatch('websocket_close')
}, },
created () { created () {
const username = Cookies.get('username') const username = Cookies.get('username')
this.$store.dispatch('websocket_init', process.env.VUE_APP_WEBSOCKET+username) this.$store.dispatch('websocket_init', process.env.VUE_APP_WEBSOCKET+username)
}, },
mounted(){
EventBus.$on('newMessage', (message) => {
this.$refs.chatFrom.openForm()
});
},
metaInfo() { metaInfo() {
return { return {
title: this.$store.state.settings.dynamicTitle && this.$store.state.settings.title, title: this.$store.state.settings.dynamicTitle && this.$store.state.settings.title,
@ -31,7 +39,8 @@ export default {
return title ? `${title} - ${process.env.VUE_APP_TITLE}` : process.env.VUE_APP_TITLE return title ? `${title} - ${process.env.VUE_APP_TITLE}` : process.env.VUE_APP_TITLE
} }
} }
} },
}; };
</script> </script>
<style scoped> <style scoped>

View File

@ -37,7 +37,6 @@ import DictTag from '@/components/DictTag'
import VueMeta from 'vue-meta' import VueMeta from 'vue-meta'
// 字典数据组件 // 字典数据组件
import DictData from '@/components/DictData' import DictData from '@/components/DictData'
import websocket from "./store/websocket";
// 全局方法挂载 // 全局方法挂载
Vue.prototype.getDicts = getDicts Vue.prototype.getDicts = getDicts

View File

@ -1,4 +1,4 @@
import { EventBus } from '@/utils/eventBus';
const websocket = { const websocket = {
state: { state: {
socket:null, socket:null,
@ -9,25 +9,24 @@ const websocket = {
mutations: { mutations: {
WEBSOCKET_INIT(state,url){ WEBSOCKET_INIT(state,url){
console.log(url);
state.socket = new WebSocket(url); state.socket = new WebSocket(url);
state.socket.onopen=function () { state.socket.onopen=function () {
console.log("WebSocket连接成功"); console.log("Websocket已连接")
}; };
state.socket.onmessage = function (e) { state.socket.onmessage = function (e) {
console.log(e,'接受到消息')
if (e.data.startsWith("C")) { if (e.data.startsWith("C")) {
state.count = e.data; state.count = e.data;
} else if (e.data.startsWith("系统通知")){
}
else if (e.data.startsWith("系统通知")){
state.notice.push(e.data); state.notice.push(e.data);
console.log(state.notice); console.log(state.notice);
} } else {
else {
console.log(e.data,'消息内容') console.log(e.data,'消息内容')
state.message.push(JSON.parse(e.data)); //这里捕获消息
// console.log(state.message); const messageData = JSON.parse(e.data)
// 触发事件通知
EventBus.$emit('newMessage', messageData);
//存储消息
state.message.push(messageData);
} }
}; };

View File

@ -1,64 +0,0 @@
// import Vue from 'vue'
// import Vuex from 'vuex'
//
// Vue.use(Vuex)
//
// export default new Vuex.Store({
// //定义全局变量
// state: {
// websock:null,
// message:[],
// count:"0",
// notice:[]
// },
// //改变state的值必须经过
// mutations: {
// WEBSOCKET_INIT(state,url){
// console.log(url);
// state.websock = new WebSocket(url);
// state.websock.onopen=function () {
// console.log("WebSocket连接成功");
// };
// state.websock.onmessage = function (e) {
// if (e.data.startsWith("C")) {
// state.count = e.data;
//
// }
// else if (e.data.startsWith("系统通知")){
// state.notice.push(e.data);
// console.log(state.notice);
// }
// else {
// state.message.push(JSON.parse(e.data));
// // console.log(state.message);
// }
//
// };
// state.websock.onerror= function () {
// console.log("WebSocket连接发生错误");
// };
// state.websock.onclose = function (e) {
// console.log("connection closed (" + e.code + ")");
// };
// },
// WEBSOCKET_SEND(state,msg){
// state.websock.send(msg);
// },
// WEBSOCKET_CLOSE(state){
// state.websock.close();
// }
// },
// actions: {
// websocket_init({commit}, url) {
// commit('WEBSOCKET_INIT', url)
// },
// websocket_send({commit}, msg) {
// commit('WEBSOCKET_SEND', msg)
// },
// websocket_close({commit}){
// commit('WEBSOCKET_CLOSE')
// }
// },
// modules: {
// }
// })

View File

@ -0,0 +1,2 @@
import Vue from 'vue';
export const EventBus = new Vue();

View File

@ -1,8 +1,8 @@
<template> <template>
<!-- 选择产品对话框 --> <!-- 选择产品对话框 -->
<el-dialog :title="title" :visible.sync="open" width="800px" append-to-body> <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
<div class="dl-chat-box" v-infinite-scroll="nextPage" > <div class="dl-chat-box" >
<template v-for="(item,index) in chatItemList"> <template v-for="(item,index) in messages">
<div v-if="item.dataFrom=='customer'" class="dl-customer-dom"> <div v-if="item.dataFrom=='customer'" class="dl-customer-dom">
<div class="dl-customer-photo"> <div class="dl-customer-photo">
<img src="@/assets/images/customer.jpg" > <img src="@/assets/images/customer.jpg" >
@ -25,7 +25,12 @@
</div> </div>
<div slot="footer" class="dialog-footer"> <div slot="footer" class="dialog-footer">
<el-button @click="cancelSelect"> </el-button> <el-input type="textarea"
class="inputT"
placeholder="按 Enter 发送" v-model="text"
@keyup.enter.native="sendToServer"
></el-input>
<el-button type="primary" icon="el-icon-s-promotion" @click="sendToServer"></el-button>
</div> </div>
</el-dialog> </el-dialog>
</template> </template>
@ -42,9 +47,11 @@ export default {
// //
open: false, open: false,
// 线 // 线
chatItemList: [], messages: [],
// //
pages:0, pages:0,
//
text:'',
// //
queryParams: { queryParams: {
mainId: null, mainId: null,
@ -62,6 +69,12 @@ export default {
this.queryParams.mainId = id this.queryParams.mainId = id
this.getList() this.getList()
}, },
openForm(){
this.open = true
this.messages = this.$store._modules.root.state.websocket.message
},
reset(){ reset(){
this.chatItemList=[] this.chatItemList=[]
}, },
@ -76,6 +89,13 @@ export default {
this.chatItemList = response.data; this.chatItemList = response.data;
}); });
}, },
/**发送消息*/
sendToServer() {
this.$store.dispatch('websocket_send',"platform," + this.text);
this.messages = this.$store._modules.root.state.websocket.message
this.text=''
}
} }
} }
</script> </script>

View File

@ -157,7 +157,7 @@
import chatForm from "@/views/busi/chatMain/chatForm"; import chatForm from "@/views/busi/chatMain/chatForm";
import { listChatMain, getChatMain, delChatMain, addChatMain, updateChatMain } from "@/api/busi/chatMain"; import { listChatMain, getChatMain, delChatMain, addChatMain, updateChatMain } from "@/api/busi/chatMain";
import Treeselect from '@riophae/vue-treeselect' import Treeselect from '@riophae/vue-treeselect'
import { EventBus } from '@/utils/eventBus';
export default { export default {
name: "ChatMain", name: "ChatMain",
components: { chatForm}, components: { chatForm},
@ -204,6 +204,11 @@ export default {
} }
}, },
}, },
mounted(){
EventBus.$on('newMessage', (message) => {
this.$refs.chatFrom.openForm()
});
},
created() { created() {
this.getList(); this.getList();
}, },