Edit this page

Peer-to-Peer Chat with SignalR

This article demonstrates how to configure a Telerik UI for ASP.NET MVC Chat and a SignalR 2 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 either of the following approaches:

Configuring the SignalR Hub

  1. Add the Microsoft.AspNet.SignalR package to the application.

    install-package Microsoft.AspNet.SignalR
    
  2. Create a Startup.cs file to configure the hub connection.

    using Microsoft.Owin;
    using Owin;
    
    [assembly: OwinStartup(typeof(SignalR.Startup))]
    
    namespace SignalR
    {
        public class Startup
        {
            public void Configuration(IAppBuilder app)
            {
                // Map the SignalR service
                app.MapSignalR();
            }
        }
    }
    
  3. Create a Hubs folder and create a ChatHub class in it.

    using Microsoft.AspNet.SignalR;
    
    namespace SignalR.Hubs
    {
        // The Hub class should inherit from the Microsoft.AspNet.SignalR.Hub
        public class ChatHub : Hub
        {
            public void Send(object sender, string message)
            {
                // Broadcast the message to all clients except the sender
                Clients.Others.broadcastMessage(sender, message);
            }
            public void SendTyping(object sender)
            {
                // Broadcast the typing notification to all clients except the sender
                Clients.Others.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. Include the SignalR 2 script in the page. It is distributed with the SignalR NuGet package.

    <script src="~/Scripts/jquery.signalR-2.3.0.min.js"></script>
    
  2. Reference the auto-generated SignalR hub script for the application.

    <script src="~/signalr/hubs"></script>
    
  3. Implement the initialization logic for the SignalR Hub proxy.

    function startHub(startCallback) {
        var hub = $.connection.chatHub;
    
        $.connection.hub.start().done(function () {
            startCallback(hub)
        });
    
        return hub;
    }
    
  4. In the $(document).ready() handler start the Hub proxy and attach event handlers for the respective remote hub actions:

    $(document).ready(function () {
        window.chat = $('#chat').getKendoChat();
        window.chatHub = startHub(function (hub) { });
    
        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);
        });
    });
    
  5. Start the Peer-to-Peer Chat Application.

See Also