title: 使用 prefetchComponents 進行組件預取 date: 2024/8/17 updated: 2024/8/17 author: cmdragon excerpt: 摘要:本文介紹Nuxt.js中的prefetchComponents功能,用於預取組件以提高用戶體驗。通過 ...
簡介:
ASP.NET SignalR 是一個ASP .NET 下的類庫,可以在ASP .NET 的Web項目中實現實時通信。本文主要講述如何在Vue.js中使用SignalR,以及斷開重連。
知識點:
- 前端
- SignalR的安裝
- 如何設置自動重新連接的次數
- SignalR有關連接的函數
- 自動重連全部失敗後,定時重連
- ASP.NET CORE
- SignalR的註冊
- 消息的接收,發送
SignalR的安裝
- SignalR包的安裝:在Vue的項目目錄下,執行cmd命令:npm install @microsoft/signalr
- Vue中引用:import * as signalR from "@microsoft/signalr";
如何設置自動重新連接的次數
- 如果想要設置自動重新連接的次數,你可以在創建SignalR連接時使用
withAutomaticReconnect
方法並傳入一個重試計時數組,例如:[0, 2000, 4000, 6000]
SignalR有關連接的函數
- onreconnecting : 第一次斷開連接觸發
- onreconnected:重新連接成功觸發
- onclose:自動重連全部失敗後觸發
執行效果:初始化失敗後重新初始化,重連失敗後自動重連
- 初始化失敗後,定時重新初始化直至初始化成功
- 斷開連接後自動重連4次
- 4次重連失敗後,重新初始化
前端代碼
-
<template> <div>234678 </div> </template> <script> import * as signalR from '@microsoft/signalr'; export default { name: 'ChartControl', data() { return { connection: null,//連接 intervalId:0,//setInterval ID autoReconnectTimerArray:[0, 2000, 4000, 6000],//重試計時數組 reconnectInterval:5000//5秒 } }, created() { this.connection = new signalR.HubConnectionBuilder().withUrl('http://localhost:5138/hubs/msgHub') .withAutomaticReconnect(this.autoReconnectTimerArray).build(); this.connection.start().then(() => { console.log('初始連接成功'); }).catch(err => { console.log('SignalR Connection Error: ', err) this.intervalId=setInterval(()=>{ this.connection.start().then(() => { console.log('初始化連接成功'); clearInterval(this.intervalId); }).catch( err=>{ console.log("初始化連接失敗,5秒後重新初始化") } ) },this.reconnectInterval) } ); //重連之前調用 (只有在掉線的一瞬間,只進入一次) this.connection.onreconnecting(error=> { console.log("第一次掉線,重新連接"); }); //(預設4次重連),任何一次只要回調成功,調用 this.connection.onreconnected(connectionId => { console.log("重新連接成功"); }); //(預設4次重連) 全部都失敗後,調用 this.connection.onclose(error => { console.log("重新初始化連接:"); this.intervalId=setInterval(()=>{ this.connection.start().then(() => { console.log('初始化連接成功'); clearInterval(this.intervalId); }).catch( err=>{ console.log("初始化連接失敗,5秒後重新初始化") } ) },this.reconnectInterval) }); this.connection.on('ReceiveMessage', message => { console.log(message); }); } } </script>