{"id":19101429,"url":"https://github.com/SignalR/sample-WithAutomaticReconnect","last_synced_at":"2025-04-18T18:32:29.560Z","repository":{"id":117924170,"uuid":"192569230","full_name":"SignalR/sample-WithAutomaticReconnect","owner":"SignalR","description":null,"archived":true,"fork":false,"pushed_at":"2024-05-07T21:25:02.000Z","size":752,"stargazers_count":13,"open_issues_count":1,"forks_count":5,"subscribers_count":5,"default_branch":"main","last_synced_at":"2024-05-07T22:31:18.014Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/SignalR.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-06-18T15:41:03.000Z","updated_at":"2024-05-07T21:25:16.000Z","dependencies_parsed_at":null,"dependency_job_id":"0c8f4db2-5540-4c4b-8d74-ad4690f9cc67","html_url":"https://github.com/SignalR/sample-WithAutomaticReconnect","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SignalR%2Fsample-WithAutomaticReconnect","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SignalR%2Fsample-WithAutomaticReconnect/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SignalR%2Fsample-WithAutomaticReconnect/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SignalR%2Fsample-WithAutomaticReconnect/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SignalR","download_url":"https://codeload.github.com/SignalR/sample-WithAutomaticReconnect/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223783092,"owners_count":17201906,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-09T03:53:17.455Z","updated_at":"2025-04-18T18:32:29.554Z","avatar_url":"https://github.com/SignalR.png","language":"JavaScript","funding_links":[],"categories":["others"],"sub_categories":[],"readme":"We are no longer taking changes to this repository. It exists as an archived reference only.\n\n# SignalR Automatic Reconnection Demo\n\nThis 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:\n\n1. Clone this repository.\n\n1. 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.\n\n1. 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.\n\n    ```javascript\n    var connection = new signalR.HubConnectionBuilder()\n        .withUrl(\"/chat\")\n        .withAutomaticReconnect([0, 3000, 5000, 10000, 15000, 30000])\n        //.withAutomaticReconnect([0, 2000, 10000, 30000]) yields the default behavior\n        .build();\n    ```\n\n1. Speak to the `onreconnecting` handler and how it enables developers to update their UI when the app is trying to reconnect.\n\n    ```javascript\n    connection.onreconnecting((error) =\u003e {\n        disableUi(true);\n        const li = document.createElement(\"li\");\n        li.textContent = `Connection lost due to error \"${error}\". Reconnecting.`;\n        document.getElementById(\"messagesList\").appendChild(li);\n    });\n    ```\n\n1. Speak to the `onreconnected` handler and how it gives developers a place to update their UI once the app has successfully reconnected.\n\n    ```javascript\n    connection.onreconnected((connectionId) =\u003e {\n        disableUi(false);\n        const li = document.createElement(\"li\");\n        li.textContent = `Connection reestablished. Connected.`;\n        document.getElementById(\"messagesList\").appendChild(li);\n    });\n    ```\n\n1. Make sure to mention that the automatic reconnection is available today via `npm install @aspnet/signalr@next`.\n\n1. Run `dotnet run` in the directory with the app.\n\n1. Open the site in the browser at https://localhost:5001.\n\n1. Open the debugging tools and call out how the connection has been established.\n\n    ![Connected client](media/connect.png)\n\n1. 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.\n\n    ![Connected client](media/disconnected.png)\n\n1. 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.\n\n    ![Connected client](media/reconnected.png)\n\n1. Mention that the docs are available for the preview at https://aka.ms/signalr/auto-reconnect.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FSignalR%2Fsample-WithAutomaticReconnect","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FSignalR%2Fsample-WithAutomaticReconnect","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FSignalR%2Fsample-WithAutomaticReconnect/lists"}