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

利用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 Server
要求
回覆網頁
處理
要求
回覆網頁
要求
回覆網頁
處理
處理
4

如果要在Web上實作即時通訊:聊天室?
Pulling是好方法?
是很簡單
但代價太高
大部分時間是虛工
5

Html 5的Web socket帶來一道曙光
persistent connection
two-way channel
6
小明Server
Connect
明天Tech day哪等?
市政府捷運站
好
大雄
Connect
明天Tech day哪等?
市政府捷運站
好
Process
Process
Process
Process
Connection

即時通訊仍有一些麻煩事
持續連線要自行處理
處理訂閱
斷線偵測
偵測狀態改變
訊息要自行解析
如果要進行網頁和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
虛擬層級
9

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到:);
</script>
大雄
明天Tech day坐捷運去?
0900到
H
T
T
P
HTTP
HTTP

適用平台(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 json2 17

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

Hub(2)
• 新增startup項目, 選OWIN 啟動類別
using Microsoft.Owin;
using Owin;
[assembly: OwinStartup(typeof(SignalRChat.Startup))]
{
public class Startup
{
public void Configuration(IAppBuilder app)
{
app.MapSignalR();
}
}
}
19

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 src="Scripts/jquery-1.6.4.min.js" ></script>

<script src="Scripts/jquery.signalR-2.1.0.min.js"></script>

<script src="signalr/hubs"></script>

Client(2)
21

<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>

[升級到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
 <script
src="Scripts/jquery.signalR-2.1.0.min.js"></script>
23

升級到SignalR 2(2)
• Global.ascx.cs移除RouteTable
protected void Application_Start(object sender, EventArgs e)
{
RouteTable.Routes.MapHubs();
}
• 新增Owin startup
24

升級到SignalR 2(3)
• Startup.cs填入以下code
using Microsoft.Owin;
using Owin;
[assembly: OwinStartup(typeof(SignalRChat.Startup))]
{
{
{
app.MapSignalR();
}
}
}
• Hub.cs 增加Using
using Microsoft.AspNet.SignalR;
25

[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

• 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

• 減少訊息頻率
• 減低訊息大小:使用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

• SignalR configuration setting
DefaultMessageBufferSize :1000, 如果訊息過大, 可調降該值, ex:500
{
{
// Any connection or hub wire up and configuration should go here
GlobalHost.Configuration.DefaultMessageBufferSize = 500;
app.MapSignalR();
}
}
29

• 測試SignalR負載工具-Cran
https://github.com/SignalR/SignalR/tree/dev/src/Microsoft.AspNet.S
ignalR.Crank
• SignalR performance counter
管理Nuget套件, 搜尋signalr.utils
30

路徑:專案路經/packages/Microsoft.AspNet.SignalR.Utils.<version>/tools
安裝> SignalR.exe ipc
反安裝> SignalR.exe upc
Windows 計數器> perfmon
31

擴充(Scaling out)
• Sqlserver
• Redius
• Azure survice bus
http://www.asp.net/signalr/overview/signalr-20/performance-and-scaling/scaleout-in-signalr
33

Signal R ２教學資源
http://www.asp.net/signalr/overview/signalr-20
34

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

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

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

Semelhante a 利用Signalr打造即時通訊@Tech day geek (20)

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

Notas do Editor