.Net WebSocket学习之旅（二）Signalr

上一篇使用了原生的WebSocket实现了实时通讯，今天我记录下前两天使用SignalR实现实时通讯

第一步 安装SignalR

SignalR是微软提供的库，最新的VS中，使用Nuget就可以很方便的下载，下载后注意Script文件夹，会生成关于SignalR的Js

第二步 配置服务器

1.右击MVC项目（应用程序层，不是类库），新建SignalR集线器类文件，VS2015是这样添加，VS2017搜索不到（吐槽，VS改动太多）

2.在项目根目录Startup文件里，添加代码

如果找不到，右击添加下

第三步 编辑SignalR文件

SignalR文件如下：

    
[HubName("chat")] //chat此处是定义代理名称，前端Js需要通过这个建立连接

  public class ChatHub : Hub
    {
        //用户连接池，连接实时通讯的用户将加入进来，离开页面会移除，可以根绝业务扩展
       public static List<string> OnLineUsers = new List<string>();

        public override Task OnConnected()
        {
            //客户端建立成功连接时触发
           string connectId = Context.ConnectionId;
            OnLineUsers.Add(connectId);

            return base.OnConnected();
        }

        public override Task OnDisconnected(bool stopCalled)
        {
            //用户离开页面、js关闭websocket时触发
           string connectId = Context.ConnectionId;
            OnLineUsers.Remove(connectId);

            return base.OnDisconnected(stopCalled);
        }


        [HubMethodName("send")]
        public void Send(string message)
        {
            //Send是服务器端接受客户端消息的函数方法

            //调用客户端函数发送消息、根据需要可以针对个人、全体在线客户端推送消息
            Clients.All.rcvMsg(message);

        }

        //用户在其他业务里向客户端推送消息，直接调用Send发送消息是不行的
        public void SendInfo2Client(string type, int policyId)
        {
            try
            {
                var hub = GlobalHost.ConnectionManager.GetHubContext<ChatHub>();
                hub.Clients.All.rcvMsg(type, policyId);
            }
            catch
            { }

        }
    }

 

第四步 配置页面

我使用的是Signal+自动代理模式

在Html中引入相关Js

 <script src="~/Scripts/jquery-1.10.2.js"></script>
 <script src="~/Scripts/jquery.signalR-2.2.2.min.js"></script>
 <script src="~/signalr/hubs" type="text/javascript"></script>//改文件自动生成，文件是自动代理模式生成的

建立代理连接对象

 <script type="text/javascript">
   
  $(document).ready(function () {

    var chat = $.connection.chat;
  
   $.connection.hub.start().done(function () {
            //成功建立连接后的函数、可以在这里加上自己的业务
           }).fail(function(){
   });

   chat.client.rcvMsg = function (param1,param2) {
   
   //作用：客户端接受服务端信息，响应处理消息的地方

   //rcvMsg是自定义方法名称，服务器给客户端发送消息，是依据方法名称和参数的

}

  chat.send= function (param1,param2) {

   //该方法会写在按钮的事件里，此处我单独拿出便于理解
   //作用：客户端发送消息到服务端

   //send是服务器端函数名称，在这里要注意驼峰写法，首字母得小写，要不然可能（我记得会出出现）会异常

}
 })
</script>

开始调试吧
注：MVC不熟悉的，不要使用模板，Signal的Js是JQuery-Signalr，页面根本没找到，会报错