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项目

在Visual Studio, 新建一个 ASP.NET Web Application.
在ASP.NET Project window, 选择空项目即可
在项目资源管理器，右键添加，选择SignalR Hub Class (v2).【集线器】，命名为 ChatHub.cs 添加到工程中. 这一步产生了 ChatHub 类，添加了一些列脚本文件和支持SignalR的组件。

注意：

你可以打开Nuget控制台，输入install-package Microsoft.AspNet.SignalR命令安装SignalR，也可以在线搜索Nuget安装。
在解决方案资源管理器中，展开Scripts脚本节点。 jQuery和SignalR的脚本库在项目中可见。

使用以下代码替换新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);
        }
    }
}

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

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

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();
        }
    }
}

在解决方案资源管理器中，右键单击项目，然后单击添加| HTML页面。命名新页面index.html。 > [！注意]>您可能需要更改JQuery和SignalR库引用的版本号

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

使用以下代码替换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>

保存工程。本文来自微软官方说明文档，工程源码下载，百度网盘：https://pan.baidu.com/s/1c2tp0nY

songshizhao

为此篇作品打分

发表评论

个人资料

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

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

评论