import axios from "axios";
|
import WebSockBase from "./websockBase";
|
import { getToken } from "@/utils/auth";
|
export enum useType {
|
HTML,
|
WEB,
|
APP,
|
LCON, //长连接
|
}
|
|
interface TypeSessionObj {
|
toUserId: string; //消息接收者id
|
userId: string; //消息发送者id
|
id: string; //会话id
|
[name: string]: string;
|
}
|
|
export class WebSockCode extends WebSockBase {
|
url: string; //请求地址
|
userId: string;
|
scrollLing: boolean; //分页节流
|
private session = {} as TypeSessionObj;
|
|
public get sessionObj(): TypeSessionObj {
|
return this.session;
|
}
|
public set sessionObj(value: TypeSessionObj) {
|
// console.log("value=========>", value);
|
this.session = value;
|
}
|
|
public mountMsg = (val: any) => {};
|
|
public get msgFnc(): (val: any) => void {
|
return this.mountMsg;
|
}
|
public set msgFnc(value: (val: any) => void) {
|
this.mountMsg = value;
|
}
|
msgDome: HTMLElement | null;
|
msgDomeName: string;
|
pageNum: number;
|
pageSize: number;
|
total: number;
|
|
constructor(url: string, _usertype: useType, _userId: string, msgDomeName?: string) {
|
super();
|
this.url = url;
|
this.userId = _userId;
|
this.pageNum = 1;
|
this.pageSize = 15;
|
this.total = 0;
|
this.msgDome = null;
|
this.msgDomeName = msgDomeName || "msgScroll";
|
this.scrollLing = true;
|
}
|
|
/**
|
* 拼接sock地址
|
*/
|
public jointUrl = (_lcon = false) => {
|
return `${this.url}/websocket/${this.userId}/${!_lcon ? this.sessionObj.userId : "0"}`;
|
};
|
|
/**
|
* 创建长连接
|
*/
|
public settingLong = () => {
|
this.createdWebSock(this.jointUrl(true));
|
return this.webSock;
|
};
|
|
/**
|
* 获取消息记录
|
* @param data
|
* @returns
|
*/
|
public getMessages = (type = 0) => {
|
return new Promise<any>(async (resolve, reject) => {
|
axios({
|
url: `http://${this.url}/chat/info/list`,
|
method: "get",
|
params: {
|
toUserId: this.sessionObj.toUserId,
|
fromUserId: this.sessionObj.userId,
|
pageNum: type == 0 ? this.pageNum : 1,
|
pageSize: type == 0 ? this.pageSize : 1,
|
},
|
})
|
.then((res) => {
|
if (res.data.code == 200) {
|
this.total = res.data.total;
|
resolve(res.data.rows);
|
} else {
|
reject(res.data.msg);
|
}
|
})
|
.catch((e) => {
|
reject(e);
|
});
|
});
|
};
|
|
/**
|
* 获取会话列表
|
* @param data
|
*/
|
public getSessions = () => {
|
let url = `http://${this.url}/chat/session/myList?toUserId=${this.userId}`;
|
return new Promise<any>(async (resolve, reject) => {
|
axios
|
.get(url)
|
.then((res: any) => {
|
if (res.data.code == 200) {
|
resolve(res.data.rows);
|
} else {
|
reject(res.data.msg);
|
}
|
})
|
.catch((e) => {
|
reject(e);
|
});
|
});
|
};
|
|
/**
|
* 新增会话
|
* @param data
|
*/
|
public addSession = (data: any) => {
|
let url = `http://${this.url}/chat/session/add`;
|
return new Promise<any>(async (resolve, reject) => {
|
axios
|
.post(url, data, { headers: { Authorization: "Bearer " + getToken() } })
|
.then((res: any) => {
|
if (res.data.code == 200) {
|
resolve(res.data.data);
|
} else {
|
reject(res.data.msg);
|
}
|
})
|
.catch((e) => {
|
reject(e);
|
});
|
});
|
};
|
|
/**
|
* 移除会话
|
* @param e
|
*/
|
public removeSession = (e: string | number) => {
|
let url = `http://${this.url}/chat/session/${e}`;
|
return new Promise<any>(async (resolve, reject) => {
|
axios
|
.delete(url)
|
.then((res: any) => {
|
if (res.data.code == 200) {
|
resolve(res.data.data);
|
} else {
|
reject(res.data.msg);
|
}
|
})
|
.catch((e) => {
|
reject(e);
|
});
|
});
|
};
|
|
/**
|
* 加载会话详情
|
* @returns
|
*/
|
public getSessionInfo = () => {
|
let url = `http://${this.url}/chat/session/${this.sessionObj.id}`;
|
return new Promise<any>(async (resolve, reject) => {
|
axios
|
.get(url)
|
.then((res: any) => {
|
let data = res.data.data;
|
resolve(data);
|
})
|
.catch(() => {
|
reject();
|
});
|
});
|
};
|
|
/**
|
* 创建临时连接
|
* @returns
|
*/
|
public CreateTempConnection = () => {
|
return new Promise<TypeSessionObj>(async (resolve, reject) => {
|
let str = localStorage.getItem("temp");
|
if (str) {
|
resolve(JSON.parse(str));
|
} else {
|
axios({
|
url: `http://${this.url}/chat/session/addWeb`,
|
})
|
.then((res: any) => {
|
// "data": {
|
// "id": 23,
|
// "userId": 20230421100001,
|
// "toUserId": 2,
|
// "sessionName": "圣商珠宝客服",
|
// "unReadCount": 0,
|
// "delFlag": 0
|
// }
|
if (res.data.code == 200) {
|
let data = res.data.data;
|
localStorage.setItem("temp", JSON.stringify(data));
|
resolve(data);
|
} else {
|
reject(res.data);
|
}
|
})
|
.catch((e) => {
|
reject(e);
|
});
|
}
|
});
|
};
|
|
/**
|
* 滚动到底部
|
*/
|
public toScrollBottom = () => {
|
if (!this.msgDome) {
|
this.msgDome = document.getElementById(this.msgDomeName);
|
}
|
nextTick(() => {
|
if (this.msgDome) {
|
let scrollHeight = this.msgDome.scrollHeight;
|
this.msgDome.scrollTop = scrollHeight;
|
}
|
});
|
};
|
|
private scrollHeight = 0; //当前滚动高度
|
private scrollTop = 0; //滚动据顶高度
|
/**
|
* 挂载滚动加载方法
|
*/
|
public mountNextPage = (fnc: (val?: any) => Promise<void>) => {
|
if (!this.msgDome) {
|
this.msgDome = document.getElementById(this.msgDomeName);
|
}
|
if (this.msgDome) {
|
this.scrollHeight = this.msgDome.scrollHeight;
|
nextTick(() => {
|
setTimeout(() => {
|
this.msgDome!.onscroll = (event: any) => {
|
if (this.scrollLing) {
|
this.scrollTop = event.target.scrollTop;
|
if (this.scrollTop == 0) {
|
this.scrollLing = false;
|
this.pageNum += 1;
|
if (fnc) {
|
fnc()
|
.then(() => {
|
this.scrollToCenter();
|
})
|
.catch(() => {
|
this.scrollLing = false;
|
});
|
}
|
}
|
}
|
};
|
}, 200);
|
});
|
}
|
};
|
|
/**
|
* 加载完成后滚动至加载前的位置
|
*/
|
private scrollToCenter = () => {
|
setTimeout(() => {
|
let _scrollHeight = this.msgDome!.scrollHeight;
|
this.msgDome!.scrollTo(0, _scrollHeight - this.scrollHeight - 100);
|
this.scrollHeight = _scrollHeight;
|
this.scrollLing = true;
|
}, 100);
|
};
|
|
/**
|
* 发送消息
|
* @param content 消息内容
|
*/
|
public send = (content: string | ArrayBufferLike | Blob | ArrayBufferView) => {
|
return new Promise<any>((resolve, reject) => {
|
if (this.isConnect()) {
|
this.webSock?.send(content);
|
let msgObj = {
|
content: content,
|
createTime: new Date().toLocaleString(),
|
fromUserId: this.sessionObj.toUserId,
|
toUserId: this.sessionObj.userId,
|
};
|
resolve(msgObj);
|
} else {
|
reject("连接异常");
|
}
|
});
|
};
|
}
|
