请注意,本站并不支持低于IE8的浏览器,为了获得最佳效果,请下载最新的浏览器,推荐下载 Chrome浏览器
欢迎光临。交流群:166852192

ORCHARD + SIGNALR + KNOCKOUT.JS实时应用程序


In this article we will see how to create Real-time features in Orchard CMS using SignalR and Knockout.Js.
SignalR will take care about async calls between client side html and the server while Knockout.js will generate dinamically html tags based on JSON results.
Strong points of this approach:
- Async operations not blocking user between request and response in classic full page post.
- Only JSON data to transfer.
- Possibility to generate PUSH notifications to all connected users or groups of them.
We are going to create a simple button that once pressed will retrieve a list of contents from the database.
在本文中,我们将了解如何使用SignalR和Knockout.Js在Orchard CMS中创建实时功能。


SignalR将关心客户端html和服务器之间的异步调用,而Knockout.js将基于JSON结果生成dinamically html标记。


这种方法的优点:


- 异步操作不阻止用户之间的请求和响应经典全页邮政。
- 只传输JSON数据。
- 可以向所有连接的用户或他们的组生成PUSH通知。


我们将创建一个简单的按钮,一旦按下将从数据库中检索内容列表

Let's start creating a new module:

让我们开始创建一个新模块:
codegen module testSignalR /includeinsolution:true

We need to install Proligence SignalR that contains SignalR references.

我们需要安装Proligence SignalR包含SignalR引用。
Download Knockout.Js and put js files in script folder inside your module.
下载Knockout.Js并把js文件放在模块内的脚本文件夹中。
Add a new folder Hubs and inside create a TestHub class like this: 
添加一个新的文件夹Hubs和里面创建一个TestHub类像这样:
?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
public class TestHub : Hub {
      private readonly IOrchardServices _services;
 
      public TestHub(IOrchardServices services) {
          _services = services;
      }
 
      public void Test() {
 
          IEnumerable<dynamic> list = _services.ContentManager.Query().ForType("Articolo").List();
 
          var retList = list.Select(item => new {Id = item.Id, Title = item.TitlePart.Title});
 
          Clients.Caller.testNotify(retList);
      }
  }
I've created an example Test() method that returns dummy data and convert it in a simple Id-Title list. List is passed by SignalR at client-side function testNotify in this way:
我创建了一个示例Test()方法,返回虚拟数据并在简单的Id标题列表中转换它。 列表由SignalR在客户端函数testNotify以这种方式传递:
?
1
Clients.Caller.testNotify(retList);

Adding view:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
@{
    Script.Require("jQuery_SignalR_Hubs").AtHead();
     
    Script.Include("knockout-3.0.0.js").AtHead();
}
 
@using (Script.Head())
{
    <script>
        $(function () {
            "use strict";
 
            function contentsViweModel() {
 
                var self = this;
 
                self.hub = $.connection.testHub;
                 
                self.contents = ko.observableArray();
                 
                self.test = function() {
                    self.hub.server.test();
                };
                 
                self.hub.client.testNotify = function (contents) {
                    self.contents(contents);
                };
                 
                self.clear = function () {
                    self.contents(null);
                };
            };
 
            var vm = new contentsViweModel();
            ko.applyBindings(vm);
             
            $.connection.hub.start();
        });
    </script>
}
    <div class="page-header">
        <h1>Real time test</h1>
        <h3>Using Knockout.Js and SignalR</h3>
    </div>
 
<button id="btnTest"  data-bind='click: $root.test'>@T("Test")</button>
<button id="btnTestClear"  data-bind='click: $root.clear'>@T("Clear")</button>
 
<fieldset class="contentItems bulk-items">
    <ul data-bind ="foreach: contents">
        <li>
            <div class="summary">
                <div class="properties">
                    <h3 data-bind="text: Title"></h3>
                </div>
            </div>
        </li>
    </ul>
</fieldset>
Client function testNotify(contents) is called from server and sets a contents object with JSON data. This object is defined as observableArray and Knockout will automatically update binded html with new values.
客户端函数testNotify(contents)从服务器调用,并使用JSON数据设置一个内容对象。 这个对象被定义为observableArray和Knockout将使用新值自动更新绑定的html。

作者原创内容不容易,如果觉得内容不错,请点击右侧“打赏”,赏俩给作者花花,也算是对作者付出的肯定,也可以鼓励作者原创更多更好内容。
更多详情欢迎到QQ群 166852192 交流。