Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
利用Signalr打造即時通訊 
高榮章2014-09-10 
1 
BLOG: 
http://trufflepenne.blogspot.tw/
在這之前 
談談SignalR 
Live demo 
升級到SignalR 2 
Performance Tuning 
擴充(Scaling out) 
Agenda 
2
[在這之前] 
即時通訊的寫法: 
Socket WCF 雙向(Duplex) 
3
Web的運作 
網頁基於Http的運作,發起者都是Client ,差別在於需不需要Postback 
一般Ajax 
Client Server 
要求 
回覆網頁 
處理 
要求 
回覆網頁 
要求 
回覆網頁 
處理 
處理 
Client...
如果要在Web上實作即時通訊:聊天室? 
Pulling是好方法? 
是很簡單 
但代價太高 
大部分時間是虛工 
5
Html 5的Web socket帶來一道曙光 
persistent connection 
two-way channel 
6 
小明Server 
Connect 
明天Tech day哪等? 
市政府捷運站 
好 
大雄 
Conne...
即時通訊仍有一些麻煩事 
持續連線要自行處理 
處理訂閱 
斷線偵測 
偵測狀態改變 
訊息要自行解析 
如果要進行網頁和Win form 互傳? 
不支援WebSocket怎麼辦 
7
[談談SignalR] 
用戶伺服器 
Client Hub 
Client 
Connection 
Message Group 
8
SignalR架構 
Hubs 
Persistent connections 
Transports 
Forever frame Long pooling Server-Event Websoket 
Internet Protocols ...
程式概念 
10
SignalR Push通訊類型 
• Html 5 
Websoket 
Server-Send Event 
• Comet 
Long pooling 
Forever frame 
11
Server-send Event 
12 
小明Server 
Connect 
Event 
Event 
Process 
Process 
Process 
Process 
Connection 
Event
Long Pulling 
13 
小明Server 
有新訊息? 
明天Tech day坐捷運去 
0900到 
大雄 
明天Tech day坐捷運去? 
0900到 
H 
T 
T 
P 
有新訊息? 
H 
T 
T 
P
Forever frame 
14 
小明Server 
GET/Forever 
<script> 
addMsg(1," 
明天Tech day坐捷運去 
:); 
</script> 
<script> 
addMsg(1," 
0900...
適用平台(1) 
Browser 
Windows Desktop 
15
適用平台(2) 
Windows Store App/Phone app 
16
SignalR 2 快速上手 
• 安裝.net 4.5 
• 新增一個空白asp.net專案 
• 套件管理器主控台 
install-package Microsoft.AspNet.SignalR 
Install-Package jso...
Hub(1) 
• Host 
• IIS:ASP.NET 
• Self: Windows Service with Owin 
• 新增項目, 選SignalR Hub類別(v2) 
using System; 
using System....
Hub(2) 
• 新增startup項目, 選OWIN 啟動類別 
using Microsoft.Owin; 
using Owin; 
[assembly: OwinStartup(typeof(SignalRChat.Startup))...
Client(1) 
• 新增一個Html 
20 
<!DOCTYPE html> 
<html> 
<head> 
<title>SignalR Simple Chat</title> 
<style type="text/css"> 
....
Client(2) 
21 
<!--Add script to update the page and send messages.--> 
<script type="text/javascript"> 
$(function () { 
...
[Live demo] 
22
[升級到SignalR 2](1) 
• 2.0持續使用OWIN 
• Target設為4.5 
• 套件管理器主控台 
移除1.1 
>Uninstall-Package Microsoft.AspNet.SignalR –RemoveDep...
升級到SignalR 2(2) 
• Global.ascx.cs移除RouteTable 
protected void Application_Start(object sender, EventArgs e) 
{ 
RouteTable...
升級到SignalR 2(3) 
• Startup.cs填入以下code 
using Microsoft.Owin; 
using Owin; 
[assembly: OwinStartup(typeof(SignalRChat.Start...
[Performance Tuning](1) 
https://github.com/SignalR/SignalR/wiki/Performance 
• IIS Configuration 
Max concurrent requests...
[Performance Tuning](2) 
• ASP.NET Configuration 
XmaxConCurrentRequestPerCPU: default 5000, 可以提到20000 
打開%windir%Microsof...
[Performance Tuning](3) 
• 減少訊息頻率 
• 減低訊息大小:使用JasonIgnore 
using Newtonsoft.Json; 
using System; 
public class ShapeModel ...
[Performance Tuning](4) 
• SignalR configuration setting 
DefaultMessageBufferSize :1000, 如果訊息過大, 可調降該值, ex:500 
public cl...
[Performance Tuning](5) 
• 測試SignalR負載工具-Cran 
https://github.com/SignalR/SignalR/tree/dev/src/Microsoft.AspNet.S 
ignalR....
[Performance Tuning](6) 
路徑:專案路經/packages/Microsoft.AspNet.SignalR.Utils.<version>/tools 
安裝> SignalR.exe ipc 
反安裝> Signal...
Fiddler 
32
擴充(Scaling out) 
• Sqlserver 
• Redius 
• Azure survice bus 
http://www.asp.net/signalr/overview/signalr-20/performance-an...
Signal R 2教學資源 
http://www.asp.net/signalr/overview/signalr-20 
34
35
Upcoming SlideShare
Loading in …5
×

利用Signalr打造即時通訊@Tech day geek

4,002 views

Published on

SignalR是基於ASP.NET所發展的一項即時通訊技術, 幫你整合了各種通訊協定, 只要用一種統一的方式就可在網頁/APP/Windows form 間進行即時通訊, 符合目前資料在雲端, 應用程式在個平台上跑的目標

Published in: Internet
  • Sex in your area is here: ❤❤❤ http://bit.ly/2Qu6Caa ❤❤❤
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Follow the link, new dating source: ♥♥♥ http://bit.ly/2Qu6Caa ♥♥♥
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Hey guys! Who wants to chat with me? More photos with me here 👉 http://www.bit.ly/katekoxx
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

利用Signalr打造即時通訊@Tech day geek

  1. 1. 利用Signalr打造即時通訊 高榮章2014-09-10 1 BLOG: http://trufflepenne.blogspot.tw/
  2. 2. 在這之前 談談SignalR Live demo 升級到SignalR 2 Performance Tuning 擴充(Scaling out) Agenda 2
  3. 3. [在這之前] 即時通訊的寫法: Socket WCF 雙向(Duplex) 3
  4. 4. Web的運作 網頁基於Http的運作,發起者都是Client ,差別在於需不需要Postback 一般Ajax Client Server 要求 回覆網頁 處理 要求 回覆網頁 要求 回覆網頁 處理 處理 Client Server 要求 回覆網頁 處理 要求 回覆網頁 要求 回覆網頁 處理 處理 4
  5. 5. 如果要在Web上實作即時通訊:聊天室? Pulling是好方法? 是很簡單 但代價太高 大部分時間是虛工 5
  6. 6. Html 5的Web socket帶來一道曙光 persistent connection two-way channel 6 小明Server Connect 明天Tech day哪等? 市政府捷運站 好 大雄 Connect 明天Tech day哪等? 市政府捷運站 好 Process Process Process Process Connection
  7. 7. 即時通訊仍有一些麻煩事 持續連線要自行處理 處理訂閱 斷線偵測 偵測狀態改變 訊息要自行解析 如果要進行網頁和Win form 互傳? 不支援WebSocket怎麼辦 7
  8. 8. [談談SignalR] 用戶伺服器 Client Hub Client Connection Message Group 8
  9. 9. SignalR架構 Hubs Persistent connections Transports Forever frame Long pooling Server-Event Websoket Internet Protocols 虛擬層級 9
  10. 10. 程式概念 10
  11. 11. SignalR Push通訊類型 • Html 5 Websoket Server-Send Event • Comet Long pooling Forever frame 11
  12. 12. Server-send Event 12 小明Server Connect Event Event Process Process Process Process Connection Event
  13. 13. Long Pulling 13 小明Server 有新訊息? 明天Tech day坐捷運去 0900到 大雄 明天Tech day坐捷運去? 0900到 H T T P 有新訊息? H T T P
  14. 14. Forever frame 14 小明Server GET/Forever <script> addMsg(1," 明天Tech day坐捷運去 :); </script> <script> addMsg(1," 0900到:); </script> 大雄 明天Tech day坐捷運去? 0900到 H T T P HTTP HTTP
  15. 15. 適用平台(1) Browser Windows Desktop 15
  16. 16. 適用平台(2) Windows Store App/Phone app 16
  17. 17. SignalR 2 快速上手 • 安裝.net 4.5 • 新增一個空白asp.net專案 • 套件管理器主控台 install-package Microsoft.AspNet.SignalR Install-Package json2 17
  18. 18. Hub(1) • Host • IIS:ASP.NET • Self: Windows Service with Owin • 新增項目, 選SignalR Hub類別(v2) using System; using System.Web; using Microsoft.AspNet.SignalR; namespace SignalRChat { public class ChatHub : Hub { public void Send(string name, string message) { // Call the broadcastMessage method to update clients. Clients.All.broadcastMessage(name, message); } } } 18
  19. 19. Hub(2) • 新增startup項目, 選OWIN 啟動類別 using Microsoft.Owin; using Owin; [assembly: OwinStartup(typeof(SignalRChat.Startup))] namespace SignalRChat { public class Startup { public void Configuration(IAppBuilder app) { app.MapSignalR(); } } } 19
  20. 20. Client(1) • 新增一個Html 20 <!DOCTYPE html> <html> <head> <title>SignalR Simple Chat</title> <style type="text/css"> .container { background-color: #99CCFF; border: thick solid #808080; padding: 20px; margin: 20px; } </style> </head> <body> <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> <!--Script references. --> <!--Reference the jQuery library. --> <script src="Scripts/jquery-1.6.4.min.js" ></script> <!--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>
  21. 21. Client(2) 21 <!--Add script to update the page and send messages.--> <script type="text/javascript"> $(function () { // Declare a proxy to reference the hub. var chat = $.connection.chatHub; // Create a function that the hub can call to broadcast messages. chat.client.broadcastMessage = function (name, message) { // Html encode display name and message. var encodedName = $('<div />').text(name).html(); var encodedMsg = $('<div />').text(message).html(); // Add the message to the page. $('#discussion').append('<li><strong>' + encodedName + '</strong>:&nbsp;&nbsp;' + encodedMsg + '</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(); }); }); }); </script> </body> </html>
  22. 22. [Live demo] 22
  23. 23. [升級到SignalR 2](1) • 2.0持續使用OWIN • Target設為4.5 • 套件管理器主控台 移除1.1 >Uninstall-Package Microsoft.AspNet.SignalR –RemoveDependencies 安裝2.0 >Install-Package Microsoft.AspNet.SignalR • Client js lib改為2.1 <!--Reference the SignalR library. --> <script src="Scripts/jquery.signalR-2.1.0.min.js"></script> 23
  24. 24. 升級到SignalR 2(2) • Global.ascx.cs移除RouteTable protected void Application_Start(object sender, EventArgs e) { RouteTable.Routes.MapHubs(); } • 新增Owin startup 24
  25. 25. 升級到SignalR 2(3) • Startup.cs填入以下code using Microsoft.Owin; using Owin; [assembly: OwinStartup(typeof(SignalRChat.Startup))] namespace SignalRChat { public class Startup { public void Configuration(IAppBuilder app) { app.MapSignalR(); } } } • Hub.cs 增加Using using Microsoft.AspNet.SignalR; 25
  26. 26. [Performance Tuning](1) https://github.com/SignalR/SignalR/wiki/Performance • IIS Configuration Max concurrent requests per applicationm: 預設5000提升到100,000 cd %windir%System32inetsrv appcmd.exe set config /section:system.webserver/serverRuntime /appConcurrentRequestLimit:100000 26
  27. 27. [Performance Tuning](2) • ASP.NET Configuration XmaxConCurrentRequestPerCPU: default 5000, 可以提到20000 打開%windir%Microsoft.NETFrameworkv4.0.30319aspnet.config (Framework64 for 64 bit processes) <?xml version="1.0" encoding="UTF-8" ?> <configuration> <runtime> <legacyUnhandledExceptionPolicy enabled="false" /> <legacyImpersonationPolicy enabled="true"/> <alwaysFlowImpersonationPolicy enabled="false"/> <SymbolReadingPolicy enabled="1" /> <shadowCopyVerifyByTimestamp enabled="true"/> </runtime> <startup useLegacyV2RuntimeActivationPolicy="true" /> <system.web> <applicationPool maxConcurrentRequestsPerCPU="20000" /> </system.web> </configuration> Request Qeue Limit: 可以提到250000 打開%windir%Microsoft.NETFrameworkv4.0.30319Configmachine.config <processModel autoConfig="false" requestQueueLimit="250000" /> 27
  28. 28. [Performance Tuning](3) • 減少訊息頻率 • 減低訊息大小:使用JasonIgnore using Newtonsoft.Json; using System; public class ShapeModel { [JsonProperty("l")] public double Left { get; set; } [JsonProperty("t")] public double Top { get; set; } // We don't want the client to get the "LastUpdatedBy" property [JsonIgnore] public string LastUpdatedBy { get; set; } } 28
  29. 29. [Performance Tuning](4) • SignalR configuration setting DefaultMessageBufferSize :1000, 如果訊息過大, 可調降該值, ex:500 public class Startup { public void Configuration(IAppBuilder app) { // Any connection or hub wire up and configuration should go here GlobalHost.Configuration.DefaultMessageBufferSize = 500; app.MapSignalR(); } } 29
  30. 30. [Performance Tuning](5) • 測試SignalR負載工具-Cran https://github.com/SignalR/SignalR/tree/dev/src/Microsoft.AspNet.S ignalR.Crank • SignalR performance counter 管理Nuget套件, 搜尋signalr.utils 30
  31. 31. [Performance Tuning](6) 路徑:專案路經/packages/Microsoft.AspNet.SignalR.Utils.<version>/tools 安裝> SignalR.exe ipc 反安裝> SignalR.exe upc Windows 計數器> perfmon 31
  32. 32. Fiddler 32
  33. 33. 擴充(Scaling out) • Sqlserver • Redius • Azure survice bus http://www.asp.net/signalr/overview/signalr-20/performance-and-scaling/scaleout-in-signalr 33
  34. 34. Signal R 2教學資源 http://www.asp.net/signalr/overview/signalr-20 34
  35. 35. 35

×