SignalR2实时聊天

Posted 2020-11-23 xrpriest

SignalR2实时聊天

NuGet包中搜索SignalR添加引用
using Microsoft.AspNet.SignalR;

创建OWIN启动类

namespace SignalRChat
{
    public class Startup
    {
        public void Configuration(IAppBuilder app)
        {
            app.MapSignalR();
        }
    }
}

创建SignalR Hub类

namespace SignalRChat
{
    public class ChatHub : Hub
    {
        //创建发送消息的方法
        public void Send(string message)
        {
            //将消息发送给所有已连接客户端
            Clients.All.broadcastMessage(message);
            //只给当前调用的客户端发送消息
            Clients.Caller.broadcastMessage(message);
            //给当前调用的客户端以外的客户端发送消息
            Clients.Others.broadcastMessage(message);
            //将消息发送给目标客户端
            Clients.Client(Context.ConnectionId).broadcastMessageGo(message);
            Clients.AllExcept(ConnectionId1,ConnectionId2,...).broadcastMessageGo(message);
            //将消息发送给目标群组的客户端
            Clients.Group(GroupName).groupMessageGo(message);
            //排除指定客户
            Clients.Group(GroupName,ConnectionId1,ConnectionId2,...).groupMessageGo(message);
            //排除调用操作的客户端
            Clients.OthersInGroup(GroupName).groupMessageGo(message);
            //用户标识的指定用户
            Clients.User(userid).broadcastMessage(message);
        }
        //群组没有直接的创建和删除，群组和客户端的关联需要自行保存。
        public void Group(string GroupName)
        {
            //加入组
            Groups.Add(Context.ConnectionId, GroupName);
            //退出组
            Groups.Remove(Context.ConnectionId, GroupName);
        }
        public override Task OnConnected()
        {
            //创建连接时执行
            return base.OnConnected();
        }
        public override Task OnDisconnected(bool stopCalled)
        {
            //客户端断开时执行
            return base.OnDisconnected(stopCalled);
        }
        public override Task OnReconnected()
        {
            //重连时执行
            return base.OnReconnected();
        }
    }
}

创建前端html页面

• 页面上需要引用signalR.js和signalr/hubs
• 创建客户端方法以供后端调用
• 后端调用方法是输入对应的参数前端可直接获取
• chat.client.方法名字 = function(参数){}

<script src="Scripts/jquery.signalR-2.2.2.min.js"></script>
<script src="signalr/hubs"></script>

// 声明一个代理以引用集线器
var chat = $.connection.chatHub;

// 创建接收消息的方法
chat.client.broadcastMessage = function (message) {
    $("#ShowMessage ul").append(message)
};
$.connection.hub.start().done(function () {
    //启动连接时执行
});