Asp.net信号员群聊功能的应用与实现

ASP。NET signalr是一个面向ASP.NET开发者的库，可以简化向应用程序添加实时Web功能的过程。实时Web功能是指服务器代码可以在内容可用时立即将内容推送到连接的客户端，而不是让服务器等待客户端请求新数据的功能。(来自官方介绍。)

信号员官方网站

-1.写这篇文章的原因

在上一篇文章B/S(Web)实时通信解决方案中，没有详细介绍Signaler，所以另一篇文章专门介绍Signaler，本文重点介绍Hub功能。

0.先看最终实现效果

github:https://github.com/Emrys5/SignalRGroupChatDemo

在线演示：http://chat.lining.name/

1、前期准备工作

1.1.先在NuGet上下载SignalR的包。

1.2.配置Owin和信号

1.2.1.创建一个新的启动类并注册信号

公共类启动{公共void Configuration(IAppBuilder app){ app。mapsignor()；}}然后在web.config中配置Startup类，并将其添加到configuration=appSettings节点中

添加键='owin:AppStartup '值=' SignalRChat。App_Start。启动'/

1.2.2.在页面中引入SignalR的js

1.由于SignalR的前端是基于jQuery的，所以应该在页面中引入jQuery。

2.介绍信号机的js。

3.介绍最重要的枢纽js。该js不存在。SignalR将反映并获取所有供客户调用的方法，并将它们放入集线器js。

script src=' http : ~/scripts/jquery-1 . 10 . 2 . js '/script script src=' http 3360 ~/scripts/jquery . signal er-2 . 2 . 1 . min . js '/script script src=' http 3360 ~/signal er/。

hub类中的方法是提供给客户端调用的js方法。

可以用js中的signalr调用SendMsg。

[hub name(' simple hub ')]public class simple hub : hub { public void send msg(string msg){ } }，基本上前期准备工作就完成了，接下来就是具体的操作。

2.原理和简单编程

其实，简单理解的话，原理很简单。因为http是无状态的，每次请求后都会与服务器断开连接，这意味着客户端很容易找到服务器，但是服务器给你的客户端发送消息就麻烦了。如果不了解，可以参考前面的文章B/S(Web)实时通信解决方案。

SignalR很好地解决了这个问题，也就是说，它实现了浏览器和服务器之间的全双工通信。

2.1.客户端到服务器

客户端代码

