MVC5使用SignalR进行双向通信 (1)

配置Signal

  1. 在NuGet中通过 install-package Microsoft.AspNet.SignalR 命令进行安装
  2. 在Scripts文件夹中会添加 jquery.signalR-2.2.0.js 和 jquery.signalR-2.2.0.min.js
  3. 在startup的configuration方法中加入app.MapSignalR();

    app.MapSignalR()是把Signal Hub 映射到 /signal

    1. using Owin;
    2. using Microsoft.Owin;
    3. [assembly: OwinStartup(typeof(SignalRChat.Startup))]
    4. namespace SignalRChat
    5. {
    6. public class Startup
    7. {
    8. public void Configuration(IAppBuilder app)
    9. {
    10. // Any connection or hub wire up and configuration should go here
    11. app.MapSignalR();
    12. }
    13. }
    14. }

后台代码

  1. 在Model文件夹中新建一个ChatHub继承自Hub,写一个send方法,用户接受客户端的请求

    1. public class ChatHub:Hub
    2. {
    3. /// <summary>
    4. /// 发送信息给所有用户
    5. /// </summary>
    6. /// <param name="message"></param>
    7. public void SendAll(string name,string message)
    8. {
    9. //发送给所有客户端
    10. Clients.All.sendAll(name,message);
    11. }
    12. }

前台代码

  1. 新建一个视图名为Chat.cshtml
  2. 加入如下代码
  1. @{
  2. ViewBag.Title = "Chat";
  3. }
  4. <h2>Chat</h2>
  5. <div class="container">
  6. <input type="text" id="message" />
  7. <input type="button" id="sendmessage" value="Send" />
  8. <input type="hidden" id="displayname" />
  9. <ul id="discussion">
  10. </ul>
  11. </div>
  12. //在Layout.cshtml 中定义了名为 scripts 的section
  13. @section scripts {
  14. <!--Script 引用. -->
  15. <!--jquery 在 _Layout.cshtml 中已经被引用. -->
  16. <!--引用 SignalR. -->
  17. <script src="~/Scripts/jquery.signalR-2.1.0.min.js"></script>
  18. <!--该script会自动生成,添加到引用中 -->
  19. <script src="~/signalr/hubs"></script>
  20. <!--SignalR 关键js语句块.-->
  21. <script>
  22. $(function () {
  23. // 引用hub委托
  24. var chat = $.connection.chatHub;
  25. // 添加一个方法供hub回调
  26. chat.client.sendAll = function (name,message) {
  27. // 处理返回的数据到页面
  28. $('#discussion').append('<li><strong>' + htmlEncode(name) + '</strong>: '+ message +'</li>');
  29. };
  30. // 弹出一个框存储姓名
  31. $('#displayname').val(prompt('输入你的名字:', ''));
  32. $('#message').focus();
  33. // 打开连接
  34. $.connection.hub.start().done(function () {
  35. $('#sendmessage').click(function () {
  36. // 按钮点击时发送给服务器信息,服务器进行转发.
  37. chat.server.send($('#displayname').val(), $('#message').val());
  38. // 清楚输入框并添加焦点
  39. $('#message').val('').focus();
  40. });
  41. });
  42. });
  43. // 编码化
  44. function htmlEncode(value) {
  45. var encodedValue = $('<div />').text(value).html();
  46. return encodedValue;
  47. }
  48. </script>
  49. }

对Signal 工作原理进行下分析:

1. 页面加载是弹出一个框输入姓名

2. 在页面加载的时候,先创建一个hub引用var chat = $.connection.chatHub

3. 通过 $.connection.hub.start()初始化连接

初始化连接后通过$.connection.hub.start().done()调用回调函数。

在这个回调函数中绑定了个点击事件当按钮点击时向ChatHub中的send方法发出请求,后台则会通过Clients.All.sendAll(name,message)向所有在线客户端发送信息客户端会调用在js中定义的sendAll方法,通过在sendAll方法进行数据处理实时的显示

Signal MVC

