一.概述:

动用 ASP.NET 那么 Signal揽胜极光 2
成立叁个实时聊天应用程序。将 Signal翼虎 添加 MVC 5
应用程序中,并创设聊天视图发送并彰显信息。

在德姆o中,将学习Signal宝马X5 开发任务包括 ︰
向 MVC 5 应用程序添加那么 Signal宝马X5 体育地方。
开创集线器和空旷运转类,以将内容推送到客户端。
行使 web 页中的那么 Signal瑞虎 jQuery 库发送邮件并体现更新从集线器。

上边包车型客车显示器快照展现在浏览器中运营的已形成的闲聊应用程序。

图片 1

2.实现:

创立四个 ASP.NET MVC 5 应用程序,安装 Signal汉兰达库,添加和创办聊天应用程序。

1>.在 Visual Studio 中,成立一个 C# ASP.NET 应用程序的目的.NET 框架
4.5,命名为 Signal中华VChat,并单击鲜明.

图片 2

2>.在New ASP.NET Project对话框中,选用MVC和单击更改身份验证

图片 3

在意:假诺应用程序选拔1个见仁见智的身份验证提供程序,将创设Startup.cs类,那里选择无身份验证全体大家精诚团结创制一个Startup类。

3>.安装SignalR
开辟工具 |库包管理器
|程序包管理器控制台,然后运转以下命令。此步骤向项目中添加一组脚本文件和启用那么
Signal奥德赛 效用的顺序集引用。

输入:install-package Microsoft.AspNet.SignalR
图片 4

安装完结,Scripts文件夹下出现了那般的公文:

图片 5

4>.创建Startup类:

在根目录下创立类,命名为Startup:

using Owin;
using Microsoft.Owin;
[assembly: OwinStartup(typeof(SignalRChat.Startup))]
namespace SignalRChat
{
    public class Startup
    {
        public void Configuration(IAppBuilder app)
        {
            // Any connection or hub wire up and configuration should go here
            app.MapSignalR();
        }
    }
}

5.>在类型中添加Hubs文件夹,添加现有项:
鼠标右键单击Hubs文件夹,请单击添加|新类型,选取Visual C# |Web |那么
Signal奥迪Q5节点在已设置窗格中,从基本窗格中,选用那么 SignalPRADO 集线器类
(v2)并创制名为ChatHub.cs。

 

图片 6

修改代码:

using System;
using System.Web;
using Microsoft.AspNet.SignalR;
namespace SignalRChat
{
    public class ChatHub : Hub
    {
        public void Send(string name, string message)
        {
            // Call the addNewMessageToPage method to update clients.
            Clients.All.addNewMessageToPage(name, message);
        }
    }
}

6>.编辑HomeController类发未来Controllers/HomeController.cs中,将以下措施添加到类。此措施重临的闲聊的视图,您将在前面的手续中开创。

public ActionResult Chat()
{
    return View();
}

7>.在Chat()方法上右键>添加视图页

图片 7

修改代码为:

图片 8图片 9

 1 @{
 2     ViewBag.Title = "Chat";
 3 }
 4 <h2>Chat</h2>
 5 <div class="container">
 6     <input type="text" id="message" />
 7     <input type="button" id="sendmessage" value="Send" />
 8     <input type="hidden" id="displayname" />
 9     <ul id="discussion"></ul>
10 </div>
11 @section scripts {
12     <!--Script references. -->
13     <!--The jQuery library is required and is referenced by default in _Layout.cshtml. -->
14     <!--Reference the SignalR library. -->
15     <script src="~/Scripts/jquery.signalR-2.0.3.min.js"></script>
16     <!--Reference the autogenerated SignalR hub script. -->
17     <script src="~/signalr/hubs"></script>
18     <!--SignalR script to update the chat page and send messages.-->
19     <script>
20         $(function () {
21             // 建立对应server端Hub class的对象,请注意ChatHub(Hubs文件夹下的类名)的第一个字母要改成小写 
22             var chat = $.connection.chatHub;
23             // 定义client端的javascript function,供server端hub,通过dynamic的方式,调用所有Clients的javascript function 
24             chat.client.addNewMessageToPage = function (name, message) { //这里的fuction(name,message)=>ChatHub.cs 中的Send(string name, string message)
25                 //当server端调用sendMessage时,将server push的message数据,呈现在wholeMessage中 
26                 $('#discussion').append('<li><strong>' + htmlEncode(name)
27                     + '</strong>: ' + htmlEncode(message) + '</li>');
28             };
29             // Get the user name and store it to prepend to messages.
30             $('#displayname').val(prompt('Enter your name:', ''));
31             // Set initial focus to message input box.
32             $('#message').focus();
33             //把connection打开 
34             $.connection.hub.start().done(function () {
35                 $('#sendmessage').click(function () {
36                     //调用叫server端的Hub对象,将#message数据传给server 
37                     chat.server.send($('#displayname').val(), $('#message').val());
38                     $('#message').val('').focus();
39                 });
40             });
41         });
42         // This optional function html-encodes messages for display in the page.
43         function htmlEncode(value) {
44             var encodedValue = $('<div />').text(value).html();
45             return encodedValue;
46         }
47     </script>
48 }

View Code

F5周转品种就足以实现地点的职能,能够有用户实时参与实时同步聊天。

相关文章

网站地图xml地图