SignalR简版web聊天室（实现过程分析篇）

时间：5年前   作者：庞顺龙   浏览：3213   [站内原创，转载请注明出处]

接上一篇：基于asp.net+SignalR实现的简版web聊天室（demo简单演示篇）

简单来说：SignalR的使用重点其实就是hub类方法触发页面js和页面js调用hub类方法的互通。

1、新建项目

2、引入必须的js

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

3、使用nuget工具，向项目添加SignalR

4、新建hub类

5、讲解群发公聊信息实现过程

hub类添加sendAll方法

//广播信息到所有clinet
public void SendAllServer(string name, string message)
{
    Clients.All.SendAllClient("<li>[" + name + "]：" + message + " - " + DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss") + "</li>");
}

页面添加SignalR脚本

$(function () {

    var chat = $.connection.PascalCaseContosoChatHub;

    chat.client.sendAllClient = function (message) {
        $('#chatList').append(message);
    };
        
    $.connection.hub.start().done(function () {
        
        $('#sendmessage').click(function () {
            if ($('#message').val() == "") {
                alert("请输入信息后再发送");
                return;
            }
            if ($("#hiddenToConnectionId").val() == "") {
                chat.server.sendAllServer($('#hiddenUserName').val(), $('#message').val());
            } else {
                chat.server.sendToSingle($("#hiddenToConnectionId").val(), $('#hiddenUserName').val(), $("#hiddenToUserName").val(), $('#message').val());
            }
            $('#message').val("").focus();
        });
    }).fail(function () {
        $('#chatList').append('<li><strong>' + encodedName
           + '</strong>：连接聊天服务器失败...</li>');
    });

});

说明：

var chat = $.connection.PascalCaseContosoChatHub; 是注册页面链接方法。

Clients.All.SendAllClient 方法会触发所有页面chat.client.sendAllClient方法，进行消息追加。

也就是说：在cs类中使用Client.xxx.自定义方法名称  与 页面 js chat.client.sendAllClient 进行调用。

规则：camel 命名法，也就是说，cs类中是  SendAll方法，那么js中就是chat.client.sendAll 进行调用。

这样就实现了，cs类方法触发所有client进行消息的追加，也就是公聊。

6、私聊和其他方法说明

//所有人
Clients.All.addContosoChatMessageToPage(name, message);

//触发者
Clients.Caller.addContosoChatMessageToPage(name, message);

//所有人除了触发者
Clients.Others.addContosoChatMessageToPage(name, message);

//根据ConnectionId，实现私聊的方式
Clients.Client(Context.ConnectionId).addContosoChatMessageToPage(name, message);

//所有人，除了指定的connectionId1，connectionId2
Clients.AllExcept(connectionId1, connectionId2).addContosoChatMessageToPage(name, message);

//一组可见，用于小组聊天
Clients.Group(groupName).addContosoChatMessageToPage(name, message);

//一组可见，用于小组聊天，除了指定的connectionId1，connectionId2
Clients.Group(groupName, connectionId1, connectionId2).addContosoChatMessageToPage(name, message);

//除了当前组其他可见
Clients.OthersInGroup(groupName).addContosoChatMessageToPage(name, message);

//指定userid可见
Clients.User(userid).addContosoChatMessageToPage(name, message);
 
//指定的ConnectionIds，注意，这里是一组ConnectionIds，不是一个ConnectionId
Clients.Clients(ConnectionIds).broadcastMessage(name, message);

//指定的组，多个
Clients.Groups(GroupIds).broadcastMessage(name, message);

//根据用户name
Clients.Client(username).broadcastMessage(name, message);

//一组用户name可见
Clients.Users(new string[] { "myUser", "myUser2" }).broadcastMessage(name, message);

我上一篇文章demo演示中用到的有：

① 使用到了 Clients.Client，用于展示私聊信息

//发送信息给单一client的人 
public void SendToSingle(string toConnectionID, string fromName, string toName, string message)
{
    Clients.Client(toConnectionID).SendToSingleClient("<li class='green_li'>[" + fromName + "]对你说：" + message + " - " + DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss") + "</li>");
    Clients.Client(Context.ConnectionId).SendFromSingleClient("<li class='green_li'>你对[" + toName + "]说：" + message + " - " + DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss") + "</li>");
}

② 当前用户加入聊天室，当前用户不显示xxx加入了聊天室，其他client显示，用 Clients.AllExcept(connectionID)

//新用户加入系统消息 
public void SystemNotice(string connectionID, string username, string type)
{
    if (type.Equals("1"))
    {
        Clients.AllExcept(connectionID).SystemNoticeClient("<li class='red_li'>系统消息："
            + username + " 加入聊天室 - " + DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss") + "</li>");
    }
    else
    {
        Clients.AllExcept(connectionID).SystemNoticeClient("<li class='red_li'>系统消息："
            + username + " 退出了聊天室 - " + DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss") + "</li>");
    }
}

其他的自行根据需求使用即可

7、client发送聊天信息流程分析

①、client发送聊天信息通过js到cs类方法

②、hub类进行不同分类处理

③、hub类方法接收到信息后，通知对应的client进行数据接收

公聊就是Clients.All.SendAllClient，那么所有连接中的client页面都会被通知触发

④、私聊简单说明，其实私聊和公聊类似，只是在hub类方法通知的client是唯一的一个client而已

在页面js中，被通知触发方法

由庞顺龙最后编辑于：5年前

内容均为作者独立观点，不代表八零IT人立场，如涉及侵权，请及时告知。