Asp.Net MVC 5与SignalR的简单案例

1.使用VS2019创建一个MVC5的新项目

2.打开NuGet包管理器，搜索以下三个，依次安装到指定项目中去

Microsoft.AspNet.SignalR
Microsoft.AspNet.SignalR.Client
Microsoft.AspNet.SignalR.Owin
全部安装完成，展开引用查看，正确如下图所示

3.项目右键添加文件夹 Hubs

4.在文件夹下创建 Startup.cs，将以下代码选择性的

using Microsoft.Owin;
using Owin;

[assembly: OwinStartup(typeof(SignalRTest.Hubs.Startup))]
namespace SignalRTest.Hubs
{
    public class Startup
    {
        public void Configuration(IAppBuilder app)
        {
            // 配置集线器 
            app.MapSignalR();
        }
    }
}

5.在文件夹下创建 ServerHub.cs （这个名字可以随意起）

using Microsoft.AspNet.SignalR;
using System;

namespace SignalRTest.Hubs
{
    public class ServerHub : Hub
    {
        /// <summary>
        /// 供客户端调用的服务器端代码
        /// </summary>
        public void Sender(string message)
        {
            Clients.All.sendMessage(DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss"), message);
        }
    }
}

6.在HomeController中添加一个方法，并添加对应视图

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

7.在SignalRTest.cshtml中添加前端代码

@{
    ViewBag.title = "SignaIR聊天窗口";
}
<p class="container">
    <input type="text" id="message" />
    <input type="button" id="sendmessage" value="biubiu" />
    <ul id="messageBox"></ul>
</p>

@section scripts
{
    <script src="~/Scripts/jquery.signalR-2.4.1.min.js"></script>
    <script src="~/signalr/hubs"></script>
    <script>
        $(function () {
            //引用自动生成的集线器代理
            var chat = $.connection.serverHub;

            //定义服务器调用的客户端sendMessage来显示新消息
            chat.client.sendMessage = function (name, message) {
                //向页面添加消息
                $("#messageBox").append('<li><strong style="color:green">' + name + '</strong>:' + message + '</li>');
            }
            //设置焦点到输入框
            $('#message').focus();
            //开始连接服务器
            $.connection.hub.start().done(function () {
                $('#sendmessage').click(function () {
                    //调用服务器端集线器的Send方法
                    chat.server.sender($('#message').val());
                    //清空输入框信息并获取焦点
                    $("#message").val('').focus();
                })
            })
        });
    </script>
}

这里要注意：
1.var chat = $.connection.serverHub;
serverHub 是 ServerHub 的类名，首字母必须要小写

2.chat.server.sender($('#message').val());
sender 是 ServerHub 类中的方法名，首字母必须要小写

重要的事情说三遍：
调用ServerHub中的类名和方法名首字母都要小写！
调用ServerHub中的类名和方法名首字母都要小写！
调用ServerHub中的类名和方法名首字母都要小写！

8.在不同的浏览器中输入相同地址 http://localhost:7852/Home/SignalRTest

在任意一个页面输入，另一个页面会出现相同数据 ，简单的交互就实现了

百度网盘Demo地址下载
链接：https://pan.baidu.com/s/1R_99MEwDppbG4o9TfRi_gA
提取码：1336