前端本地应用程序网络
TRANSCRIPT
引子
这是个可长可短的故事
Client
Server
Time1
如何实现即时通讯？
Web 应用中
当前的可供选择
• Flash XMLSocket
• Java Applet 套接口
• AJAX 的长轮询（long-polling）方式
• Iframe 及 htmlfile 的流（streaming）方式
• …
淘宝目前选型
• AJAX 的长轮询（long-polling）方式
淘宝目前应用
• 网页旺旺 ( WebWangwang )
• 拍卖 ( MPP )
• 工具条 ( Toolbar )
…
我们不讨论实现细节
只有一个问题
target = “_blank”
target = “_blank”X
!!!
用户喜欢这样
I like it!
target = “_blank”
其实我们的前提是错误的
Client
Server
Time1
Web APP
Server
Time1
Client
Web APP
Web APP
Web APP
Web APP
…
APP
Web APP
Web APP
Web APP
Web APP
…
Client
Server
TimeN
N = Web APPs
ServerClient
A client…
ServerClients
More clients…
如何解决？
ServerClients
ServerClients
My Hero！
Trinity Framework
ClientBrowsers
Servers
Applications
Trinity
Network HTTP, Socket, etc.JSON, XML, etc.
本地应用网络
Local Application Network
Master
Node Node Node…
Master ?
Master ?
Node ?
Time
Time
0
App
Time
0
App
Time
App
0
App
Time
App
App
0
App
Time
App
App
App
…
0
Time
App
App
App
…
0
…
Master
TimeApp
App
…
0Master
Node
…
Time
App
…
0Master
Node
Node
…
Time…
0Master
Node
Node
Node
…
Master !
Master
Master
Server
Master
Server
1
Master
Master
SharedObejct(Local Storage)
Master
SharedObejct(Local Storage)
1
Node !
Master
Node Node Node…
data
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
Node Node Node…
”lastNode”
Master
Node Node Node…
fire(data, ”lastNode” );
”lastNode”
Master
Node Node Node…
”lastNode”
Node
Master
Node Node…
”lastNode”
Master
Node Node Node…
Node Node Node…
Node Node Node…
Node Node Node…
???
MasterNode Node…
MasterNode Node…
场景
Browser Master x 1
Tab Master x 1
x 1Applications Master
Browser Master
Browser Node
x 1
x N
+
Browser Master
Tab Node
x 1
x N
+
Browser Master x 1
x N
+
Applications Node
Applications
Browser
Master x 1
x N
+
Node
如何使用
Taobao Toolbar Notification
Javascript
第一次访问页面
Trinity
Javascript
swfobject.embedSWF( “trinity.swf” ,…)
第一次访问页面
Trinity
Master
第一次访问页面
Master
第一次访问页面
function jsEntry(swfid,msg){
switch(msg.type){ case 'master':
pushData();break;
} }
AJAX long-polling
Trinity
Node
任意个含有当前应用的页面
…
OtherJavascript
Node
任意个含有当前应用的页面
Master
Master 获得数据
trinity.fire(data);
AJAX long-polling
data
Node
Master
function jsEntry(swfid,msg){
switch(msg.type){ case ‘message':
updateView();break;
} }
OtherJavascript
Node
任意个含有当前应用的页面
用户发生行为
trinity.fire(data);
User Action
Node
function jsEntry(swfid,msg){
switch(msg.type){ case ‘message':
updateView();break;
} }
Node
任意个含有当前应用的页面
OtherJavascript
data
Node
Master
function jsEntry(swfid,msg){
switch(msg.type){ case ‘message':
updateView();break;
} }
OtherJavascript
Master
NodeMaster
开发者不需要关心
X 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
前身
Trine2010
code name : neuron
code name : native link
更多 Trinity 内部设计细节？
Q&A
