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:

1. Initialize the Chat
2. Configure the SignalR Client Hub proxy
3. Set up the project
4. 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

1. Get the SignalR client script from NPM.

   npm install @aspnet/signalr
   

2. Include the SignalR script on the HTML page.

   <script src="@aspnet/signalr/dist/browser/signalr.min.js"></script>
   

3. Initialize the SignalR Hub proxy.

   // Point to the Hub remote endpoint.
   window.chatHub = new signalR.HubConnectionBuilder()
       .withUrl('http://localhost:5000/chat')
       .build();
   

4. Start the Hub proxy and configure it to detect errors.

   chatHub.start()
       .catch(function(err) {
           console.error(err.toString());
       });
   

5. 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

1. Create a new ASP.NET Core Empty Web Application.

   dotnet new web
   

2. Add the AspNetCore.App package which includes the SignalR to the application.

   dotnet add package Microsoft.AspNetCore.App
   

3. Run the application to test whether it is properly built.

   dotnet run
   

Configuring the SignalR Hub

1. 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");
               });
           }
       }
   }
   
   

2. 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);
           }
       }
   }
   

3. Start the Chat SignalR Hub. The hub is now accessible on the http://localhost:5000/chat URL.

   dotnet run
   

See Also

• Basic Usage of the Chat (Demo)
• JavaScript API Reference of the Chat