dianliang/dl_site_nuxt
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

1

Browse Source
This commit is contained in:
Vinjor 2025-08-28 18:02:01 +08:00
parent 203d18b44a
commit 125695ea89
3 changed files with 205 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
env.js
View File

@ -8,8 +8,8 @@ module.exports = {
// 开发环境 接口请求地址 (http)或(https)://www.a.com(换成你的域名)/api
dev: {
MODE: 'dev',
VUE_APP_API_URL: 'http://114.132.197.85:8099/',
// VUE_APP_API_URL: 'http://localhost:8099/',
// VUE_APP_API_URL: 'http://114.132.197.85:8099/',
VUE_APP_API_URL: 'http://localhost:8099/',
VUE_APP_WEBSOCKET: 'ws://localhost:8099/ws/asset/'
},
// 生产环境 接口请求地址 (http)或(https)://www.a.com(换成你的域名)/api 非独立部署默认为空

182
pages/products/chatForm.vue
View File

@ -59,17 +59,22 @@ export default {
name: 'chatForm',
data() {
return {
//
//设备唯一码
deviceCode:null,
open: false,
title: null,
//消息
//消息集合
message: [],
//会话ID
sessionId:null,
//客服ID
serviceId:null,
//发送消息内容
text: null,
//聊天信息
chatMain: {},
//产品id
productId:'',
//设备类型
equipment:null,
}
},
@ -77,7 +82,11 @@ export default {
// 离开页面生命周期函数
this.$store.dispatch('modules/websocket/websocket_close')
},
watch:{
message(val) {
this.scrollBottom()
}
},
mounted() {
},
@ -94,63 +103,93 @@ export default {
*/
show(id) {
this.open = true
this.getChatMain(id)
this.productId = id
this.getChatMain()
},
/**获取原有聊天记录*/
getChatMain(id) {
console.log(id,'prodId')
getChatMain() {
//获取当前浏览器唯一id
Fingerprint2.get((components) => {
const values = components.map((component) => component.value);
const fingerprintHash = Fingerprint2.x64hash128(values.join(''), 31);
const data = {
cusCode: fingerprintHash,
tenantId: 'main',
prodId:id,
};
this.deviceCode = Fingerprint2.x64hash128(values.join(''), 31);
const userAgent = navigator.userAgent || navigator.vendor || window.opera;
// 简单判断是否为手机端
if (/android|webos|iphone|ipod|BlackBerry|iemobile|opera mini/i.test(userAgent.toLowerCase())) {
data.equipment = '手机端';
this.equipment = '手机端';
} else {
data.equipment = 'pc端';
this.equipment = 'pc端';
}
const websocketUrl = process.env.NUXT_ENV.VUE_APP_WEBSOCKET+`${this.deviceCode}`;
// 调用Vuex dispatch，初始化WebSocket
this.$store.dispatch('modules/websocket/websocket_init', websocketUrl)
.then(() => {
console.log('WebSocket 初始化成功');
})
.catch((err) => {
console.error('WebSocket 初始化失败:', err);
});
// 这里使用箭头函数，确保 `this` 指向当前 Vue 实例
this.$axios.$post('/web/chatMain', data).then((res) => {
if (res.id != null) {
this.chatMain = res;
if (this.chatMain.jsonArray != null){
this.message = this.chatMain.jsonArray
this.$store.dispatch('modules/websocket/set_message',this.chatMain.jsonArray);
}
const websocketUrl = process.env.NUXT_ENV.VUE_APP_WEBSOCKET+`${fingerprintHash}`;
// 调用Vuex dispatch，初始化WebSocket
this.$store.dispatch('modules/websocket/websocket_init', websocketUrl)
.then(() => {
console.log('WebSocket 初始化成功');
})
.catch((err) => {
console.error('WebSocket 初始化失败:', err);
});
this.$axios.$get('/chat/active?deviceCode='+this.deviceCode+'&prodId='+this.productId).then((res) => {
if (null!=res && res.id != null) {
//有活跃的聊天
this.sessionId = res.id
this.serviceId = res.userId
//加载消息内容
this.loadMessages()
// if (this.chatMain.jsonArray != null){
// this.message = this.chatMain.jsonArray
// this.$store.dispatch('modules/websocket/set_message',this.chatMain.jsonArray);
// }
} else {
console.error('请求返回错误:', res);
//没有，创建新的消息对话
this.createNewSession()
}
}).catch(error => {
console.error('请求错误:', error);
});
});
},
//加载消息内容
loadMessages(){
this.$axios.$get('/chat/session/'+this.sessionId).then((res) => {
this.message = res
this.$store.dispatch('modules/websocket/set_message',res);
this.scrollBottom()
}).catch(error => {
console.error('连接客服失败，请稍后再试:', error);
});
},
createNewSession() {
const session = {
cusCode: this.deviceCode,
equipment: this.equipment,
prodId: this.productId
}
this.$axios.$post('/chat/newChat', session).then((res) => {
this.sessionId = res.id
this.serviceId = res.userId
//发个消息，通知客服建立会话关系
const wsMsg = {
type: 2,
toUserId: this.serviceId,
sessionId: this.sessionId,
fromUserId: this.deviceCode
}
this.$store.dispatch('modules/websocket/websocket_send',JSON.stringify(wsMsg));
}).catch(error => {
console.error('连接客服失败，请稍后再试:', error);
});
},
/**弹窗关闭方法*/
close() {
console.log(this.chatMain,'this.chatMain')
this.$store.dispatch('modules/websocket/websocket_close')
let data = {
id:this.chatMain.id,
jsonArray:this.message
}
// let data = {
// id:this.chatMain.id,
// jsonArray:this.message
// }
//关闭时将消息保存到数据库
this.$axios.$post('/web/saveMessage', data).then((res)=>{
console.log(res)
@ -159,10 +198,67 @@ export default {
/**发送消息*/
sendToServer() {
this.$store.dispatch('modules/websocket/websocket_send',"customer," + this.text);
this.message=this.$store.state.modules.websocket.messages;
this.text=''
}
// 构造消息对象
const message = {
mainId: this.sessionId,
dataFrom: "customer", // 用户发送
senderId: this.deviceCode, // 用设备编码作为用户标识
receiverId: this.serviceId,
content: this.text,
}
this.$axios.$post('/chat/newMes', message).then((res) => {
// 成功后再通过WebSocket实时发送给客服
const wsMsg = {
type: 1,
toUserId: this.serviceId,
content: this.text,
sessionId: this.sessionId,
fromUserId: this.deviceCode
}
this.$store.dispatch('modules/websocket/websocket_send',JSON.stringify(wsMsg));
this.addMyMsg()
this.scrollBottom()
}).catch(error => {
console.error('消息发送失败，请关闭聊天窗口稍后再试:', error);
});
},
//把自己发的消息添加的消息列表中
addMyMsg(){
let newMsg = {
id: new Date().getTime(), // 临时ID，实际应该从消息中获取
mainId: this.sessionId,
dataFrom: "customer", // 用户发送
senderId: this.deviceCode,
receiverId: this.serviceId,
content: this.text,
createTime: new Date().toLocaleString('zh-CN', {
year: 'numeric',
month: '2-digit',
day: '2-digit',
hour: '2-digit',
minute: '2-digit',
second: '2-digit',
hour12: false
}).replace(/\//g, '-'),
isRead: 1 // 已读
}
// 创建新的数组而不是直接修改原数组
const updatedMessages = [...this.message, newMsg];
this.$store.dispatch('modules/websocket/set_message', updatedMessages);
// 更新本地message引用
this.message = updatedMessages;
this.text = '';
},
scrollBottom(){
// 确保在对话框打开后滚动到底部
this.$nextTick(() => {
const chatBox = this.$el.querySelector('.AddressBook-main');
if (chatBox) {
chatBox.scrollTop = chatBox.scrollHeight;
}
});
},
}
}

95
store/modules/websocket.js
View File

@ -9,57 +9,90 @@ export const state = () => ({
})
export const mutations = {
WEBSOCKET_INIT(state,url){
WEBSOCKET_INIT(state, url) {
state.socket = new WebSocket(url);
state.socket.onopen=function () {
state.socket.onopen = function() {
console.log("WebSocket连接成功");
};
state.socket.onmessage = function (e) {
console.log(e,'接收到的消息')
if (e.data.startsWith("C")) {
state.count = e.data;
}
else if (e.data.startsWith("系统通知")){
state.notices.push(e.data);
}else if (e.data.startsWith("close")){
console.log(e.data)
} else {
state.messages.push(JSON.parse(e.data));
console.log(state.messages);
}
};
state.socket.onerror= function () {
// 注意：这里不再直接处理 onmessage，而是在 action 中处理
state.socket.onerror = function() {
console.log("WebSocket连接发生错误");
};
state.socket.onclose = function (e) {
state.socket.onclose = function(e) {
console.log("connection closed (" + e.code + ")");
};
},
WEBSOCKET_SEND(state,msg){
state.socket.send(msg);
SET_SOCKET_ONMESSAGE(state, handler) {
// 设置 WebSocket 的消息处理函数
if (state.socket) {
state.socket.onmessage = handler;
}
},
WEBSOCKET_CLOSE(state){
WEBSOCKET_SEND(state, msg) {
if (state.socket) {
state.socket.send(msg);
}
},
WEBSOCKET_CLOSE(state) {
if (state.socket) {
state.socket.close();
state.socket = null;
}
},
SET_MESSAGE(state,msg){
state.messages = msg
SET_MESSAGE(state, msg) {
state.messages = msg;
},
ADD_MESSAGE(state, message) {
// 使用展开运算符创建新数组而不是直接 push
state.messages = [...state.messages, message];
},
ADD_NOTICE(state, notice) {
// 使用展开运算符创建新数组而不是直接 push
state.notices = [...state.notices, notice];
},
SET_COUNT(state, count) {
state.count = count;
}
}
export const actions = {
websocket_init({commit}, url) {
commit('WEBSOCKET_INIT', url)
websocket_init({ commit, state }, url) {
commit('WEBSOCKET_INIT', url);
// 在 action 中设置 WebSocket 的 onmessage 回调
if (state.socket) {
state.socket.onmessage = function(e) {
console.log(e, '接收到的消息');
if (e.data.startsWith("C")) {
commit('SET_COUNT', e.data);
} else if (e.data.startsWith("系统通知")) {
commit('ADD_NOTICE', e.data);
} else if (e.data.startsWith("close")) {
console.log(e.data);
} else {
commit('ADD_MESSAGE', JSON.parse(e.data));
console.log(state.messages);
}
};
}
},
websocket_send({commit}, msg) {
commit('WEBSOCKET_SEND', msg)
websocket_send({ commit }, msg) {
commit('WEBSOCKET_SEND', msg);
},
websocket_close({commit}){
commit('WEBSOCKET_CLOSE')
websocket_close({ commit }) {
commit('WEBSOCKET_CLOSE');
},
set_message({commit},msg){
commit('SET_MESSAGE',msg)
set_message({ commit }, msg) {
commit('SET_MESSAGE', msg);
}
}