SignalR 2.x入門（二）：SignalR在MVC5中的使用 - valu－IT工程師數位筆記本

文章出處

開發（代碼下載）
新建一個ASP.NET Web項目，項目類型為MVC，將認證模式改為無身份認證。在程序包管理控制臺輸入如下語句，安裝SignalR
[csharp] view plain copy
1. <span style="font-size:14px;">install-package Microsoft.AspNet.SignalR</span>
為了便于管理，在項目中添加一個名為Hubs的文件夾，在文件夾上右鍵單擊，選擇Visual C# >> Web >> SignalR >>SignalR 集線器類 ( V2 )，命名為ChatHub，這個類將是我們所有客戶端調用的Hub服務，修改代碼，代碼如下：
[csharp] view plain copy
1. using System;
2. using System.Collections.Generic;
3. using System.Linq;
4. using System.Web;
5. using Microsoft.AspNet.SignalR;
7. namespace SignalRChat_Part2.Hubs
8. {
9. public class ChatHub : Hub
10. {
11. public void Send(string name, string message)
12. {
13. //調用所有客戶端的addNewMessageToPage function
14. Clients.All.addNewMessageToPage(name, message);
15. }
16. }
17. }
接著，創建OWIN Startup 類，修改代碼，代碼如下：
[csharp] view plain copy
1. using System;
2. using System.Threading.Tasks;
3. using Microsoft.Owin;
4. using Owin;
6. [assembly: OwinStartup(typeof(SignalRChat_Part2.Startup))]
8. namespace SignalRChat_Part2
9. {
10. public class Startup
11. {
12. public void Configuration(IAppBuilder app)
13. {
14. // 有關如何配置應用程序的詳細信息，請訪問 http://go.microsoft.com/fwlink/?LinkID=316888
15. app.MapSignalR();
16. }
17. }
18. }
然后，在HomeController中新增一個Action，命名為Chat，代碼如下：
[csharp] view plain copy
1. public ActionResult Chat()
2. {
3. return View();
4. }
最后，創建Chat 視圖，修改試圖代碼，代碼如下：
[html] view plain copy
1. @{
2. ViewBag.Title = "Chat";
3. }
5. <h2>Chat</h2>
6. <div class="container">
7. <input type="text" id="message" />
8. <input type="button" id="sendmessage" value="Send" />
9. <input type="hidden" id="displayname" />
10. <ul id="discussion">
11. </ul>
12. </div>
13. @section scripts {
14. 
15. <script src="~/Scripts/jquery.signalR-2.2.1.min.js"></script>
16. 
17. <script src="~/signalr/hubs"></script>
18. <script>
19. $(function () {
20. //聲明hub代理
21. var chat = $.connection.chatHub;
22. //創建后端要調用的前端function
23. chat.client.addNewMessageToPage = function (name, message) {
24. //將信息添加到頁面上
25. $('#discussion').append('<li><strong>' + htmlEncode(name) + '</strong>:' + htmlEncode(message) + '</li>');
26. };
27. //獲取輸入的名稱
28. $('#displayname').val(prompt('Enter your name:', ''));
29. //將焦點定位在信息輸入框中
30. $('#message').focus();
31. //開啟鏈接
32. $.connection.hub.start().done(function () {
33. $('#sendmessage').click(function () {
34. //調用后臺hub的Send方法
35. chat.server.send($('#displayname').val(), $('#message').val());
36. //清除發送的內容，并將焦點定位到信息框
37. $('#message').val('').focus();
38. });
39. });
40. //該function防止JS注入
41. function htmlEncode(value) {
42. var encodeValue = $('<div/>').text(value).html();
43. return encodeValue;
44. }
45. });
46. </script>
47. }
運行，效果如圖：
需注意的

JS在調用Hub時，Hub的首字母小寫，不管后端代碼是大寫還是小寫，JS調用時首字母均小寫，除非后臺Hub類上已經定義了HubName 屬性（如：[HubName("ChatHub")]），這種情況下，JS調用Hub時，根據HubName屬性定義的名稱走。