狠狠撸

狠狠撸Share a Scribd company logo
前端本地应用程序网络
前端本地应用程序网络
本地通信应用网络

        龙藏
longzang@taobao.com
这是个可长可短的故事

引子
Server
1     Time

    Client
Web 应用中

如何实现即时通讯?
当前的可供选择
?   Flash XMLSocket
?   Java Applet 套接口
?   AJAX 的长轮询(long-polling)方式
?   Iframe 及 htmlfile 的流(streaming)方式
?   …
淘宝目前选型
? AJAX 的长轮询(long-polling)方式
淘宝目前应用
? 网页旺旺 ( WebWangwang )
? 拍卖 ( MPP )
? 工具条 ( Toolbar )
…
我们不讨论实现细节
只有一个问题
target = “_blank”
前端本地应用程序网络
前端本地应用程序网络
X
target = “_blank”
!!!
用户喜欢这样




         I   like it!
target = “_blank”
前端本地应用程序网络
其实我们的前提是错误的
Server
1     Time

    Client
Server
1      Time

    Web APP
Web APP         Web APP
         Web APP         Web APP

         Web APP         Web APP
Client             APP

          …               …
         Web APP         Web APP
N = Web APPs


                   Server
               N     Time

                   Client
A client…




Client               Server
More clients…




Clients                   Server
如何解决?
Clients   Server
Clients   Server
前端本地应用程序网络
My Hero!
前端本地应用程序网络
Trinity Framework


          Browsers                     Applications
Client


                          Trinity

Network      JSON, XML, etc.   HTTP, Socket, etc.


Servers
本地应用网络
Local Application Network
Master




Node   Node         Node
                …
Master ?
Master ?

      Node ?
Time
0




Time
0
App




      Time
0
App


App


      Time
0
App


App


App   Time
0
App


App


App   Time



…
App
0
Master


 App


 App     Time



…
…
 App
0
Master


Node


 App     Time



…
…
 App
0
Master


Node


Node     Time



…
…
 App
0
Master


Node


Node     Time



…
…
Node
Master !
Master
Server




Master
Server


  1




Master
Master
Master


SharedObejct
(Local Storage)
1   Master


SharedObejct
(Local Storage)
Node !
data




       Master




Node   Node         Node
                …
Master




Node   Node         Node
                …
Master




Node   Node         Node
                …
Master




Node   Node         Node
                …
前端本地应用程序网络
Master




 Node         Node         Node
                       …

fire(data);
Master




Node   Node         Node
                …
Master




Node   Node         Node
                …
前端本地应用程序网络
Master




Node   Node         Node
                …
Master




                    ”lastNode”
Node   Node            Node
                …
Master




                           ”lastNode”
Node          Node            Node
                       …

       fire(data, ”lastNode” );
Master




                    ”lastNode”
Node   Node            Node
                …
Master




                    ”lastNode”
Node   Node            Node
                …
前端本地应用程序网络
Master




Node   Node         Node
                …
Node   Node       Node
              …
Node   Node       Node
              …
???




Node   Node       Node
              …
Node   Master       Node
                …
Node   Master       Node
                …
场景
Browser   Master   x1
Tab   Master   x1
Applications   Master   x1
前端本地应用程序网络
Browser   Master     x1
          +
Browser       Node   x   N
Browser   Master     x1
          +
Tab           Node   x   N
Browser       Master     x1
               +
Applications       Node   x   N
Applications       Master   x1
               +
Browser            Node     x   N
前端本地应用程序网络
如何使用
Taobao Toolbar Notification
第一次访问页面




          Javascript
第一次访问页面


    Javascript



                 swfobject   .embedSWF( “trinity.swf” ,…)



     Trinity
第一次访问页面


          Trinity




          Master
第一次访问页面



     Master
                  function jsEntry(swfid,msg){
                            switch(msg.type){
                                      case 'master':
                                               pushData();
                                               break;
                           }}
      AJAX
   long-polling
任意个含有当前应用的页面


          Trinity




           Node
任意个含有当前应用的页面


     Node



                …



     Other
   Javascript
Master 获得数据



       Master



                    trinity.fire(data);


        AJAX
     long-polling
Master



         data




Node
任意个含有当前应用的页面


     Node

                function jsEntry(swfid,msg){
                          switch(msg.type){
                                    case ‘message':
                                             updateView();
                                             break;
                         }}
     Other
   Javascript
用户发生行为


     Node



                 trinity.fire(data);


   User Action
任意个含有当前应用的页面


     Other
   Javascript
                function jsEntry(swfid,msg){
                          switch(msg.type){
                                    case ‘message':
                                             updateView();
                                             break;
                         }}

    Node
Master



         data




Node
Master
             function jsEntry(swfid,msg){
                       switch(msg.type){
                                 case ‘message':
                                          updateView();
                                          break;
                      }}
  Other
Javascript
开发者不需要关心




   X
Master          Node
                    X
开发者只需要知道




      √
   Trinity
Trinity API
Trinity API
Trinity API
Trinity API
Trinity Event
Trinity Event
Trinity Event
Trinity Event
Trinity Event
Trinity Event
Exchange data
更多文档
https://github.com/kingfo/trinity/wiki
前身




    Trine
       2010
code name : neuron
code name : native link
更多 Trinity 内部设计细节?
Q&A
前端本地应用程序网络

More Related Content

前端本地应用程序网络