MVC5使用SignalR进行双向通信(1)的更多相关文章

  1. MVC5使用SignalR进行双向通信 (1)

    @a604572782 2015-08-10 09:01 字数 2133 阅读 1245 MVC5使用SignalR进行双向通信 (1) 配置SignalR 在NuGet中通过 install-pac ...

  2. 一步一步学习SignalR进行实时通信_1_简单介绍

    一步一步学习SignalR进行实时通信\_1_简单介绍 SignalR 一步一步学习SignalR进行实时通信_1_简单介绍 前言 SignalR介绍 支持的平台 相关说明 OWIN 结束语 参考文献 ...

  3. ASPNET_WEBAPI快速学习02

    这部分内容的学习,已经放了大半年时间了,果断补充上,尽早将过去遗留的老技术坑都补上.首先将介绍服务幂等性的概念和相关解决方案,这部分也将是本文的理解难点,由于WebAPI是一种Restful风格服务的 ...

  4. 如何使用Microsoft技术栈

    Microsoft技术栈最近有大量的变迁,这使得开发人员和领导者都想知道他们到底应该关注哪些技术.Microsoft自己并不想从官方层面上反对Silverlight这样的技术,相对而言他们更喜欢让这种 ...

  5. 【开源】OSharp框架解说系列(1):总体设计及系列导航

    系列文章导航 [开源]OSharp框架解说系列(1):总体设计 [开源]OSharp框架解说系列(2.1):EasyUI的后台界面搭建及极致重构 [开源]OSharp框架解说系列(2.2):EasyU ...

  6. 智能打印SDK-源码剖析

    开源地址:http://www.dnnode.com/ 软件下载地址:http://www.dnnode.com/在线展示:http://www.dnnode.com/help.html 前面的文章, ...

  7. SignalR系列教程:在MVC5中使用SignalR

    本章主要内容: 1:向MVC5添加SignaIr 2: 什么是集线器,如何创建集线器 3: 客户端通过jqery调用集线器 本文还是延续“SignaIR快速入门”中聊天室的例子进行讲解.首先我们通过V ...

  8. SignalR + MVC5 简单示例

    本文和前一篇文章很类似,只不过是把 SignalR 应用在了 MVC 中 新建项目,选择 MVC 模板 安装 SignalR Install-Package Microsoft.AspNet.Sign ...

  9. SignalR 2.x入门(二):SignalR在MVC5中的使用

    开发(代码下载) 新建一个ASP.NET Web项目,项目类型为MVC,将认证模式改为无身份认证.在程序包管理控制台输入如下语句,安装SignalR <span style="font ...

随机推荐

  1. 三、jdk工具之jstack(Java Stack Trace)

    目录 一.jdk工具之jps(JVM Process Status Tools)命令使用 二.jdk命令之javah命令(C Header and Stub File Generator) 三.jdk ...

  2. Struts2返回JSON对象的方法总结

    如果是作为客户端的HTTP+JSON接口工程,没有JSP等view视图的情况下,使用Jersery框架开发绝对是第一选择.而在基于Spring3 MVC的架构下,对HTTP+JSON的返回类型也有很好 ...

  3. redmine后台运行命令

    nohup ruby script/rails server webrick -e production & redmine 3 后台运行命令: nohup  bundle exec rail ...

  4. EF下CodeFirst、DBFirst与ModelFirst分析

    EF4.1有三种方式来进行数据操作及持久化.分别是Database-First,Model-First,Code-first:1.Database First是基于已存在的数据库,利用某些工具(如Vs ...

  5. C++学习47 文件的概念 文件流类与文件流对象 文件的打开与关闭

    迄今为止,我们讨论的输入输出是以系统指定的标准设备(输入设备为键盘,输出设备为显示器)为对象的.在实际应用中,常以磁盘文件作为对象.即从磁盘文件读取数据,将数据输出到磁盘文件.磁盘是计算机的外部存储器 ...

  6. [ActionScript 3.0] 根据xml属性查找相应xml节点,递归函数。

    import flash.net.URLLoader; import flash.net.URLRequest; import flash.events.Event; var xml:XML; var ...

  7. 零成本实现接口自动化测试 – Java+TestNG 测试Restful service

    接口自动化测试 – Java+TestNG 测试 Restful Web Service 关键词:基于Rest的Web服务,接口自动化测试,数据驱动测试,测试Restful Web Service, ...

  8. poj 2253 Frogger dijkstra算法实现

    点击打开链接 Frogger Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 21653   Accepted: 7042 D ...

  9. 动手学servlet(四) cookie和session

    Cookie   cookie是保存在客户端的一个“键值对”,用来存储用户的一些信息 cookie的应用: -在电子商务会话中标识用户 -对网站进行定制,比如你经常浏览哪些内容,就展示哪些页面给你 - ...

  10. OC基础(10)

    id类型 SEL类型 *:first-child { margin-top: 0 !important; } body > *:last-child { margin-bottom: 0 !im ...