zoukankan      html  css  js  c++  java
  • 在MVC中使用SignalR

    在MVC中使用SignalR

    接着上一篇:《ASP.NET SignalR系列》第四课 SignalR自托管(不用IIS)

     

    一、概述

     

    本教程主要阐释了如何在MVC下使用ASP.NET SignalR。

     

    • 添加SignalR库到MVC中。
    • 创建hub和OWIN startup 类来推送内容到客户端。
    • 在页面中使用SignalR jQuery 库发送消息和呈现从来得更新。

     

    下面屏幕截图展示了一个完成的聊天应用程序

     

    Chat instances

     

    二、创建项目

     

    1.用MVC5 .NET4.5 创建一个名为SignalRChat的项目

     

    Create web

     

    2.改变授权.

     

    Create web

     

     

    3.选择 No Authentication

     

    Select No Authentication

     

    注意: 如果你选择了一个不一样的授权方式有一个 Startup.cs 会自动为你创建; 在下面的步骤中,你就不必自己创建这个类了。

     

    4.打开 Tools | Library Package Manager | Package Manager Console

     

    install-package Microsoft.AspNet.SignalR

     

     

    5.解决方案中已经为你添加了需要的东西了

     

    Scripts folder

     

     

    6.在解决方案中给项目添加一个名为Hubs文件夹

     

     

    7.在 Hubs文件夹中添加SignalR节点下的类文件,         名为ChatHub.cs. 可以使用这个类作为服务端hub发送消息到所有的客户端。

     

    Create new hub

     

     

    8.类代码

     

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    using System;
    using System.Web;
    using Microsoft.AspNet.SignalR;
    namespace SignalRChat
    {
        public class ChatHub : Hub
        {
            public void Send(string name, string message)
            {
                // Call the addNewMessageToPage method to update clients.
                Clients.All.addNewMessageToPage(name, message);
            }
        }
    }

     

     

    7.创建Startup类

     

     

    复制代码
    using Owin;
    using Microsoft.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.在HomeController下添加一个action,名为Chat

     

    public ActionResult Chat()
    {
        return View();
    }

     

    9.添加对应试图

     

    复制代码
    @{
        ViewBag.Title = "Chat";
    }
    <h2>Chat</h2>
    <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>
    @section scripts {
        <!--Script references. -->
        <!--The jQuery library is required and is referenced by default in _Layout.cshtml. -->
        <!--Reference the SignalR library. -->
        <script src="~/Scripts/jquery.signalR-2.1.0.min.js"></script>
        <!--Reference the autogenerated SignalR hub script. -->
        <script src="~/signalr/hubs"></script>
        <!--SignalR script to update the chat page and send messages.--> 
        <script>
            $(function () {
                // Reference the auto-generated proxy for the hub.  
                var chat = $.connection.chatHub;
                // Create a function that the hub can call back to display messages.
                chat.client.addNewMessageToPage = function (name, message) {
                    // Add the message to the page. 
                    $('#discussion').append('<li><strong>' + htmlEncode(name) 
                        + '</strong>: ' + htmlEncode(message) + '</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();
                    });
                });
            });
            // This optional function html-encodes messages for display in the page.
            function htmlEncode(value) {
                var encodedValue = $('<div />').text(value).html();
                return encodedValue;
            }
        </script>
    }
    复制代码

     

    10.运行

     

    Enter user name

     

     

     

    Chat browsers

     

     

    11.代码下载:点击下载

  • 相关阅读:
    HDOJ 1846 Brave Game
    并查集模板
    HDU 2102 A计划
    POJ 1426 Find The Multiple
    POJ 3278 Catch That Cow
    POJ 1321 棋盘问题
    CF 999 C.Alphabetic Removals
    CF 999 B. Reversing Encryption
    string的基础用法
    51nod 1267 4个数和为0
  • 原文地址:https://www.cnblogs.com/Leo_wl/p/3858321.html
Copyright © 2011-2022 走看看