SignalR实现服务器与客户端的实时通讯

百度百科给它的定义 javascript

实现实时通讯。什么是实时通讯的Web呢?就是让客户端(Web页面)和服务器端能够互相通知消息及调用方法,固然这是实时操做的。 java

WebSockets是HTML5提供的新的API,能够在Web网页与服务器端间创建Socket链接,当WebSockets可用时(即浏览器支持Html5)SignalR使用WebSockets,当不支持时SignalR将使用其它技术来保证达到相同效果。 jquery

SignalR固然也提供了很是简单易用的高阶API,使服务器端能够单个或批量调用客户端上的JavaScript函数,而且很是 方便地进行链接管理,例如客户端链接到服务器端,或断开链接,客户端分组,以及客户端受权,使用SignalR都很是容易实现。 c#

它的做用 浏览器

SignalR将与客户端进行实时通讯带给了ASP.NET 。固然这样既好用,并且也有足够的扩展性。之前用户须要刷新页面或使用Ajax轮询才能实现的实时显示数据,如今只要使用SignalR,就能够简单实现了。最重要的是您无需从新创建项目,使用现有ASP .NET项目便可无缝使用SignalR。 服务器

它最强吸引个人地方 app

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

实例代码 函数

下面我将以一个很是简单的例子说一个signalR的威力,主要功能是,一个网页,有个登录,登录成功后,由服务器去通讯客户端,并回调客户端的方法,登出后,同时这样的流程,看一下核心代码: ui

一 首先引用相关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,如今运行你的程序,就能够实现客户端与服务器端实时通讯了,利用这些特性,咱们是否是能够实现不少事情呀,让消息推送更可靠吧!

相关文章
相关标签/搜索