{{ username }}
{{ username }}
@@ -80,7 +80,7 @@
{{ formatTime(item.CreatedAt)}}
- {{ item.username }}
+ {{ tokenData.username }}
@@ -131,8 +131,11 @@ export default {
},
username: localStorage.getItem("username"),
userList: [],
+ filteredUsers: [], // 过滤后的用户列表
to_user_id:0,
cur_user_id:0,
+ searchName: '', // 搜索框内容
+
cur_user_name: "",
eventSource: null, // 事件源
uid: localStorage.getItem("userId"),
@@ -156,11 +159,22 @@ export default {
this.userList=data.friends;
this.groupList=data.groups;
},
+ filterUsers() {
+ this.filteredUsers = this.userList.filter(user => {
+ return user.name.toLowerCase().includes(this.searchName.toLowerCase());
+ });
+ },
async handleGetMessage(id){
let result = {};
this.to_user_id=id;
this.cur_user_id=id;
console.log("uid:",this.uid,"\tcur_user_id:",this.cur_user_id)
+ for(let i=0; i {
+ console.error("WebSocket Error:", error);
+ };
+ //关闭事件
+ this.socket.onclose = function () {
+ //alert("连接已关闭!");
+ ElMessage({
+ message: "连接已关闭",
+ type: "error",
+ })
+ router.push("/user");
+ };
+ // 浏览器端收消息，获得从服务端发送过来的文本消息
+ this.socket.onmessage = async function (msg) {
+ //console.log("收到数据====" + msg.data);
+ let data = JSON.parse(msg.data); // 对收到的json数据进行解析， 类似这样的：
+ // console.log("收到数据====" + data);
+ // 如果服务器端发送过来的json数据
+ console.log("data.type:", data.type);
+ if (data.type == "msg") { // 如果是消息类型，解密消息内容
+ // console.log("收到数据====" + JSON.stringify(msg.data));
+ console.log("msg_:", data.data);
+ _this.MsgList.push(JSON.parse(data.data));
+ //console.log("msglist:", _this.MsgList);
+ // 构建消息内容
+ }else if (data.type == "check") {
+ //alert("对方已下线");
+ console.log(data.type)
+ }
+ };
+ }
+ },
+ async connectSSE(){
if (!!window.EventSource) {
this.eventSource = new EventSource("https://gep.ljsea.xyz/im/sse_msg?token="+this.tokenData.token);
let this_=this
+ this.eventSource.onopen = function(event) {
+ console.log("连接已建立！");
+ };
this.eventSource.onmessage = function(event) {
console.log(event.data);
let msg = JSON.parse(event.data);
@@ -220,12 +302,16 @@ export default {
}
};
this.eventSource.onerror = (error) => {
+ //重新连接
+ this.connectSSE();
if (this.eventSource.readyState === EventSource.CLOSED) {
//console.log('Connection was closed by the server.');
ElMessage({
- message: "连接已关闭！",
+ message: "连接已关闭！:"+error,
type: "error",
})
+
+
// Optionally, try to reconnect
} else {
//console.error('EventSource failed:', error);
@@ -252,6 +338,10 @@ export default {
});
},
async handleSendBtnClick(){
+ if(this.currentMsg =="" || this.currentMsg === null){
+ ElMessage.error("消息不能为空！");
+ return
+ }
let result = {};
try {
let req={
@@ -323,9 +413,16 @@ export default {
// console.log("mounted");
await this.getIpClient();
await this.handleSelectUser();
- //this.connectSSE();
+ this.filteredUsers=this.userList;
+ //await this.connectSSE();
+ this.connectWebSocket();
this.handleGetMessage(this.userList[0].id);
},
+ onUnmounted() {
+ if (this.eventSource) {
+ this.eventSource.close();
+ }
+ },
};
diff --git a/src/views/UserList.vue b/src/views/UserList.vue
index 2962aaf..80565df 100644
--- a/src/views/UserList.vue
+++ b/src/views/UserList.vue
@@ -27,6 +27,9 @@ export default {
async getUserList() {
let result = {};
try {
+ if(this.search_id === "" || this.search_id === null){
+ this.search_id = -1;
+ }
this.tokenData.id = this.search_id;
this.tokenData.keyword = this.keyword;
Cookies.set("search_id", this.search_id);
@@ -38,6 +41,10 @@ export default {
let data = result.data;
this.tableData = data;
},
+ requestFriend(index) {
+ var id = this.tableData[index].ID;
+ var name = this.tableData[index].Name;
+ },
onSubmit() {
getUserList({ token: token });
},
@@ -195,6 +202,13 @@ export default {
@click.prevent="startChat(scope.$index)"
>聊天
+ 请求加好友
+