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