下载 > 资源分类 >  开发技术 >  C# > SignalR 2.0 and MVC 5即时通讯完整版示例

SignalR 2.0 and MVC 5即时通讯完整版示例

2017-12-04 上传大小:5.42MB

本教程将向您介绍使用ASP.NET SignalR 2和ASP.NET MVC 5进行实时Web应用程序开发。本教程使用与SignalR入门教程相同的聊天应用程序代码,但演示如何将其添加到MVC 5应用程序。
在这个主题中,您将学习以下SignalR开发任务:
将SignalR库添加到MVC 5应用程序。
创建集线器和OWIN启动类来将内容推送到客户端。
在网页中使用SignalR jQuery库
来发送消息并从集线器显示更新。
以下屏幕截图显示了在浏览器中运行的已完成的聊天应用程序。
聊天实例
部分:
设置项目
运行示例
检查代码
下一步
设置项目
先决条件:
Visual Studio 2013.如果您没有Visual Studio,请参阅ASP.NET下载以获取免费的Visual Studio 2013 Express开发工具。
本节介绍如何创建ASP.NET MVC 5应用程序,添加SignalR库以及创建聊天应用程序。
在Visual Studio中,创建一个面向.NET Framework 4.5的C#ASP.NET应用程序,将其命名为SignalRChat,然后单击确定。
创建网页
在New ASP.NET Project对话框中选择MVC,然后点击Change Authentication。
创建网页
在更改身份验证对话框中选择无身份验证,然后单击确定。
选择不验证
注意
如果您为您的应用程序选择不同的身份验证提供程序,Startup.cs则将为您创建一个班级; 您将不需要Startup.cs在下面的第10步中创建自己的课程。
在“ 新建ASP.NET项目”对话框中单击确定。
打开工具| 库包管理器| 程序包管理器控制台并运行以下命令。此步骤向项目添加了一组启用SignalR功能的脚本文件和程序集引用。
install-package Microsoft.AspNet.SignalR
在解决方案资源管理器中,展开脚本文件夹。请注意,SignalR的脚本库已添加到项目中。
脚本文件夹
在解决方案资源管理器中,右键单击该项目,选择添加| 新建文件夹,并添加一个名为Hubs的新文件夹。
用鼠标右键单击该Hubs文件夹,单击添加| 新建项目,选择Visual C#| Web | SignalR节点安装窗格中,从中心窗格中选择SignalR Hub Class(v2),并创建一个名为ChatHub.cs的新中心。您将使用此类作为将消息发送到所有客户端的SignalR服务器中心。
创建新的中心
用下面的代码替换ChatHub类中的代码。
C#

复制
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);
        }
    }
}
创建一个名为Startup.cs的新类。将文件的内容更改为以下内容。
C#

复制
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();
        }
    }
}
编辑HomeController在Controllers / HomeController.cs中找到的类,并将以下方法添加到类中。此方法返回您将在稍后的步骤中创建的聊天视图。
C#

复制
public ActionResult Chat()
{
    return View();
}
右键单击Views / Home文件夹,然后选择Add ... | 查看。
在添加视图对话框中,命名新视图聊天。
添加一个视图
用以下代码替换Chat.cshtml的内容。
重要
将SignalR和其他脚本库添加到Visual Studio项目中时,程序包管理器可能会安装比本主题中显示的版本更新的SignalR脚本文件版本。确保代码中的脚本引用与项目中安装的脚本库的版本相匹配。
CSHTML

复制
@{
    ViewBag.Title = "Chat";
}
<h2>Chat</h2>
<div class="container">
    &lt;input type="text" id="message" /&gt;
    &lt;input type="button" id="sendmessage" value="Send" /&gt;
    &lt;input type="hidden" id="displayname" /&gt;
    <ul id="discussion">
    </ul>
