Peer-to-Peer Chat
You can configure a Kendo UI Chat widget and a .Net Core SignalR service to create a Peer-to-Peer Chat application.
To create the Peer-to-Peer Chat you have to implement the SignalR Hub and, then, to implement the application client:
- Initialize the Chat
- Configure the SignalR Client Hub proxy
- Set up the project
- Configure the SignalR Hub
Initializing the Chat
The following example demonstrates how to initialize the Chat and implement the handlers for its post
and typingStart
events.
var chat = $("#chat").kendoChat({
// Each instance of the application will generate a unique username.
// In this way, the SignalR Hub "knows" who is the user that sends the message
// and who are the clients that have to receive that message.
user: {
name: kendo.guid(),
iconUrl: "https://demos.telerik.com/kendo-ui/content/chat/avatar.png"
},
// This will notify the SignallR Hub that the current client is typing.
// The Hub, in turn, will notify all the other clients
// that the user has started typing.
typingStart: function() {
chatHub.invoke("sendTyping", chat.getUser());
},
// The post handler will send the user data and the typed text to the SignalR Hub.
// The Hub will then forward that info to the other clients.
post: function(args) {
chatHub.invoke("send", chat.getUser(), args.text);
}
}).data("kendoChat");
Configuring the SignalR Client Hub Proxy
-
Get the SignalR client script from NPM.
npm install @aspnet/signalr
-
Include the SignalR script on the HTML page.
<script src="@aspnet/signalr/dist/browser/signalr.min.js"></script>
-
Initialize the SignalR Hub proxy.
// Point to the Hub remote endpoint. window.chatHub = new signalR.HubConnectionBuilder() .withUrl('http://localhost:5000/chat') .build();
-
Start the Hub proxy and configure it to detect errors.
chatHub.start() .catch(function(err) { console.error(err.toString()); });
-
Attach event handlers for the respective remote hub actions.
chatHub.on('broadcastMessage', function(sender, message) { var message = { type: 'text', text: message }; // Render the received message in the Chat. chat.renderMessage(message, sender); }); chatHub.on('typing', function(sender) { // Display the typing notification in the Chat. chat.renderMessage({ type: 'typing' }, sender); });
Setting Up the Project
-
Create a new ASP.NET Core Empty Web Application.
dotnet new web
-
Add the
AspNetCore.App
package which includes the SignalR to the application.dotnet add package Microsoft.AspNetCore.App
-
Run the application to test whether it is properly built.
dotnet run
Configuring the SignalR Hub
-
Implement
Startup.cs
.using Microsoft.AspNetCore.Builder; using Microsoft.AspNetCore.Hosting; using Microsoft.Extensions.DependencyInjection; namespace CoreSignalR { public class Startup { public void ConfigureServices(IServiceCollection services) { // Configure CORS to allow requests from other domains services.AddCors(options => options.AddPolicy("AllowCors", builder => { builder .AllowAnyMethod() .AllowAnyHeader() .AllowAnyOrigin() .AllowCredentials(); }) ); // Add the SignalR service services.AddSignalR(); } public void Configure(IApplicationBuilder app, IHostingEnvironment env) { // Use the CORS configuration. app.UseCors("AllowCors"); // Point to the route that will return the SignalR Hub. app.UseSignalR(routes => { routes.MapHub<ChatHub>("/chat"); }); } } }
-
Add a
ChatHub
class to the project.using System.Threading.Tasks; using Microsoft.AspNetCore.SignalR; namespace CoreSignalR { // The Hub class has to inherit from the Microsoft.AspNet.SignalR.Hub. public class ChatHub : Hub { public async Task Send(object sender, string message) { // Broadcast the message to all clients except the sender. await Clients.Others.SendAsync("broadcastMessage", sender, message); } public async Task SendTyping(object sender) { // Broadcast the typing notification to all clients except the sender. await Clients.Others.SendAsync("typing", sender); } } }
-
Start the Chat SignalR Hub. The hub is now accessible on the
http://localhost:5000/chat
URL.dotnet run