Asp.Net Mvc5 结合 SignalR2.0+ 实现消息交互简单例子

Nuget添加 SignalR包

1、构建一个MyHubServer服务端类

定义类的特性标签为

 [HubName("chatHub")]
    public class MyHubServer : Hub
    {
    ｝

必须继承Hub基类，基类中提供了如下操作

 public abstract class HubBase : IHub, IUntrackedDisposable, IDisposable
    {
        protected HubBase();

        public HubCallerContext Context { get; set; }
        public IGroupManager Groups { get; set; }

        public void Dispose();
        public virtual Task OnConnected();
        public virtual Task OnDisconnected(bool stopCalled);
        public virtual Task OnReconnected();
        protected virtual void Dispose(bool disposing);
    }

Context ：上下问对象
Groups ： 分组
以及下面的三个虚方法，必要是可以重写
OnConnected 建立连接、OnDisconnected 断开连接、OnReconnected 从新连接


构建客Js户端 ，安装了Nuget包后会看到如下js文件，将应用页面添加js引用，基于Jquery的

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

Notes:第二个Js是Signalr生成的js文件路径，项目目录中不会存在

 <script>

       $(function () {
           //服务器端对应的集线器
           var hub = $.connection.chatHub;


           ////客户端接收消息 上线通知
           hub.client.addTips = function (msg) {
                 $('#discussion').html('<span><strong></strong> ' + htmlEncode(msg) + '</span>');
           };
           //启动连接成功
           $.connection.hub.start().done(function () {
               $('#sendmessage').click(function () {
                   hub.server.sendmsg($('#contact').val(), $('#sendid').val(), $('#sendname').val());
                   
                   $('#contact').val('').focus();
                 
               });
           });
       });

       function htmlEncode(value) {
           var encodedValue = $('<div />').text(value).html();
           return encodedValue;
       }
    </script>

需要注意的是这个

这里连接的chartHub就是服务端的 HubName属性标签配置的名称

以如下客户排单为例子：

当没有客户对接人员上线发送会提示

我们打开2个浏览器分别登上不同的账号

当客户对接人员使用功能时候提示

使用另一个账号发送消息，客户对接人员会实时接受消息，同时将这些消息保留数据库记录

接下来看下服务端的具体代码

 public void sendmsg(string contact, string sendid, string sendname)
        {
        Clients.Client(Context.ConnectionId).addTips("客户接待人员还没有上线");
       ｝

服务端发送方法，这里与客户端Js调用服务端方法是对应的

服务端中的 Clients对象包含了3个类别

All:向所有的客户端发送消息

Group：向分组包含的客户端发送消息

Client：向某一个指定客户端发送消息

基本就是对这些进行操作，包括群聊的处理都是通过以上三个方式来实现在线聊天功能

Asp.Net Mvc5 结合 SignalR2.0+ 实现消息交互简单例子

Nuget添加 SignalR包

猜你喜欢