Chat application with Azure SignalR Service
0 likes1,910 views
The document describes setting up a chat application using SignalR and Azure SignalR Service. Key steps include creating an ASP.NET Core web app, adding the SignalR and Azure SignalR NuGet packages, provisioning an Azure SignalR service, configuring the connection string, adding a Chat hub class, adding client-side code to connect to the hub and handle messages, and configuring Startup.cs to use SignalR. The Chat hub exposes methods to broadcast and echo messages to all connected clients.
Chat application with Azure SignalR Service
- 1. Chat Application with SignalR
- 2. Create new asp.net web application using .NET Core 2.0
- 4. Right Click on Project NameEdit .csproj file and add UserSecretsId
- 5. Add reference of Microsoft.Azure.SignalR which is still in the pre-release mode.
- 6. Go to Azure PortalCreate New ResourceSelect Azure SignalR Service.
- 10. Once the resource is provisioned Go to your SignalR appGo to KeysCopy the ConnectionString
- 11. Open appsettings.json file and add connection string.It must be in Azure:SignalR:ConnectionString format.
- 12. Right click on Project NameAdd New folder called MyHub. Inside MyHub folder add new class Chat.cs In SignalR, Hub is a core component that exposes a set of methods that can be called from Client. Broadcast : This method broadcasts a message to all clients. Echo : This method sends a message back to the caller. Both methods use the Clients interface provided by the ASP.NET Core SignalR SDK. This interface gives you access to all connected clients enabling you to push content to your clients.
- 13. Web app client interface. The client user interface for this chat room app will be composed of HTML and JavaScript in a file named index.html in the wwwroot directory.
- 17. Client side SignalR sdk…
- 18. While username is not there….
- 24. • The code in Index.html, calls HubConnectionBuilder.build() to make an HTTP connection to the Azure SignalR resource. • If the connection is successful, that connection is passed to bindConnectionMessage(), which adds event handlers for incoming content pushes to the client. • HunConnection.start() starts communication with the hub. • Once communication is started , onConnected() adds the button event handlers. • These handlers use the connection to allow this client to push content updates to all connected clients.
- 25. Open stratup.cs file and add services.AddSignalR().AddAzureSignalR() in the ConfigureService method
- 26. Also add app.UseAzureSignalR() in the Configure method.
- 28. • Run the application and check output.