码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2019-07-10 11:02:29      阅读:142      评论:0      收藏:0      [点我收藏+]

标签:pts   数据处理   继承   focus   dal   isp   end   配置   click   

@a604572782 2015-08-10 09:01 字数 2133 阅读 1245

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


配置SignalR

  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方法进行数据处理实时的显示

SignalR MVC

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

标签:pts   数据处理   继承   focus   dal   isp   end   配置   click   

原文地址:https://www.cnblogs.com/owenzh/p/11161957.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!