脚本类型=' text/JavaScript ' var ticker=$ . connection . simplehub；$ . connection . hub . start()；$('#btn ')。点击(function () {//链接完成后，可以向ticker . server . sendmag发送消息('待发送消息')；});/script服务器代码

[hubname ('simple hub')]公共类simple hub : hub { public void send msg(字符串msg){//获取链接id var connectionid=context . connectionid；//get cookie var cookie=context . request cookies；}} SimpleHub是我们定义的继承Hub类，然后我们可以用HubName特性对其进行重命名。

然后开始链接。

链接完成后，我们可以调用SimpleHub类中调用的方法。这使得从客户端向服务器发送消息变得容易。

我们也可以在Context中得到我们想要的东西，比如链接id、cookie等等。

2.2.服务器到客户端

服务器代码

[hubname ('simple hub')]公共类simple hub : hub { public void send msg(string msg){ clients。all.msg('发送给客户端的消息')；}}客户端代码

脚本类型=' text/JavaScript ' var ticker=$ . connection . GroupChathub；$ . connection . hub . start()；ticker.client.msg=function(数据){ console.log(数据)；}/脚本

这演示了如何向客户端发送消息，这也是SignalR的一个重要功能。这里有两个问题需要解决。

问题1:这是向所有连接的客户端发送消息。如果是单个客户端或一组客户端，应该如何发送？

第二，当我们调用msg向客户端发送消息时，我们在收到消息后给出反馈，然后将消息发送给客户端，这与ajax非常相似，服务器不会主动向客户端发送消息。

解决方法：

首先，客户端可以向某个功能的组或客户端发送消息

//所有者客户端。All.msg('发送给客户端的消息')；//特定的cooperation clients . client(' connectionid ')。msg('发送给客户端的消息')；//特定的groupclients。群组(' groupname ')。msg('发送给客户端的消息')；这是三个常用的，但是还有很多其他的，比如AllExcept和Clients。

信号2.0中还添加了其他、其他组、其他组等.

其次，我们可以调用global host . connectionmanager . gethubscontextsimplehub()。我们需要发送消息来获得客户的客户。获取客户端并发送消息。我们最好写singleton模式，因为这个需求符合单个案例，群聊中有详细的代码。

3.信号员实现群聊

上面的介绍和代码已经可以实现b=s和s=b，所以实现群聊和个人聊天相对简单。

因为功能比较简单，我把用户名保存在了一个cookie中，也就是说刚进来的时候需要设置一个cookie。

还需要在hub中实现OnConnected、OnDisconnected和OnReconnected，然后在方法中设置用户和connectionid，统计聊天的在线用户。

中枢代码

///摘要///信号中枢群聊类////摘要[HubName('groupChatHub')] //标记名称供射流研究…调用公共类group chat Hub : Hub {///summary///用户名////摘要私有字符串用户名{ get { var UserName=Context .请求CooKies[' USERNAME ']；返回userName==null？ HttpUtility .网址解码（用户名。价值);} } ///摘要///在线用户////summary私有静态字典字符串，int _ online user=new dictionary string，int()；///摘要///开始连接////摘要////返回/返回公共覆盖任务OnConnected(){ Connected()；返回基地OnConnected()；} ///摘要///重新链接////summary////returns/returns公共覆盖任务on recconnected(){ Connected()；返回基地OnReconnected()；}私人void Connected() { //处理在线人员if(！_onlineUser .包含密钥（用户名))//如果名称不存在，则是新用户{ //加入在线人员_onlineUser .添加（用户名，1);//向客户端发送在线人员客户所有人。PublissHuser(_ OnLineUser .选择(I=I . Key))；//向客户端发送加入聊天消息客户所有人。PublishMSg(formatMSg('系统消息'用户名'加入聊天'));} else { //如果是已经存在的用户，则把在线链接的个数1 _在线用户[用户名]=_在线用户[用户名]1；} //加入枢纽组，为了发送单独消息团体。添加（上下文. ConnectionId，' GROUP-' UserName)；} ///摘要///结束连接////summary////param name=' stop called '/param////returns/returns public override Task on connected(bool stop called){//人员链接数-1 _在线用户[用户名]=_在线用户[用户名]-1；//判断是否断开了所有的链接if(_ online user[UserName]==0){//移除在线人员_onlineUser .删除（用户名);//向客户端发送在线人员客户所有人。PublissHuser(_ OnLineUser .选择(I=I . Key))；//向客户端发送退出聊天消息客户所有人。PublishMSg(formatMSg('系统消息'用户名'退出聊天'));} //移除中心组组。移除（上下文. ConnectionId，' GROUP-' UserName)；返回基地断开连接时(停止呼叫)；} ///摘要///发送消息，供客户端调用////summary ///param name='user '用户名，如果为0,则是发送给所有人/param ///param名称='msg '消息/param public void SendMsg(字符串用户，字符串msg) { if(用户=='0') { //发送给所有用户消息客户所有人。Publishmsg(格式msg(UserName，msg))；} else { ////发送给自己消息//客户端。组(“组”-用户名).publishmsg(格式msg(UserName，msg))；////发送给选择的人员//客户端集团('集团')用户)。publishmsg(格式msg(UserName，msg))；//发送给自己消息客户。组（新列表字符串{ 'GROUP-' UserName，' GROUP-' user }).publishmsg(格式msg(UserName，msg))；} } ///摘要///格式化发送的消息////summary////param Name=' Name '/param///param Name=' Msg '/param///返回/返回私有动态格式Msg(字符串名称，字符串msg) {返回新的{ Name=name，Msg=HttpUtility .时间=日期时间.现在。ToString(' yyyy-MM-DD hh :MM 3360s ')}；} }js代码

脚本类型=' text/JavaScript ' $(function(){//链接hub var ticker=$。连接。GroupChathub$ .连接。集线器。start()；//接收服务端发送的消息$.extend(ticker.client，{ //接收聊天消息publilshmsg :函数（数据){ $('#msg ').追加(' lispan class='p ')数据。名称：/span数据Msg ' span class='time '数据时间'/span/li') $('#msg ').父代(“div”)[0].scrollTop=$('#msg ').父代(“div”)[0].scrollHeight}，//接收在线人员，然后加入选择，以供单独聊天选中publshUser:函数（数据){ $('#count ').文本（数据。长度);$(“# user”).empty()；$(“# user”).追加('选项值='0 '所有人/option ')；for(var I=0；一。数据。长度；I){ $(' # user ').追加('选项值=' '数据[i]' ' '数据[我]'/选项')} });//发送消息按钮$('#btn-send ').单击(function () { var msg=$('#txt-msg ').val()；if(！消息){警报('请输入内容!');返回false} $('#txt-msg ').val(" ")；//主动发送消息，传入发送给谁，和发送的内容。跑马灯。服务器。发送消息($("#用户").val()，msg)；});});/scripthtml代码

氘群聊系统(span id='count'1/span人在线):@ViewBag.UserName/h2div风格=' overflow : auto height :300 px ' ul id=' msg '/ul/div select id=' users ' class=' form-control ' style=' max-width :150 px；'选项值='0 '所有人/option/selection put type=' text ' onkeydown=' if(event。键码==13){ $(' # BTN-发送').click()} ' class=' form-control ' id=' txt-msg ' placeholder='内容style='最大宽度：400 px/br/button type=' button ' id=' BTN-发送'发送/按钮这样就消息了群聊和发送给特定的人聊天功能。

3.1、封装主动发送消息的单例

///摘要///主动发送给用户消息，单例模式////摘要公共类群聊{ ///摘要////客户端，用来主动发送消息////摘要私有IHubConnectionContextdynamic Clients { get；设置；}私有只读静态GroupChat _ instance=new GroupChat(全局主机.ConnectionManager。GetHubContextGroupChathub().客户);私人群组聊天(IHubConnectionContextdynamic客户端){ Clients=Clients}公共静态群聊实例{ get { return _ instance} } ///摘要///主动给所有人发送消息，系统直接调用////summary///param name=' msg '/param public void SendSystemMsg(字符串消息){客户.All.publshMsg(新{名称='系统消息，消息=消息，时间=日期时间现在。ToString(' yyyy-MM-DD hh :MM 3360s ')})；} }如果需要发送消息，直接调用SendSystemMsg即可。

群聊。实例。发送系统消息('消息');

4、结语

啥也不说了直接源码

github:https://github.com/Emrys5/SignalRGroupChatDemo

在线演示：http://chat.lining.name/

最后望对各位有所帮助，本文原创，欢迎拍砖和推荐。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。