This demo provides easy way to show the new withAutomaticReconnect
, onreconnected
, and onreconnecting
functionality resident in the 3.0 preview 6 release. Here are the steps to run the demo:
-
Clone this repository.
-
Open
wwwroot\js\chat.js
. The first few bits of code demonstrate how to enable automatic reconnection and how to handle events related to reconnects. -
Speak to the new
withAutomaticReconnect
method, and make sure to point out that its behavior can be customized by providing an array of millisecond values the client should wait to reconnect.var connection = new signalR.HubConnectionBuilder() .withUrl("/chat") .withAutomaticReconnect([0, 3000, 5000, 10000, 15000, 30000]) //.withAutomaticReconnect([0, 2000, 10000, 30000]) yields the default behavior .build();
-
Speak to the
onreconnecting
handler and how it enables developers to update their UI when the app is trying to reconnect.connection.onreconnecting((error) => { disableUi(true); const li = document.createElement("li"); li.textContent = `Connection lost due to error "${error}". Reconnecting.`; document.getElementById("messagesList").appendChild(li); });
-
Speak to the
onreconnected
handler and how it gives developers a place to update their UI once the app has successfully reconnected.connection.onreconnected((connectionId) => { disableUi(false); const li = document.createElement("li"); li.textContent = `Connection reestablished. Connected.`; document.getElementById("messagesList").appendChild(li); });
-
Make sure to mention that the automatic reconnection is available today via
npm install @aspnet/signalr@next
. -
Run
dotnet run
in the directory with the app. -
Open the site in the browser at https://localhost:5001.
-
Open the debugging tools and call out how the connection has been established.
-
Stop the app from running (either via
Ctrl-C
or stop the debugger). Flip back to the browser to show how the client has been disconnected. -
Restart the app and flip back to the browser window - don't refresh it - and wait until the client reconnects. Note, you may need to tune your values passed to
withAutomaticReconnect
depending on your own pace. -
Mention that the docs are available for the preview at https://aka.ms/signalr/auto-reconnect.