Edit this page

Peer-to-Peer Chat with SignalR

This article demonstrates how to configure a Telerik UI for ASP.NET Core Chat HTML helper and a .Net Core SignalR service to create a Peer-to-Peer Chat application.

Implementing the SignalR Server Hub

This section explains how to implement the SignalR Chat Hub server.

Creating the New Application

Depending on your preferred editor, use any of the following approaches:

Configuring the SignalR Hub

  1. Modify Startup.cs. The new lines have to be added to the bottom of the ConfigureServices and Configure methods.

    using Microsoft.AspNetCore.Builder;
    using Microsoft.AspNetCore.Hosting;
    using Microsoft.Extensions.DependencyInjection;
    
    namespace CoreSignalR
    {
        public class Startup
        {
            public void ConfigureServices(IServiceCollection services)
            {
                ...
    
                // Add the SignalR service
                services.AddSignalR();
            }
    
            public void Configure(IApplicationBuilder app, IHostingEnvironment env)
            {
                ...
    
                // Point to the route that will return the SignalR Hub
                app.UseSignalR(routes =>
                {
                    routes.MapHub<ChatHub>("/chat");
                });
            }
        }
    }
    
    

    Important

    If in the app.UseSignalR line the editor throws an IApplicationBuilder does not contain definition for UseSignalR error, add the Microsoft.AspNetCore.SignalR v.1.0.0 package to the project.

  2. Add a ChatHub class to the project.

    using System.Threading.Tasks;
    using Microsoft.AspNetCore.SignalR;
    
    namespace CoreSignalR
    {
        // The Hub class should 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);
            }
        }
    }
    

Implementing the Application Client

This section explains how to implement the P2P Chat application client.

Initializing the Chat

In the Views\Home\Index.cshtml fie, initialize the Chat and implement handlers for its post and typingStart events.

@{
    var name = Guid.NewGuid().ToString();
}

@(Html.Kendo().Chat()
    .Name("chat")
    .User(user => user
        // Each instance of the app 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.
        .Name(@name)
        .IconUrl("http://demos.telerik.com/kendo-ui/content/chat/avatar.png")
    )
    .Events(events => events
        .TypingStart("onTypingStart")
        .Post("onPost")
    )
)

<script>
    // The `typingStart` 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.
    function onTypingStart(e) {
        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.
    function onPost(args) {
        chatHub.invoke("send", chat.getUser(), args.text);
    }
</script>

Configuring the SignalR Client Hub Proxy

  1. Get the SignalR client script from NPM.

    npm install @aspnet/signalr
    
  2. Copy the @aspnet/signalr folder from the node_modules directory to the wwwroot/lib folder of the Core project.

  3. Include the SignalR script on the HTML page.

    <script src="lib/signalr/dist/browser/signalr.min.js"></script>
    
  4. Initialize the SignalR Hub proxy.

    // Point to the Hub remote endpoint
    window.chatHub = new signalR.HubConnectionBuilder()
        .withUrl('/chat')
        .build();
    
  5. Start the Hub proxy and configure it to detect errors.

    chatHub.start()
        .catch(function(err) {
            console.error(err.toString());
        });
    
  6. Attach the event handlers for the respective remote hub actions.

    $(document).ready(function() {
        window.chat = $("#chat").getKendoChat();
    
        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 typing notification in the Chat
            chat.renderMessage({ type: 'typing' }, sender);
        });
    });
    
  7. Start the Peer-to-Peer Chat Application.

See Also