RadChat real-time live crossbrowser chat via SignalR

1 posts, 0 answers
  1. Peter
    Peter avatar
    13 posts
    Member since:
    May 2016

    Posted 06 Jun Link to this post

    Requirements

    Telerik Product and Version

    UI for ASP.NET AJAX 2018 R2

    Supported Browsers and Platforms

    all browsers supported by Telerik UI for ASP.NET AJAX suite

    Components/Widgets used (JS frameworks, etc.)

    RadChat, SignalR, .NET 4.5 C#

    PROJECT DESCRIPTION

    This example demonstrates how to configure the RadChat component for a real-time chat by using the SignalR technology. 

    Default.aspx

    <script src="Scripts/jquery-1.12.4.js"></script>
    <script src="Scripts/jquery.signalR-2.2.3.js"></script>
    <telerik:RadChat runat="server" ID="RadChat1" Height="400px">
        <MessagesSettings Placeholder="Enter message here" />
        <ClientEvents OnLoad="OnLoad" OnTypingStart="OnTypingStart" OnPost="OnPost" />
    </telerik:RadChat>
    function OnPost(sender, args) {
        chatHub.invoke("send", sender.get_user(), args.get_text());
    }
     
    function OnTypingStart(sender, args) {
        chatHub.invoke("sendTyping", sender.get_user());
    }
    function createUser() {
        var username, usericonUrl;
        if (Telerik.Web.Browser.chrome) {
            username = "Chrome browser user";
            usericonUrl = "/avatars/chrome.png";
        } else if (Telerik.Web.Browser.ie) {
            username = "Internet Explorer browser user";
            usericonUrl = "/avatars/ie.png";
        } else if (Telerik.Web.Browser.ff) {
            username = "FireFox browser user";
            usericonUrl = "/avatars/firefox.gif";
        } else {
            username = "Default user";
        }
     
        var user = {
            name: username,
            iconUrl: usericonUrl
        }
     
        return user;
    }
     
    function OnLoad(sender, args) {
        createUser()
        sender.set_user(createUser());
     
        initializeChatHub(sender);
    }
     
    function initializeChatHub(chat) {
        window.chatHub = startHub(function (hub) {
        });
     
        chatHub.on("broadcastMessage", function (sender, message) {
            var message = {
                type: "text",
                text: message
            };
     
            chat.renderMessage(message, sender);
        });
     
        chatHub.on("typing", function (sender) {
            chat.renderMessage({ type: "typing" }, sender);
        });
     
        $.support.cors = true;
    }
     
    function startHub(startCallback) {
        var con = $.hubConnection('http://localhost:49573/');
        var hub = con.createHubProxy("dataHub");
     
        con.start({ jsonp: true, transport: ['webSockets', 'longPolling'] }).done(function () {
            startCallback(hub)
        });
     
        return hub;
    }

     

    DataHub.cs

    using Microsoft.AspNet.SignalR;
    using Microsoft.CSharp;
     
    namespace RadChatSignalR
    {
        public class DataHub : Hub
        {
            public void Send(object sender, string message)
            {
                Clients.Others.broadcastMessage(sender, message);
            }
     
            public void SendTyping(object sender)
            {
                Clients.Others.typing(sender);
            }
        }
    }

    Startup.cs

    using Microsoft.AspNet.SignalR;
    using Microsoft.Owin;
    using Owin;
     
    [assembly: OwinStartup(typeof(RadChatSignalR.Startup))]
    namespace RadChatSignalR
    {
        public class Startup
        {
            public void Configuration(IAppBuilder app)
            {
                var config = new HubConfiguration();
                config.EnableJSONP = true;
     
                app.MapSignalR(config);
            }
        }
    }

    packages.config

    <?xml version="1.0" encoding="utf-8"?>
    <packages>
      <package id="jQuery" version="1.12.4" targetFramework="net45" />
      <package id="Microsoft.AspNet.SignalR" version="2.2.3" targetFramework="net45" />
      <package id="Microsoft.AspNet.SignalR.Core" version="2.2.3" targetFramework="net45" />
      <package id="Microsoft.AspNet.SignalR.JS" version="2.2.3" targetFramework="net45" />
      <package id="Microsoft.AspNet.SignalR.SystemWeb" version="2.2.3" targetFramework="net45" />
      <package id="Microsoft.CSharp" version="4.5.0" targetFramework="net45" />
      <package id="Microsoft.Owin" version="2.1.0" targetFramework="net45" />
      <package id="Microsoft.Owin.Host.SystemWeb" version="2.1.0" targetFramework="net45" />
      <package id="Microsoft.Owin.Security" version="2.1.0" targetFramework="net45" />
      <package id="Newtonsoft.Json" version="6.0.4" targetFramework="net45" />
      <package id="Owin" version="1.0" targetFramework="net45" />
    </packages>

     


Back to Top