Skip to content

T
tokcos-socket-web-ts-user
提交 368a7b31 作者: Hao
操作

供应商分页的问题

父级 49e463f3
正在显示 包含 141 行增加 和 193 行删除
.env.development
NODE_ENV=development
VITE_USER_APP_API_URL=http://im.wei-it.com/api
VITE_USER_APP_WS_API_URL=ws://im.wei-it.com/ws/
VITE_USER_APP_API_URL=https://im.wei-it.com/api
VITE_USER_APP_WS_API_URL=wss://im.wei-it.com/ws/
.env.production
NODE_ENV=production
VITE_USER_APP_API_URL=http://im.wei-it.com/api
VITE_USER_APP_WS_API_URL=ws://im.wei-it.com/ws/
\ No newline at end of file
VITE_USER_APP_API_URL=https://im.wei-it.com/api
VITE_USER_APP_WS_API_URL=wss://im.wei-it.com/ws/
\ No newline at end of file
src/axios/model/user.ts
import http from "../index";
//登录
const Login = (query: any) => {
return http({
url: `/kf/auth/login`,
method: "post",
data: query,
});
};
//新增询价单
const InquiryAdd = (query: any) => {
return http({
url: `/inquiryAdd`,
method: "get",
data: query,
});
};
//快捷回复
const Kjiehuifu = (query: any) => {
return http({
url: "/Kjiehuifu",
method: "get",
data: query,
});
};
// const Kjiehuifu = (query: any) => {
// return http({
// url: "/Kjiehuifu",
// method: "get",
// data: query,
// });
// };
//获取用户列表
const getUserList = (query: any) => {
return http({
url: "/kf/chat/getChatList",
url: "/common/getChatList",
method: "get",
data: query,
});
......@@ -35,13 +19,22 @@ const getUserList = (query: any) => {
//查看未读消息
const checkMesssages = (query: any) => {
return http({
url: "/kf/chat/getChatHisList",
url: "/common/getChatHisList",
method: "get",
params: query,
});
};
//上传接口
//优先找在线客服,注意是商品对应供应商的账号(客服iD)
const getKfCode = (query: any) => {
return http({
url: "/common/getKfCode",
method: "get",
params: query,
});
};
//上传接口
const getUploadConfigInfo = (query: any) => {
return http({
url: "/upload/getUploadConfigInfo",
......@@ -52,17 +45,15 @@ const getUploadConfigInfo = (query: any) => {
//系统上传
const upload = (query: any) => {
return http({
url: "/upload/uploadFile",
url: "/common/uploadFile",
method: "post",
data: query,
});
};
export {
Login,
InquiryAdd,
Kjiehuifu,
getUserList,
checkMesssages,
upload,
getUploadConfigInfo,
getKfCode
};
src/store/modules/user.ts
......@@ -4,59 +4,19 @@ export const useUserStore = defineStore("user", {
state: () => {
return {
isConnected: false, //连接状态
messages: [],
customerInfo: {
username: "1489785944",
messages: [],
chatInfo: {
clientId: "",
serviceId: "1805880457362661377",
},
count: 0,
userInfo: {
password: "",
token: "",
username:""
},
};
},
actions: {
setCount(num: number) {
this.count = num;
},
setCustomerInfo(res: any) {
this.customerInfo = res;
},
setUserInfo(res: any) {
this.userInfo = res;
},
setUserListMessages(res: any) {
const messages: any = this.customerInfo.messages || [];
const obj = {
isSent: false,
msgType: res.msgType,
content: res.content,
cmd: res.cmd,
to: res.to,
id: res.id,
form: res.from,
userImg:"https://cdn.lirimall.com//lirigo/filetempImage/新鲜水果_1661668973048.png",
time: moment(res.createTime).format("HH:mm:ss"),
};
messages.push(obj);
this.customerInfo.messages = messages;
},
setusernameMessage(res: any) {
const friends = res.friends;
for (const key in friends) {
const chatDatas = friends[key];
chatDatas.forEach((item: any) => {
item.userImg =
"https://cdn.lirimall.com//lirigo/filetempImage/新鲜水果_1661668973048.png";
item.time = moment(res.createTime).format("HH:mm:ss");
});
for (const index in chatDatas) {
const userId = chatDatas[index].from;
this.customerInfo.messages = chatDatas;
}
}
setChatInfo(res: any) {
this.chatInfo = res;
},
connect() {
// 连接成功后，将 isConnected 状态设置为 true
......
src/utils/websocket.ts
import { ElMessage } from "element-plus";
import { useUserStore } from "../store/modules/user";
import {
useRoute
} from 'vue-router';
const route = useRoute() || {}
const routeParams = route.query || {}
let HeartbeatTime: any = null;
let websocket: WebSocket | null = null; // 用于存储实例化后websocket
let rec: any; // 断线重连后，延迟5秒重新创建WebSocket连接 rec用来存储延迟请求的代码
// 创建websocket
let callBack: any = null;
const connectMsg = (fun) => {
callBack = fun
console.log(callBack)
const useUser = useUserStore()
useUser.setUserInfo({
username: routeParams.loginId || '1721217621001',
})
const wsUrl = `${import.meta.env.VITE_USER_APP_WS_API_URL}?type=yk&code=${useUser.userInfo.username
}&kf=${useUser.customerInfo.username}`
console.log(wsUrl)
initWebSocket(wsUrl)
}
let callBack: any = null;
const connectMsg = (fun: Function) => {
callBack = fun;
const useUser = useUserStore();
const wsUrl = `${import.meta.env.VITE_USER_APP_WS_API_URL}?type=yk&code=${
useUser.chatInfo.clientId
}&kf=${useUser.chatInfo.serviceId}`;
console.log(wsUrl);
initWebSocket(wsUrl);
};
function creatWebSocket(wsUrl: string) {
// 判断当前浏览器是否支持WebSocket
if ("WebSocket" in window) {
console.log("当前浏览器支持 WebSocket");
} else if ("MozWebSocket" in window) {
console.log("当前浏览器支持 MozWebSocket");
} else {
console.log("当前浏览器不支持 WebSocket");
}
try {
initWebSocket(wsUrl); // 初始化websocket连接
} catch (e) {
console.log("尝试创建连接失败");
reConnect(wsUrl); // 如果无法连接上 webSocket 那么重新连接！可能会因为服务器重新部署，或者短暂断网等导致无法创建连接
}
// 判断当前浏览器是否支持WebSocket
if ("WebSocket" in window) {
console.log("当前浏览器支持 WebSocket");
} else if ("MozWebSocket" in window) {
console.log("当前浏览器支持 MozWebSocket");
} else {
console.log("当前浏览器不支持 WebSocket");
}
try {
initWebSocket(wsUrl); // 初始化websocket连接
} catch (e) {
console.log("尝试创建连接失败");
reConnect(wsUrl); // 如果无法连接上 webSocket 那么重新连接！可能会因为服务器重新部署，或者短暂断网等导致无法创建连接
}
}
// 初始化websocket
function initWebSocket(wsUrl: string) {
if (!websocket) websocket = new WebSocket(wsUrl);
websocket.onopen = function(eee) {
websocketOpen();
};
// // 接收
websocket.onmessage = function(e: MessageEvent<any>) {
websocketonmessage(e);
};
// 连接发生错误
websocket.onerror = function() {
// isConnect = false; // 连接断开修改标识
reConnect(wsUrl); // 连接错误 需要重连
};
websocket.onclose = function(e) {
websocketclose(e);
};
if (!websocket) websocket = new WebSocket(wsUrl);
websocket.onopen = function (eee) {
websocketOpen();
};
// // 接收
websocket.onmessage = function (e: MessageEvent<any>) {
websocketonmessage(e);
};
// 连接发生错误
websocket.onerror = function () {
// isConnect = false; // 连接断开修改标识
reConnect(wsUrl); // 连接错误 需要重连
};
websocket.onclose = function (e) {
websocketclose(e);
};
}
//调取心跳
function websocketHeartbeat() {
clearInterval(HeartbeatTime)
HeartbeatTime = setInterval(() => {
console.log('调取心跳')
websocketsend({
cmd: 13
});
}, 10000)
clearInterval(HeartbeatTime);
HeartbeatTime = setInterval(() => {
console.log("调取心跳");
websocketsend({
cmd: 13,
});
}, 10000);
}
// 定义重连函数
const reConnect = (wsUrl: string) => {
if (useUserStore().isConnected) return; // 如果已经连上就不在重连了
rec && clearTimeout(rec);
rec = setTimeout(function() {
// 延迟5秒重连 避免过多次过频繁请求重连
creatWebSocket(wsUrl);
}, 5000);
if (useUserStore().isConnected) return; // 如果已经连上就不在重连了
rec && clearTimeout(rec);
rec = setTimeout(function () {
// 延迟5秒重连 避免过多次过频繁请求重连
creatWebSocket(wsUrl);
}, 5000);
};
// 创建连接
function websocketOpen() {
useUserStore().connect();
websocketHeartbeat()
useUserStore().connect();
websocketHeartbeat();
}
// 数据接收
function websocketonmessage(e: MessageEvent<any>) {
const res = JSON.parse(e.data); // 解析JSON格式的数据
console.log(res,'res')
if (res.command == 11) {
console.log('收到')
//将数据放在store中
// 下面的判断则是后台返回的接收到的数据 如何处理自己决定
setTimeout(() => {
console.log(callBack,'callBack')
callBack()
// useUserStore().setUserListMessages(res.data).then();
}, 10);
}
const res = JSON.parse(e.data); // 解析JSON格式的数据
console.log(res, "res");
if (res.command == 11) {
console.log("收到");
//将数据放在store中
// 下面的判断则是后台返回的接收到的数据 如何处理自己决定
setTimeout(() => {
console.log(callBack, "callBack");
callBack();
// useUserStore().setUserListMessages(res.data).then();
}, 10);
}
}
// 关闭
function websocketclose(e: any) {
console.log('关闭')
clearInterval(HeartbeatTime)
useUserStore().disconnect(); // 修改连接状态
console.log("关闭");
clearInterval(HeartbeatTime);
useUserStore().disconnect(); // 修改连接状态
}
// 数据发送
function websocketsend(res: any) {
if (websocket && useUserStore().isConnected) {
// 检查连接状态
websocket.send(JSON.stringify(res));
} else {
ElMessage({
showClose: true,
message: "请选择设备连接",
type: "error",
});
}
if (websocket && useUserStore().isConnected) {
// 检查连接状态
websocket.send(JSON.stringify(res));
} else {
ElMessage({
showClose: true,
message: "请选择设备连接",
type: "error",
});
}
}
// 实际调用的方法==============
// 发送
function sendWebSocket(data: any) {
// 如果未保持连接状态 不允许直接发送消息 提示请选择连接设备
if (!useUserStore().isConnected) {
ElMessage({
showClose: true,
message: "请选择设备连接",
type: "error",
});
// websocketsend(data);
} else {
websocketsend(data);
console.log("------------------");
}
// 如果未保持连接状态 不允许直接发送消息 提示请选择连接设备
if (!useUserStore().isConnected) {
ElMessage({
showClose: true,
message: "请选择设备连接",
type: "error",
});
// websocketsend(data);
} else {
websocketsend(data);
console.log("------------------");
}
}
// 关闭
const closeWebSocket = () => {
if (websocket) {
websocket.close();
ElMessage({
showClose: true,
message: "设备已关闭",
type: "success",
});
}
if (websocket) {
websocket.close();
ElMessage({
showClose: true,
message: "设备已关闭",
type: "success",
});
}
};
export { connectMsg, initWebSocket, sendWebSocket, creatWebSocket, closeWebSocket };
export {
connectMsg,
initWebSocket,
sendWebSocket,
creatWebSocket,
closeWebSocket,
};
yonghu.zip
No preview for this file type
yonghu/assets/homeView.eb1e7277.css → yonghu/assets/homeView.157a0cfd.css
This source diff could not be displayed because it is too large. You can view the blob instead.
yonghu/assets/homeView.5ea54932.js → yonghu/assets/homeView.f74d468a.js
This source diff could not be displayed because it is too large. You can view the blob instead.
yonghu/assets/index.5aee5cd9.css 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
yonghu/assets/index.9bcc9311.css deleted 100644 → 0
This source diff could not be displayed because it is too large. You can view the blob instead.
yonghu/index.html
......@@ -10,9 +10,9 @@
this.resizeTo(800,600);
this.focus();
</script> -->
<script type="module" crossorigin src="/assets/index.aa30d5b2.js"></script>
<script type="module" crossorigin src="/assets/index.23cf875b.js"></script>
<link rel="modulepreload" crossorigin href="/assets/vendor.d471d1e7.js">
<link rel="stylesheet" href="/assets/index.9bcc9311.css">
<link rel="stylesheet" href="/assets/index.5aee5cd9.css">
</head>
<body>
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论