Compare commits
2 Commits
71173570e0
...
ad4672e49c
| Author | SHA1 | Date | |
|---|---|---|---|
|
ad4672e49c | ||
|
|
125695ea89 |
4
env.js
4
env.js
@ -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 非独立部署默认为空
|
||||
|
||||
@ -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;
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user