回到顶部

SignalR简版web聊天室(实现过程分析篇)

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

标签: ASP.NET   SignalR  

接上一篇:基于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人立场,如涉及侵权,请及时告知。

评论努力加载中...
暂无评论
暂无评论

手机扫码阅读

热门相关

加载中...
关于我们   联系我们   申请友链   赞助记录   站点地图
© 2014 - 2017 www.80iter.com All Rights Reserved. 京ICP备14042174号-1
本站遵循 CC BY 4.0 协议,转载请注明出处 。