</div>
@section scripts {
    &lt;!--Script references. --&gt;
    &lt;!--The jQuery library is required and is referenced by default in _Layout.cshtml. --&gt;
    &lt;!--Reference the SignalR library. --&gt;
    [removed][removed]
    &lt;!--Reference the autogenerated SignalR hub script. --&gt;
    [removed][removed]
    &lt;!--SignalR script to update the chat page and send messages.--&gt; 
    [removed]
        $(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;
        }
    [removed]
}
保存所有的项目。
运行示例
按F5以调试模式运行项目。
在浏览器地址行中,将/ home / chat附加到项目默认页面的URL。“聊天”页面将加载到浏览器实例中,并提示输入用户名。
输入用户名
输入一个用户名。
复制浏览器地址栏中的URL,并使用它打开两个浏览器实例。在每个浏览器实例中,输入唯一的用户名。
在每个浏览器实例中,添加注释并单击发送。评论应显示在所有浏览器实例中。
注意
这个简单的聊天应用程序不会维护服务器上的讨论上下文。该集线器向所有当前用户广播评论。稍后加入聊天的用户将看到从加入时开始添加的消息。
以下屏幕截图显示了在浏览器中运行的聊天应用程序。
聊天浏览器
在解决方案资源管理器中,查看正在运行的应用程序的脚本文档节点 如果您使用Internet Explorer作为浏览器,则此节点在调试模式下可见。有一个名为hubs的脚本文件,SignalR库在运行时动态生成。这个文件管理jQuery脚本和服务器端代码之间的通信。如果您使用Internet Explorer以外的浏览器,则还可以通过直接浏览来访问动态集线器文件,例如http:// mywebsite / signalr / hubs。
检查代码
SignalR聊天应用程序演示了两个基本的SignalR开发任务:创建一个集线器作为服务器上的主要协调对象,并使用SignalR jQuery库来发送和接收消息。1
SignalR集线器

在代码示例中,ChatHub类从Microsoft.AspNet.SignalR.Hub类派生。从Hub类派生是构建SignalR应用程序的有效方法。您可以在Hub类上创建公共方法,然后通过从网页中的脚本调用这些方法来访问这些方法。
在聊天代码中,客户端调用ChatHub.Send方法发送一条新消息。集线器通过调用Clients.All.addNewMessageToPage将消息发送给所有客户端。
所述发送方法演示几个集线器概念:
在集线器上声明公用方法,以便客户端可以调用它们。
使用Microsoft.AspNet.SignalR.Hub.Clients属性访问连接到此集线器的所有客户端。
调用客户端上的函数(如addNewMessageToPage函数)来更新客户端。
C#

复制
public class ChatHub : Hub
{
    public void Send(string name, string message)
    {
        Clients.All.addNewMessageToPage(name, message);
    }
}
SignalR和jQuery

代码示例中的Chat.cshtml视图文件显示了如何使用SignalR jQuery库与SignalR集线器进行通信。代码中的基本任务是创建对集线器的自动生成代理的引用,声明服务器可以调用的将内容推送到客户端的功能,以及启动连接以将消息发送到集线器。
以下代码声明了对中心代理的引用。
JavaScript的

复制
var chat = $.connection.chatHub;
注意
在JavaScript中,对服务器类及其成员的引用是驼峰式的。代码示例在JavaScript中引用C#ChatHub类作为chatHub。如果你想ChatHub在传统的Pascal框架中引用jQuery中的类,就像在C#中一样,编辑ChatHub.cs类文件。添加一个using语句来引用Microsoft.AspNet.SignalR.Hubs命名空间。然后将该HubName属性添加到ChatHub该类中,例如[HubName("ChatHub")]。最后,更新你的jQuery引用的ChatHub类。
以下代码显示了如何在脚本中创建回调函数。服务器上的集线器类调用此函数将内容更新推送到每个客户端。对htmlEncode函数的可选调用显示了一种在将消息内容显示在页面中之前对其进行HTML编码的方法,以防止脚本注入。
HTML

复制
chat.client.addNewMessageToPage = function (name, message) {
    // Add the message to the page. 
    $('#discussion').append('<li><strong>' + htmlEncode(name) 
        + '</strong>: ' + htmlEncode(message) + '</li>');
};
以下代码显示如何打开与集线器的连接。代码启动连接,然后传递一个函数来处理“聊天”页面中“ 发送”按钮上的点击事件。
注意
这种方法可以确保在事件处理程序执行之前建立连接。
JavaScript的

