C# SignalR的简单实现

简单的实现了广播和私聊；下面是效果图：

实现过程：

首先通过NeGet 在项目中安装Signalr

然后在文件App_Start 下面添加一个启动类=>Startup；并且在Web.config 里面添加配置

using Microsoft.Owin;
using Owin;

[assembly: OwinStartup(typeof(WebApplication.Startup))]

namespace WebApplication
{
    public class Startup
    {
        public void Configuration(IAppBuilder app)
        {
            // Any connection or hub wire up and configuration should go here
            app.MapSignalR();
        }
    }
}

 <appSettings>
    <!--<add key="owin:AppStartup" value="WebApplication.Startup" />-->
    <add key="owin:AutomaticAppStartup" value="true" />
  </appSettings>

到这里准备工作就完成了； 这里的 Startup.cs 和 Web.config里面的配置 有点麻烦 第一次实现没有经验 导致后面代码总是没有生成前台页面的引用【~/signalr/hubs】，导致运行以后报404错误；
他们的关系是这样的

具体地址：http://www.voidcn.com/article/p-rzbdznjc-byu.html

实现代码：

后台代码：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using System.Web;
using Microsoft.AspNet.SignalR;
using Microsoft.AspNet.SignalR.Hubs;

namespace WebApplication
{
    [HubName("ChatRoomHub")]
    public class SignalR : Hub
    {

        static List<UserEntity> users = new List<UserEntity>();

        /// <summary>
        /// 添加用户
        /// </summary>
        /// <param name="nickName"></param>
        public void UserEnter(string nickName)
        {
            UserEntity userEntity = new UserEntity
            {
                NickName = nickName,
                ConnectionId = Context.ConnectionId
            };

            users.Add(userEntity);
            Clients.All.NotifyUserEnter(nickName, users);//调用前台NotifyUserEnter方法
        }
        List<string> userIdList = new List<string>();
        /// <summary>
        /// 发送消息
        /// </summary>
        /// <param name="nickName"></param>
        /// <param name="message"></param>
        /// <param name="selectUserId"></param>
        public void SendMessage(string nickName, string message, string selectUserId)
        {
            if (!string.IsNullOrEmpty(selectUserId))
            {
                userIdList = selectUserId.Split(',').ToList();
                foreach (string str in userIdList)
                {
                    if (users.Any(c => c.ConnectionId == str))
                    {
                        //只发送用户选中的group
                        //Clients.Group(str, new string[0]).NotifySendMessage(nickName, message);
                        Clients.Client(str).NotifySendMessage(nickName, message);
                    }
                }
            }
            else
            {
                Clients.All.NotifySendMessage(nickName, message);//调用前台NotifySendMessage方法
            }
        }

    }

    public class UserEntity
    {
        public string NickName { get; set; }

        public string ConnectionId { get; set; }
    }
}

前台代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="Scripts/jquery-3.3.1.min.js"></script>
    <script src="Scripts/jquery.signalR-2.4.1.min.js"></script>
    <script src='<%: ResolveClientUrl("~/signalr/hubs") %>'></script>
</head>
<body>
    <label>在线人数:</label><span id="rs">0</span><br />
    <input type="text" id="name" />
    <input type="button" id="dl" value="登录" /><br />
    <select id="mb">
        <option value="">请选择</option>
    </select>
    <input type="text" id="val" />
    <input type="button" id="fs" value="发送" />
    <br />
    <div id="lt">
    </div>
    <script>
        var chat;
        $(function () {

            chat = $.connection.ChatRoomHub;

            //添加用户
            chat.client.NotifyUserEnter = function (nickName, users) {
                buildUserTemplate(nickName, users);
            }

            //用户离开
            chat.client.NotifyUserLeft = function (nickName, users) {
                buildUserTemplate(nickName, users);
            }

            chat.client.NotifySendMessage = function (nickName, message) { NotifySendMessage(nickName, message) }
            //用户列表
            function buildUserTemplate(nickName, users) {
                $("#rs").text(users.length);
                $("#mb").empty();
                var txt = '<option value="">请选择</option>';
                $.each(users, function (e, v) {
                    txt += '<option value="' + v.ConnectionId + '">' + v.NickName + '</option>';
                });
                $("#mb").append(txt);

            }

            function NotifySendMessage(nickName, message) {
                var txt = '<label>' + nickName + ':</label><span id="rs">' + message + '</span><br />';
                $("#lt").append(txt);
            }


        })
        var NameUser;
        $("#dl").click(function () {
            var name = $("#name").val();
            NameUser = name;
            $.connection.hub.start().done(function () {
                chat.server.userEnter(name);
            });
        })
        $("#fs").click(function () {
            var nameId = $("#mb").val();
            var txt = $("#val").val();
            chat.server.sendMessage(NameUser, txt, nameId);
        })
    </script>
</body>

</html>

页面就是引用：<%: ResolveClientUrl("~/signalr/hubs") %> 就是前面说的报404 错误的地方 引用有风险 配置需谨慎！！！

1. js定义后台调用方法 chat.client.方法名=function（）{}  这样定义的方法在后台里面可以用 Clients.属性.方法名（）的方式调用 这里的属性有

All 就是广播;Client就是单个推送;其他的没有尝试。

2.js调用后台定义的方法：$.connection.ChatRoomHub.server.方法名()，【ChatRoomHub】便是后台代码里面的“HubName”；上面将 $.connection.ChatRoomHub 赋值给了chat, 另外js调用后台方法名时首字母小写列：chat.server.userEnter(name) 不然会找不到方法

3. $.connection.hub.start().done(function () { chat.server.userEnter(name); }); 这个方法应该是连接的意思吧；有时间了试一下；

暂时就写到这里；

参考文档： https://www.cnblogs.com/cang12138/p/7404124.html

这里写的比我好可以去看看；