利用signalr打造即時通訊@tech day geek
DESCRIPTION
SignalR是基於ASP.NET所發展的一項即時通訊技術, 幫你整合了各種通訊協定, 只要用一種統一的方式就可在網頁/APP/Windows form 間進行即時通訊, 符合目前資料在雲端, 應用程式在個平台上跑的目標TRANSCRIPT
![Page 1: 利用Signalr打造即時通訊@Tech day geek](https://reader037.vdocuments.site/reader037/viewer/2022100300/559441ed1a28ab01308b4588/html5/thumbnails/1.jpg)
高榮章 2014-09-10
利用Signalr打造即時通訊
1
http://trufflepenne.blogspot.tw/
BLOG:
![Page 2: 利用Signalr打造即時通訊@Tech day geek](https://reader037.vdocuments.site/reader037/viewer/2022100300/559441ed1a28ab01308b4588/html5/thumbnails/2.jpg)
在這之前
談談SignalR
Live demo
升級到SignalR 2
Performance Tuning
擴充(Scaling out)
Agenda
2
![Page 3: 利用Signalr打造即時通訊@Tech day geek](https://reader037.vdocuments.site/reader037/viewer/2022100300/559441ed1a28ab01308b4588/html5/thumbnails/3.jpg)
[在這之前]
Socket WCF 雙向(Duplex)
即時通訊的寫法:
3
![Page 4: 利用Signalr打造即時通訊@Tech day geek](https://reader037.vdocuments.site/reader037/viewer/2022100300/559441ed1a28ab01308b4588/html5/thumbnails/4.jpg)
Web的運作
網頁基於Http的運作,發起者都是Client,差別在於需不需要Postback
一般 Ajax
Client Server
要求
回覆網頁
處理
要求
回覆網頁
要求
回覆網頁
處理
處理
Client Server
要求
回覆網頁
處理
要求
回覆網頁
要求
回覆網頁
處理
處理
4
![Page 5: 利用Signalr打造即時通訊@Tech day geek](https://reader037.vdocuments.site/reader037/viewer/2022100300/559441ed1a28ab01308b4588/html5/thumbnails/5.jpg)
如果要在Web上實作即時通訊:聊天室?
Pulling是好方法?
是很簡單
但代價太高
大部分時間是虛工
5
![Page 6: 利用Signalr打造即時通訊@Tech day geek](https://reader037.vdocuments.site/reader037/viewer/2022100300/559441ed1a28ab01308b4588/html5/thumbnails/6.jpg)
Html 5的Web socket帶來一道曙光
persistent connection
two-way channel
6
小明 Server
Connect
明天Tech day哪等?
市政府捷運站
好
大雄
明天Tech day哪等?
Connect
市政府捷運站
好
Process
Process
Process
Process
Connection
![Page 7: 利用Signalr打造即時通訊@Tech day geek](https://reader037.vdocuments.site/reader037/viewer/2022100300/559441ed1a28ab01308b4588/html5/thumbnails/7.jpg)
即時通訊仍有一些麻煩事
持續連線要自行處理
處理訂閱
斷線偵測
偵測狀態改變
訊息要自行解析
如果要進行網頁和Win form 互傳?
不支援WebSocket怎麼辦
7
![Page 8: 利用Signalr打造即時通訊@Tech day geek](https://reader037.vdocuments.site/reader037/viewer/2022100300/559441ed1a28ab01308b4588/html5/thumbnails/8.jpg)
[談談SignalR]
Client Hub
用戶 伺服器
Client
Connection
GroupMessage
8
![Page 9: 利用Signalr打造即時通訊@Tech day geek](https://reader037.vdocuments.site/reader037/viewer/2022100300/559441ed1a28ab01308b4588/html5/thumbnails/9.jpg)
SignalR架構
Hubs
Persistent connections
Transports
Internet Protocols
Forever frame Long pooling Server-Event Websoket
虛擬層級
9
![Page 10: 利用Signalr打造即時通訊@Tech day geek](https://reader037.vdocuments.site/reader037/viewer/2022100300/559441ed1a28ab01308b4588/html5/thumbnails/10.jpg)
程式概念
10
![Page 11: 利用Signalr打造即時通訊@Tech day geek](https://reader037.vdocuments.site/reader037/viewer/2022100300/559441ed1a28ab01308b4588/html5/thumbnails/11.jpg)
SignalR Push通訊類型
• Html 5Websoket
Server-Send Event
• CometLong poolingForever frame
11
![Page 12: 利用Signalr打造即時通訊@Tech day geek](https://reader037.vdocuments.site/reader037/viewer/2022100300/559441ed1a28ab01308b4588/html5/thumbnails/12.jpg)
Server-send Event
12
小明 Server
Connect
Event
Event
Process
Process
Process
Process
Connection
Event
![Page 13: 利用Signalr打造即時通訊@Tech day geek](https://reader037.vdocuments.site/reader037/viewer/2022100300/559441ed1a28ab01308b4588/html5/thumbnails/13.jpg)
Long Pulling
13
小明 Server
有新訊息?
明天Tech day坐捷運去
0900到
大雄
明天Tech day坐捷運去?
0900到
HTTP
有新訊息?
HTTP
![Page 14: 利用Signalr打造即時通訊@Tech day geek](https://reader037.vdocuments.site/reader037/viewer/2022100300/559441ed1a28ab01308b4588/html5/thumbnails/14.jpg)
Forever frame
14
小明 Server
GET/Forever
<script>addMsg(1,"
明天Tech day坐捷運去:);</script>
<script>addMsg(1,"
0900到:);</script>
大雄
明天Tech day坐捷運去?
0900到
HTTP
HTTP
HTTP
![Page 15: 利用Signalr打造即時通訊@Tech day geek](https://reader037.vdocuments.site/reader037/viewer/2022100300/559441ed1a28ab01308b4588/html5/thumbnails/15.jpg)
適用平台(1)
Browser
Windows Desktop
15
![Page 16: 利用Signalr打造即時通訊@Tech day geek](https://reader037.vdocuments.site/reader037/viewer/2022100300/559441ed1a28ab01308b4588/html5/thumbnails/16.jpg)
適用平台(2)
Windows Store App/Phone app
16
![Page 17: 利用Signalr打造即時通訊@Tech day geek](https://reader037.vdocuments.site/reader037/viewer/2022100300/559441ed1a28ab01308b4588/html5/thumbnails/17.jpg)
SignalR 2 快速上手
• 安裝.net 4.5
• 新增一個空白asp.net專案
• 套件管理器主控台install-package Microsoft.AspNet.SignalRInstall-Package json2 17
![Page 18: 利用Signalr打造即時通訊@Tech day geek](https://reader037.vdocuments.site/reader037/viewer/2022100300/559441ed1a28ab01308b4588/html5/thumbnails/18.jpg)
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
![Page 19: 利用Signalr打造即時通訊@Tech day geek](https://reader037.vdocuments.site/reader037/viewer/2022100300/559441ed1a28ab01308b4588/html5/thumbnails/19.jpg)
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
![Page 20: 利用Signalr打造即時通訊@Tech day geek](https://reader037.vdocuments.site/reader037/viewer/2022100300/559441ed1a28ab01308b4588/html5/thumbnails/20.jpg)
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>
![Page 21: 利用Signalr打造即時通訊@Tech day geek](https://reader037.vdocuments.site/reader037/viewer/2022100300/559441ed1a28ab01308b4588/html5/thumbnails/21.jpg)
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>: ' + 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>
![Page 22: 利用Signalr打造即時通訊@Tech day geek](https://reader037.vdocuments.site/reader037/viewer/2022100300/559441ed1a28ab01308b4588/html5/thumbnails/22.jpg)
[Live demo]
22
![Page 23: 利用Signalr打造即時通訊@Tech day geek](https://reader037.vdocuments.site/reader037/viewer/2022100300/559441ed1a28ab01308b4588/html5/thumbnails/23.jpg)
[升級到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
![Page 24: 利用Signalr打造即時通訊@Tech day geek](https://reader037.vdocuments.site/reader037/viewer/2022100300/559441ed1a28ab01308b4588/html5/thumbnails/24.jpg)
升級到SignalR 2(2)
• Global.ascx.cs移除RouteTable
• 新增Owin startup
protected void Application_Start(object sender, EventArgs e){RouteTable.Routes.MapHubs();}
24
![Page 25: 利用Signalr打造即時通訊@Tech day geek](https://reader037.vdocuments.site/reader037/viewer/2022100300/559441ed1a28ab01308b4588/html5/thumbnails/25.jpg)
升級到SignalR 2(3)
• Startup.cs填入以下code
• Hub.cs增加Usingusing Microsoft.AspNet.SignalR;
using Microsoft.Owin;using Owin;
[assembly: OwinStartup(typeof(SignalRChat.Startup))]namespace SignalRChat{
public class Startup{
public void Configuration(IAppBuilder app){
app.MapSignalR();}
}}
25
![Page 26: 利用Signalr打造即時通訊@Tech day geek](https://reader037.vdocuments.site/reader037/viewer/2022100300/559441ed1a28ab01308b4588/html5/thumbnails/26.jpg)
[Performance Tuning](1)
https://github.com/SignalR/SignalR/wiki/Performance
• IIS Configuration Max concurrent requests per applicationm: 預設5000提升到 100,000
cd %windir%\System32\inetsrv\
appcmd.exe set config /section:system.webserver/serverRuntime
/appConcurrentRequestLimit:100000
26
![Page 27: 利用Signalr打造即時通訊@Tech day geek](https://reader037.vdocuments.site/reader037/viewer/2022100300/559441ed1a28ab01308b4588/html5/thumbnails/27.jpg)
[Performance Tuning](2)
• ASP.NET ConfigurationXmaxConCurrentRequestPerCPU: default 5000, 可以提到20000
打開%windir%\Microsoft.NET\Framework\v4.0.30319\aspnet.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.NET\Framework\v4.0.30319\Config\machine.config
<processModel autoConfig="false" requestQueueLimit="250000" /> 27
![Page 28: 利用Signalr打造即時通訊@Tech day geek](https://reader037.vdocuments.site/reader037/viewer/2022100300/559441ed1a28ab01308b4588/html5/thumbnails/28.jpg)
[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
![Page 29: 利用Signalr打造即時通訊@Tech day geek](https://reader037.vdocuments.site/reader037/viewer/2022100300/559441ed1a28ab01308b4588/html5/thumbnails/29.jpg)
[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
![Page 30: 利用Signalr打造即時通訊@Tech day geek](https://reader037.vdocuments.site/reader037/viewer/2022100300/559441ed1a28ab01308b4588/html5/thumbnails/30.jpg)
[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
![Page 31: 利用Signalr打造即時通訊@Tech day geek](https://reader037.vdocuments.site/reader037/viewer/2022100300/559441ed1a28ab01308b4588/html5/thumbnails/31.jpg)
[Performance Tuning](6)
路徑:專案路經/packages/Microsoft.AspNet.SignalR.Utils.<version>/tools安裝 > SignalR.exe ipc
反安裝 > SignalR.exe upc
Windows 計數器> perfmon
31
![Page 32: 利用Signalr打造即時通訊@Tech day geek](https://reader037.vdocuments.site/reader037/viewer/2022100300/559441ed1a28ab01308b4588/html5/thumbnails/32.jpg)
Fiddler
32
![Page 33: 利用Signalr打造即時通訊@Tech day geek](https://reader037.vdocuments.site/reader037/viewer/2022100300/559441ed1a28ab01308b4588/html5/thumbnails/33.jpg)
擴充(Scaling out)
• Sqlserver
• Redius
• Azure survice bus
http://www.asp.net/signalr/overview/signalr-20/performance-and-scaling/scaleout-in-signalr
33
![Page 34: 利用Signalr打造即時通訊@Tech day geek](https://reader037.vdocuments.site/reader037/viewer/2022100300/559441ed1a28ab01308b4588/html5/thumbnails/34.jpg)
Signal R 2教學資源
http://www.asp.net/signalr/overview/signalr-20
34
![Page 35: 利用Signalr打造即時通訊@Tech day geek](https://reader037.vdocuments.site/reader037/viewer/2022100300/559441ed1a28ab01308b4588/html5/thumbnails/35.jpg)
35