复制
$.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();
    });
});
...展开收缩
综合评分:0(0位用户评分)
开通VIP C币充值 立即下载

评论共有0条

登录后才能评论

 

相关推荐

Signalr即时通讯Demo 立即下载
积分/C币:3
实现简单即时通讯聊天系统、spring boot + mvc + mybatis + netty-sokey.io.zip 立即下载
积分/C币:13
spring boot、mvc、mybatis、netty-sokey.io 实现简单即时通讯聊天系统 立即下载
积分/C币:5
spring boot、 mvc、 mybatis、 netty-sokey.io 实现简单即时通讯聊天系统 立即下载
积分/C币:5
ASP.NET MVC 5 框架揭秘 [完整版][附源码] 立即下载
积分/C币:2
ASP.NET MVC5框架揭秘.zip 奖金楠 完整版 立即下载
积分/C币:5
ASP.NET MVC 5 网站开发之美 PDF 完整版 下载地址 立即下载
积分/C币:5
庖丁解牛:纵向切入ASP.NET 3.5控件和组件开发技术完整版part5(包过示例源代码vs2008版) 立即下载
积分/C币:3
java版仿QQ即时通讯系统 立即下载
积分/C币:5
即时通讯系统IOS版本源码 立即下载
积分/C币:5
叮当旺业通企业即时通讯 iphone版 立即下载
积分/C币:0
多协议即时通讯工具pidgin官方2.5.1版for windows 立即下载
积分/C币:3
企业即时通讯软件 服务器部署版 立即下载
积分/C币:3
PHP and MYSQL Web Development.5th.Edition 源代码完整版 立即下载
积分/C币:3
.Net MVC5下SignalR简单web即时聊天小程度 立即下载
积分/C币:5
SignalR2.2.1 MVC5 跨域访问 echarts 地图 立即下载
积分/C币:3
SSM框架实现WebSocket即时通讯 立即下载
积分/C币:5
基于环信的eplice可用的安卓即时通讯项目 立即下载
积分/C币:3
Signal实现即时通讯 立即下载
积分/C币:5
LayUI LayIM Pro V3.7.1 WEB 即时通讯 立即下载
积分/C币:2

热门专辑

  • .net 专辑

    创建者:jiaguoxinzhi

  • C#

    创建者:zang141588761

  • WPF

    创建者:zang141588761

img
zhouxunyu

关注

等级:1积分 15

上传者其他资源上传者专辑

VIP会员动态

关闭
img

spring mvc+mybatis+mysql+maven+bootstrap 整合实现增删查改简单实例.zip

资源所需积分/C币 当前拥有积分 当前拥有C币
5 0 0
为了良好体验,不建议使用迅雷下载
确认下载
img

SignalR 2.0 and MVC 5即时通讯完整版示例

会员到期时间: 剩余下载个数: 剩余C币:593 剩余积分:0
为了良好体验,不建议使用迅雷下载
VIP下载
您今日下载次数已达上限(为了良好下载体验及使用,每位用户24小时之内最多可下载20个资源)

积分不足!

资源所需积分/C币 当前拥有积分
您可以选择
开通VIP
4000万
程序员的必选
600万
绿色安全资源
现在开通
立省522元
或者
购买C币兑换积分 C币抽奖
img

资源所需积分/C币 当前拥有积分 当前拥有C币
5 4 45
(仅够下载10个资源)
为了良好体验,不建议使用迅雷下载
确认下载
img

资源所需积分/C币 当前拥有积分 当前拥有C币
5 0 0
为了良好体验,不建议使用迅雷下载
C币充值 开通VIP
img

资源所需积分/C币 当前拥有积分 当前拥有C币
5 4 45
您的积分不足,将扣除 10 C币
为了良好体验,不建议使用迅雷下载
确认下载
下载

兑换成功

你当前的下载分为234开始下载资源
你还不是VIP会员
开通VIP会员权限,免积分下载
立即开通

你下载资源过于频繁,请输入验证码

您因违反CSDN下载频道规则而被锁定帐户,如有疑问,请联络:webmaster@csdn.net!

举报

若举报审核通过,可奖励5下载分

  • 举报人:
  • 被举报人:
  • 举报的资源分:
  • *类型:
  • *详细原因: