xwl2023/Yi.Framework
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 重构signalr，在线人数允许不用登录

Browse Source
This commit is contained in:
陈淳
2024-03-11 17:07:43 +08:00
parent 8857fb24f0
commit 4bb93a947e
8 changed files with 106 additions and 244 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
Yi.Bbs.Vue3/src/App.vue
View File

@@ -6,12 +6,12 @@
</el-config-provider>
</template>
<script setup>
import signalR from "@/utils/signalR";
import noticeSignalR from "@/utils/noticeSignalR";
import mainHub from "@/hubs/mainHub.js";
import noticeSignalR from "@/hubs/noticeHub.js";
import useConfigStore from "@/stores/config";
import { ElConfigProvider } from "element-plus";
import useUserStore from "@/stores/user.js";
import { onMounted,watch,computed } from "vue";
import { onMounted, watch, computed } from "vue";
const userStore = useUserStore();
import zhCn from "element-plus/dist/locale/zh-cn.mjs";
const locale = zhCn;
@@ -26,21 +26,18 @@ if (loading !== null) {
//加载全局信息
onMounted(async () => {
await configStore.getConfig();
noticeSignalR.close();
noticeSignalR.init(`notice`);
noticeSignalR();
});
watch(
() => token,
(val,oldValue) => {
//console.log("token发生改变");
(val, oldValue) => {
//console.log("token发生改变");
if (val) {
signalR.close();
signalR.init(`main`);
mainHub();
}
},
{immediate:true,deep:true}
{ immediate: true, deep: true }
);
</script>
<style scoped></style>

22
Yi.Bbs.Vue3/src/hubs/mainHub.js Normal file
View File

@@ -0,0 +1,22 @@
import signalR from "@/utils/signalR";
import useSocketStore from "@/stores/socket.js";
const receiveMsg=(connection)=> {
connection.on("onlineNum", (data) => {
const socketStore = useSocketStore();
socketStore.setOnlineNum(data);
});
connection.on("forceOut", (msg) => {
useUserStore()
.logOut()
.then(() => {
alert(msg);
location.href = "/index";
});
});
};
export default ()=>{
signalR.start(`main`,receiveMsg);
}

28
Yi.Bbs.Vue3/src/hubs/noticeHub.js Normal file
View File

@@ -0,0 +1,28 @@
import signalR from "@/utils/signalR";
const receiveMsg=(connection)=> {
connection.on("receiveNotice", (type, title, content) => {
switch (type) {
case "MerryGoRound":
ElNotification({
title: title,
dangerouslyUseHTMLString: true,
message: content,
})
break;
case "Popup":
ElNotification({
title: title,
dangerouslyUseHTMLString: true,
message: content,
})
break;
}
});
};
export default ()=>{
signalR.start(`notice`,receiveMsg);
}

2
Yi.Bbs.Vue3/src/layout/AppHeader.vue
View File

@@ -86,7 +86,6 @@ import useUserStore from "@/stores/user.js";
import useConfigStore from "@/stores/config";
import useAuths from "@/hooks/useAuths";
import { Session } from "@/utils/storage";
import signalR from "@/utils/signalR";
const { isLogin, clearStorage } = useAuths();
const configStore = useConfigStore();
@@ -106,7 +105,6 @@ const logout = async () => {
}).then(async () => {
//异步
await userStore.logOut();
await signalR.close();
//删除成功后，跳转到主页
router.push("/login");
ElMessage({

107
Yi.Bbs.Vue3/src/utils/noticeSignalR.js
View File

@@ -1,107 +0,0 @@
// 官方文档：https://docs.microsoft.com/zh-cn/aspnet/core/signalr/javascript-client?view=aspnetcore-6.0&viewFallbackFrom=aspnetcore-2.2&tabs=visual-studio
import * as signalR from "@microsoft/signalr";
export default {
// signalR对象
SR: {},
// 失败连接重试次数
failNum: 4,
async init(url) {
const connection = new signalR.HubConnectionBuilder()
.withUrl(`${import.meta.env.VITE_APP_BASE_WS}/` + url)
.withAutomaticReconnect() //自动重新连接
.configureLogging(signalR.LogLevel.Information)
.build();
this.SR = connection;
// 断线重连
connection.onclose(async () => {
console.log("断开连接了");
console.assert(
connection.state === signalR.HubConnectionState.Disconnected
);
// 建议用户重新刷新浏览器
});
connection.onreconnected(() => {
console.log("断线重新连接成功");
});
this.receiveMsg(connection);
// 启动
await this.start();
},
/**
* 调用 this.signalR.start().then(async () => { await this.SR.invoke("method")})
* @returns
*/
async close() {
try {
var that = this;
await this.SR.stop();
this.SR = {};
} catch { }
},
async start() {
var that = this;
try {
//使用async和await 或 promise的then 和catch 处理来自服务端的异常
await this.SR.start();
//console.assert(this.SR.state === signalR.HubConnectionState.Connected);
//console.log('signalR 连接成功了', this.SR.state);
return true;
} catch (error) {
that.failNum--;
//console.log(`失败重试剩余次数${that.failNum}`, error)
if (that.failNum > 0) {
setTimeout(async () => {
await this.SR.start();
}, 5000);
}
return false;
}
},
// 接收消息处理
receiveMsg(connection) {
connection.on("receiveNotice", (type, title, content) => {
switch (type) {
case "MerryGoRound":
ElNotification({
title: title,
dangerouslyUseHTMLString: true,
message: content,
})
break;
case "Popup":
ElNotification({
title: title,
dangerouslyUseHTMLString: true,
message: content,
})
break;
}
});
// connection.on("onlineNum", (data) => {
// store.dispatch("socket/changeOnlineNum", data);
// });
// // 接收欢迎语
// connection.on("welcome", (data) => {
// console.log('welcome', data)
// Notification.info(data)
// });
// // 接收后台手动推送消息
// connection.on("receiveNotice", (title, data) => {
// Notification({
// type: 'info',
// title: title,
// message: data,
// dangerouslyUseHTMLString: true,
// duration: 0
// })
// })
},
};

104
Yi.Bbs.Vue3/src/utils/signalR.js
View File

@@ -1,16 +1,11 @@
// 官方文档：https://docs.microsoft.com/zh-cn/aspnet/core/signalr/javascript-client?view=aspnetcore-6.0&viewFallbackFrom=aspnetcore-2.2&tabs=visual-studio
import * as signalR from "@microsoft/signalr";
import useSocketStore from "@/stores/socket";
import useAuths from "@/hooks/useAuths";
import useUserStore from "@/stores/user";
const { getToken } = useAuths();
export default {
// signalR对象
SR: {},
// 失败连接重试次数
failNum: 4,
async init(url) {
start(url,callFunc) {
const connection = new signalR.HubConnectionBuilder()
.withUrl(`${import.meta.env.VITE_APP_BASE_WS}/` + url, {
headers: {
@@ -22,97 +17,28 @@ export default {
},
})
.withAutomaticReconnect() //自动重新连接
.configureLogging(signalR.LogLevel.Information)
.withAutomaticReconnect(new ForeverRetryPolicy()) //自动重新连接
.configureLogging(signalR.LogLevel.Error)
.build();
this.SR = connection;
// 断线重连
connection.onclose(async () => {
console.log("断开连接了");
console.assert(
connection.state === signalR.HubConnectionState.Disconnected
);
// 建议用户重新刷新浏览器
connection.onclose(() => {
console.log("hub断开");
});
connection.onreconnected(() => {
console.log("断线重新连接成功");
console.log("hub重新连接成功");
});
this.receiveMsg(connection);
callFunc(connection);
// 启动
await this.start();
},
/**
* 调用 this.signalR.start().then(async () => { await this.SR.invoke("method")})
* @returns
*/
async close() {
try {
var that = this;
await this.SR.stop();
this.SR={};
} catch {}
this.SR.start();
},
async start() {
var that = this;
try {
//使用async和await 或 promise的then 和catch 处理来自服务端的异常
await this.SR.start();
//console.assert(this.SR.state === signalR.HubConnectionState.Connected);
//console.log('signalR 连接成功了', this.SR.state);
return true;
} catch (error) {
that.failNum--;
//console.log(`失败重试剩余次数${that.failNum}`, error)
if (that.failNum > 0) {
setTimeout(async () => {
await this.SR.start();
}, 5000);
}
return false;
}
},
// 接收消息处理
receiveMsg(connection) {
connection.on("onlineNum", (data) => {
const socketStore = useSocketStore();
socketStore.setOnlineNum(data);
});
connection.on("forceOut", (msg) => {
useUserStore()
.logOut()
.then(() => {
alert(msg);
location.href = "/index";
});
});
// connection.on("onlineNum", (data) => {
// store.dispatch("socket/changeOnlineNum", data);
// });
// // 接收欢迎语
// connection.on("welcome", (data) => {
// console.log('welcome', data)
// Notification.info(data)
// });
// // 接收后台手动推送消息
// connection.on("receiveNotice", (title, data) => {
// Notification({
// type: 'info',
// title: title,
// message: data,
// dangerouslyUseHTMLString: true,
// duration: 0
// })
// })
// // 接收系统通知/公告
// connection.on("moreNotice", (data) => {
// if (data.code == 200) {
// store.dispatch("socket/getNoticeList", data.data);
// }
// })
},
};
class ForeverRetryPolicy {
nextRetryDelayInMilliseconds(retryContext) {
return 1000*3;
}
}