点对点聊天
您可以为ASP配置Telerik UI Chat组件。. NET MVC和SignalR 2服务来创建点对点聊天应用程序。
要创建点对点聊天，你必须实现SignalR Hub服务器，然后实现应用程序客户端:
创建新应用程序
根据你喜欢的编辑器，使用以下任何一种方法:
- 为ASP创建一个新的Telerik UI。NET MVCapplication from the Standard template
- 创建一个新的ASP。NET MVCapplication in Visual Studio and include the Telerik UI for ASP.NET MVC package
配置SignalR Hub服务器
添加
Microsoft.AspNet.SignalR包到应用程序。安装包Microsoft.AspNet.SignalR创建一个
Startup.cs文件配置集线器连接。使用Microsoft.Owin;使用Owin;[assembly: OwinStartup(typeof(SignalR.Startup))]命名空间SignalR{公共类Startup{公共void Configuration(IAppBuilder app){//映射SignalR服务app. mapsignalr ();}}创建一个
中心文件夹，并创建ChatHub课堂上。使用Microsoft.AspNet.SignalR;名称空间SignalR。中心{ // The Hub class has to 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); } } }
初始化聊天
在观点\ \ Index.cshtml回家初始化Chat并为其实现处理程序帖子和typingStart事件。
@{var name = Guid.NewGuid().ToString();} @(Html.Kendo(). chat (). name ("chat") . user (user => user) //应用程序的每个实例将生成一个唯一的用户名。//通过这种方式，SignalR Hub "知道"谁是发送消息的用户//以及谁是必须接收该消息的客户端. name (@name) . iconurl ("https://demos.telerik.com/kendo-ui/content/chat/avatar.png")) . events (events => events . typingStart ("onTypingStart") . post ("onPost"))) 配置SignalR客户端Hub代理
在页面中包含signalr2脚本。它与SignalR NuGet包一起发布。
< script src = " ~ /脚本/ jquery.signalR-2.3.0.min.js " > < /脚本>引用应用程序自动生成的SignalR集线器脚本。
< script src = " ~ / signalr /中心" > < /脚本>实现SignalR Hub代理的初始化逻辑。
函数startHub(startCallback) {var hub = $.connection.chatHub;美元.connection.hub.start()。done(function () {startCallback(hub)});返回中心;}在
$ (document)时()处理程序，启动Hub代理并为各自的远程Hub操作附加事件处理程序。美元(文档)。准备(函数(){窗口。$('#chat').getKendoChat();窗口。chatHub = startHub(function (hub) {});chatHub。on("broadcastMessage"， function (sender, message) {var message = {type: "text"， text: message};//在聊天中呈现接收到的消息闲谈，聊天renderMessage(消息、发送者); }); chatHub.on("typing", function (sender) { // Display the typing notification in the Chat. chat.renderMessage({ type: "typing" }, sender); }); });启动对等聊天应用程序。