zoukankan      html  css  js  c++  java
  • SignalR实现服务器与客户端的实时通信

    百度百科给它的定义

    实现实时通信。什么是实时通信的Web呢?就是让客户端(Web页面)和服务器端可以互相通知消息及调用方法,当然这是实时操作的。

    WebSockets是HTML5提供的新的API,可以在Web网页与服务器端间建立Socket连接,当WebSockets可用时(即浏览器支持Html5)SignalR使用WebSockets,当不支持时SignalR将使用其它技术来保证达到相同效果
    SignalR当然也提供了非常简单易用的高阶API,使服务器端可以单个或批量调用客户端上的JavaScript函数,并且非常 方便地进行连接管理,例如客户端连接到服务器端,或断开连接,客户端分组,以及客户端授权,使用SignalR都非常容易实现。

    它的作用

    SignalR 将与客户端进行实时通信带给了ASP .NET 。当然这样既好用,而且也有足够的扩展性。以前用户需要刷新页面或使用Ajax轮询才能实现的实时显示数据,现在只要使用SignalR,就可以简单实现了。最重要的是您无需重新建立项目,使用现有ASP .NET项目即可无缝使用SignalR。

    它最强吸引我的地方

    应该说,首次听到signalR给我最大的振奋就是它与服务器的实时通信,要知道,以往的十几年里,客户端要想实时与服务器通信,那只有通过长轮询,当AJAX出现之后,这种长轮旬变得漂亮一些,但也终规是轮询,即服务器永远是被动的,客户端你真的很累,呵呵!

    实例代码

    下面我将以一个非常简单的例子说一个signalR的威力,主要功能是,一个网页,有个登陆,登陆成功后,由服务器去通信客户端,并回调客户端的方法,登出后,同时这样的流程,看一下核心代码:
    一 首先引用相关DLL
    Startup文件为SignalR的入口
    using Microsoft.Owin;
    using Owin;
    
    [assembly: OwinStartup(typeof(SignalR.Core.Startup))]
    namespace SignalR.Core
    {
    
        public class Startup
        {
            public void Configuration(IAppBuilder app)
            {
                app.MapSignalR();
            }
    
        }
    }

    三 一组SignalR的JS文件

    四 实现具体业务的核心类文件,它需要集成Hub,需要使用特性HubName为SignalR起个名字,以便在客户端去调用它

    using Microsoft.AspNet.SignalR;
    using Microsoft.AspNet.SignalR.Hubs;
    using SignalR.Core.Model;
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Text;
    using System.Threading.Tasks;
    using System.Web;
    
    namespace SignalR.Core
    {
    
        [HubName("UrlHub")]
        public class UrlValid : Hub
        {
            static List<CurrentUser> ConnectedUsers = new List<CurrentUser>();
            public void Connect(string url,string userID)
            {
                var id = Context.ConnectionId;
    if (ConnectedUsers.Count(x => x.ConnectionId == id) == 0)
                {
                    ConnectedUsers.Add(new CurrentUser
                    {
                        ConnectionId = id,
                        UserID = userID,
                    });
                    Clients.Caller.onConnected(id, userID, url);
                    //Clients.AllExcept(id).onNewUserConnected(id, userID);
    
                    Clients.Client(id).onNewUserConnected(id, userID);
                }
                else
                {
    
                    Clients.Caller.onConnected(id, userID, url);
                    Clients.Client(id).onExistUserConnected(id, userID);
                    // Clients.AllExcept(id).onExistUserConnected(id, userID);
                }
            }
    
            /// <summary>
            /// 登出
            /// </summary>
            public void Exit(string userID)
            {
                var id = Context.ConnectionId;
       
                OnDisconnected();
                Clients.Caller.onConnected(id, userID, "");
                Clients.Client(id).onExit(id, userID);
            }
    
            /// <summary>
            /// 断开
            /// </summary>
            /// <returns></returns>
            public override System.Threading.Tasks.Task OnDisconnected()
            {
                var item = ConnectedUsers.FirstOrDefault(x => x.ConnectionId == Context.ConnectionId);
                if (item != null)
                {
                    ConnectedUsers.Remove(item);
    
                    var id = Context.ConnectionId;
                    Clients.All.onUserDisconnected(id, item.UserID);
    
                }
                return base.OnDisconnected();
            }
    
        }
    }

    五 核心JS功能代码片断

        <!--Reference the jQuery library. -->
        <script src="/Scripts/jquery-1.8.2.min.js"></script>
    
        <!--Reference the SignalR library. -->
        <script src="/Scripts/jquery.signalR-1.0.0.js"></script>
        <!--Reference the autogenerated SignalR hub script. -->
        <script src="/signalr/hubs"></script>
    
        <script type="text/javascript">
            $(function () {
                // Declare a proxy to reference the hub
                var chatHub = $.connection.UrlHub;
                registerClientMethods(chatHub);
                // Start Hub
                $.connection.hub.start().done(function () {
                    registerEvents(chatHub);
                });
    
            });
    
            //注册客户端事件
            function registerEvents(chatHub) {
                $("#btn").click(function () {
                    var url = "dasfjasldfj";
                    chatHub.server.connect(url);
                });
    
                $("#logOut").click(function () {
                    chatHub.server.exit();
                });
    
            }
    
            //注册客户端方法
            function registerClientMethods(chatHub) {
    
                chatHub.client.onConnected = function (id, userID, url) {
                    console.log("与服务器建立了链接" + url);
                }
    
                chatHub.client.onUserDisconnected = function (id, userID) {
                    console.log("与服务器取消了链接");
                }
    
                chatHub.client.onNewUserConnected = function (id, userID) {
                    alert("新用户完成为合法");
                }
    
                chatHub.client.onExistUserConnected = function (id, userID) {
                    alert("用户" + userID + "不能重复登陆");
                }
    
                chatHub.client.onExit = function (id, userID) {
    
                    alert("用户" + userID + "成功退出!");
                }
    
            }
    
        </script>

    OK,现在运行你的程序,就可以实现客户端与服务器端实时通信了,利用这些特性,我们是不是可以实现很多事情呀,让消息推送更可靠吧!

     
  • 相关阅读:
    Hadoop2.x环境搭建
    HDFS序列化
    Hadoop2.x介绍
    eclipse(1)----ubuntu下的安装与配置
    hive与hbase
    mysql----启动报错
    序列化+protobuff+redis
    爬虫学习笔记(2)--创建scrapy项目&&css选择器
    日常随笔
    spark学习(2)--hadoop安装、配置
  • 原文地址:https://www.cnblogs.com/lori/p/3442341.html
Copyright © 2011-2022 走看看