ASP.NET启用signalR入门教程[从这里开始阅读⭐]

关键词:

引言:

什么是SignalR?

SignalR是ASP.NET开发人员的一个新库,它使得向应用程序添加实时Web功能变得非常简单。能够让您的服务器端代码实时推送内容到连接的客户端。您可能已经听说过WebSockets,这是一种新的HTML5 API,支持浏览器和服务器之间的双向通信。Webscoket是现代协议标准,尽管现代标准高更好,但其广泛使用还需一定的时间。在服务器端,只有windows8以上或者win server的IIS8才支持websocket,因此使用signalR是一个明智的选择。

SignalR将在可用的时候使用WebSockets,否则SignalR将优雅地回退到其他技术和技术。因此代码总是一致的。SignalR还提供了一个非常简单的高级API,用于在ASP.NET应用程序中执行服务器到客户端RPC(在客户端的浏览器中调用服务器端.NET代码中的JavaScript函数),以及为连接管理添加有用的钩子,例如连接/断开事件,分组连接,授权。

你可以用ASP.NET SignalR做什么?

SignalR可以用来为ASP.NET应用程序添加任何类型的“实时”网页功能。虽然聊天经常被用作一个例子,但你可以做更多的事情。任何时候用户刷新一个网页来查看新的数据,或者页面实现Ajax长轮询来检索新的数据,都是使用SignalR的候选者。它还实现了需要来自服务器的高频率更新的全新类型的应用,例如,实时游戏。对于这个很好的例子看射击游戏

下面介绍如何在项目中使用signalR。

建立SignalR项目

  1. 在Visual Studio, 新建一个 ASP.NET Web Application.

    Create web

  2. 在ASP.NET Project window, 选择空项目即可

    Create empty web

  3. 在项目资源管理器,右键添加,选择SignalR Hub Class (v2).【集线器】,命名为 ChatHub.cs 添加到工程中. 这一步产生了 ChatHub 类 ,添加了一些列脚本文件和支持SignalR的组件。 

    注意:

    你可以打开Nuget控制台,输入install-package Microsoft.AspNet.SignalR命令安装SignalR,也可以在线搜索Nuget安装。


  4. 在解决方案资源管理器中,展开Scripts脚本节点。 jQuery和SignalR的脚本库在项目中可见。


  5. 使用以下代码替换新ChatHub类中的代码。

    using System;
    using System.Web;
    using Microsoft.AspNet.SignalR;
    namespace SignalRChat
    {
        public class ChatHub : Hub
        {
            public void Send(string name, string message)
            {
                // Call the broadcastMessage method to update clients.
                Clients.All.broadcastMessage(name, message);
            }
        }
    }


  6. 在解决方案资源管理器中,右键单击项目,然后单击添加OWIN Startup启动类。 命名新类启动,然后单击确定。


  7. 将新的启动类的内容更改为以下内容。


    using Microsoft.Owin;
    using Owin;
    [assembly: OwinStartup(typeof(SignalRChat.Startup))]
    namespace SignalRChat
    {
        public class Startup
        {
            public void Configuration(IAppBuilder app)
            {
                // Any connection or hub wire up and configuration should go here
                app.MapSignalR();
            }
        }
    }
  8. 在解决方案资源管理器中,右键单击项目,然后单击添加| HTML页面。 命名新页面index.html。 > [!注意]>您可能需要更改JQuery和SignalR库引用的版本号


  9. 在解决方案资源管理器中,右键单击刚刚创建的HTML页面,然后单击设为起始页。

  10. 使用以下代码替换HTML页面中的默认代码。
    <!DOCTYPE html>
    <html>
    <head>
        <title>SignalR Simple Chat</title>
        <style type="text/css">
            .container {
                background-color: #99CCFF;
                border: thick solid #808080;
                padding: 20px;
                margin: 20px;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <input type="text" id="message" />
            <input type="button" id="sendmessage" value="Send" />
            <input type="hidden" id="displayname" />
            <ul id="discussion">
            </ul>
        </div>
        <!--Script references. -->
        <!--Reference the jQuery library. -->
        <script src="Scripts/jquery-3.1.1.min.js" ></script>
        <!--Reference the SignalR library. -->
        <script src="Scripts/jquery.signalR-2.2.1.min.js"></script>
        <!--Reference the autogenerated SignalR hub script. -->
        <script src="signalr/hubs"></script>
        <!--Add script to update the page and send messages.--> 
        <script type="text/javascript">
            $(function () {
                // Declare a proxy to reference the hub. 
                var chat = $.connection.chatHub;
                // Create a function that the hub can call to broadcast messages.
                chat.client.broadcastMessage = function (name, message) {
                    // Html encode display name and message. 
                    var encodedName = $('<div />').text(name).html();
                    var encodedMsg = $('<div />').text(message).html();
                    // Add the message to the page. 
                    $('#discussion').append('<li><strong>' + encodedName
                        + '</strong>:&nbsp;&nbsp;' + encodedMsg + '</li>');
                };
                // Get the user name and store it to prepend to messages.
                $('#displayname').val(prompt('Enter your name:', ''));
                // Set initial focus to message input box.  
                $('#message').focus();
                // Start the connection.
                $.connection.hub.start().done(function () {
                    $('#sendmessage').click(function () {
                        // Call the Send method on the hub. 
                        chat.server.send($('#displayname').val(), $('#message').val());
                        // Clear text box and reset focus for next comment. 
                        $('#message').val('').focus();
                    });
                });
            });
        </script>
    </body>
    </html>
  11. 保存工程。本文来自微软官方说明文档,工程源码下载,百度网盘:https://pan.baidu.com/s/1c2tp0nY
作者:songshizhao 发表于:2017-11-01T08:46:02 访问量:912
评论 [发表评论]