@{
ViewBag.Title = "SignalR Remote Controller Demo";
}
<div>
<input id="txtMsg" />
<!-- data-bind="enable: connId()" 當vm.connId有值時才可使用-->
<input type="button" value="Send" id="btnSend" data-bind="enable: connId()" />
<input type="button" value="Close" id="btnClose" data-bind="enable: connId()" />
</div>
<div>Clients:</div>
<div id="ulClients" data-bind="foreach: clients">
<div>
<!-- 將value設成ConnId, 選取與否的結果寫入vm.connId -->
<input type="radio" name="client"
data-bind="value: ConnId, checked: $parent.connId" />
<span data-bind="text: ClientName"></span>
</div>
</div>
@section scripts {
<script src="@Url.Content("~/Scripts/jquery.signalR-0.5.2.js")" ></script>
<script src="@Url.Content("~/SignalR/hubs")" ></script>
<script src="@Url.Content("~/Scripts/knockout-2.0.0.js")"></script>
<script>
$(function () {
//使用knockoutJs處理UI資料同步
var vm = {
clients: ko.observableArray([]),
connId: ko.observable()
};
ko.applyBindings(vm);
//與SignalR Hub建立連線
var commHub = $.connection.commHub;
//收到Hub傳送Client清單時，更新顯示，此處命名要與Server端一致
commHub.RefreshStats = function(dict) {
vm.clients.removeAll();
vm.clients.push({ ConnId:"*", ClientName:"All" });
vm.connId(false);
for (var cid in dict) {
vm.clients.push(dict[cid]);
}
};
$.connection.hub.start()
.done(function() {
//利用deferred done()在連線完成後呼叫Server端的Register()
//注意: 在JavaScript中，方法名稱會被轉為小寫起始
commHub.register("Console");
});
//送出訊息給指定Client
$("#btnSend").click(function () {
$.post("@Url.Content("~/Home/Send")", {
cid: vm.connId(),
msg: $("#txtMsg").val()
}, function(r) {
});
});
//下達指令給Client要求關閉
$("#btnClose").click(function() {
$.post("@Url.Content("~/Home/CloseClient")", {
cid: vm.connId()
}, function(r) {
});
});
});
</script>
}