WebQQ ：
让html5改变你对Web的看法
Tencent 于涛
2011
于涛
1983
腾讯 - 趣奇工作室
WebQQ所有产品线、AlloyOS
Javascript框架——JX(Javascript eXtension)
个人简介
大 纲
WebQQ中html5的应用
动态桌面
触控操作
IE9新特性
Canvas的时钟
音乐盒子widget
Notification
Geolocation位置服务
html5游戏
Web 推送服务
Web 语音视频聊天
开放平台AlloyOS
未来就在你眼前
WebQQ中html5的应用
动态桌面
全面支持iPad的触控操作
IE9 新特性
IE9 新特性
var btn1 = (
_URL+'',
'上一首'
);
var btn2 = (
_URL+'',
'播放'
);
var btn3 = (
_URL+'',
'下一首'
);
Notification
Notification
= new ({
hasSupport: function(){
if () {
return true;
} else {
return false;
}
},
requestPermission: function(cb){
(function() {
if (cb) { cb(() == 0); }
});
},
notify : function(icon, title, body) {
if (() == 0) {
var popup = (icon, title, body);
();
return popup;
}
return false;
}
});
Geolocation 位置服务
Geolocation 位置服务
if () {
(
getPositionSuccess,
getPositionFail,
{
timeout:5000
}
);
}
function getPositionSuccess(position){
var map = new ($("map"));
var lat = ;
var lng = ;
var qLngLat = new (lng,lat);
(qLngLat);
}
Canvas 制作的时钟
音乐盒子
用到的html5 & CSS3
Html5 Audio 标签
CSS3 伪类择器
CSS3 RGBa色彩模式
CSS3 渐变效果
CSS3 圆角效果
CSS3 阴影效果
CSS3 变换 - Transition
CSS3 动画 - Animation
Html5 Audio 标签
var audio=$('audio',{
id:'audioSoundObject_'+this._id,
src:url || ''
});
$('sound_object_container').appendChild(d);
('play',function(){
$(context,'play');
},false);
('pause',function(){
$(context,'pause');
},false);
('progress',function(){
$(context,'progress');
},false);
伪类选择器 & RGBa色彩
.mp2-music-item:nth-child(odd){
background:rgba(0,0,0,);
filter:progid:(GradientType=1, StartColorStr='#48000000', EndColorStr='#48000000');
}
.mp2-music-item:nth-child(even){
background:rgba(0,0,0,);
filter:progid:(GradientType=1, StartColorStr='#24000000', EndColorStr='#24000000');
}
li:nth-child(3n+1){
background:red;
}
CSS3 渐变效果
background:gradient(
linear,
left top,
left bottom,
from(rgba(255,255,255,)),
to(rgba(255,255,255,))
);
background:-webkit-gradient(
linear,
left top,
left bottom,
from(rgba(255,255,255,)),
to(rgba(255,255,255,))
);
background:-moz-linear-gradient(
top,
rgba(255,255,255,),
rgba(255,255,255,)
);
圆角和阴影效果
#qqmusic{
position:absolute;
top:0px;
background:rgba(30,34,38,);
-webkit-border-radius:6px;
-moz-border-radius:6px;
border-radius: 6px;
box-shadow:0 0 10px #000;
-webkit-box-shadow:0 0 10px #000;
-moz-box-shadow:0 0 10px #000;
width:205px;
height:370px;
}
CSS3 动画 - Animation
.mp2-progress-dot-playing{
-webkit-animation-name:mp2-progress-dot;
-webkit-animation-duration:2s;
-webkit-animation-iteration-count:infinite;
}
@-webkit-keyframes 'mp2-progress-dot'{
from{
background-color:#999999;
-webkit-box-shadow:0 0 3px #999999;
}
50%{
background-color:#ffffff;
-webkit-box-shadow:0 0 10px #ffffff;
}
to{
background-color:#999999;
-webkit-box-shadow:0 0 3px #999999;
}
}
CSS3 变换 - Transition
.item{
background: rgba(0,0,0,);
color: #ffffff;
-webkit-transition: all ease-in;
}
.item:hover{
background: rgba(220,220,220,);
color: #333333;
}
兼容非html5浏览器
soundModeDetector = function(){
if((($=='mobileSafari') || $ || $ || $) && ('audio').volume!==undefined) {
return 3; //以上浏览器的高版本支持audio对象播放mp3格式
}else if(>=9) {
return 1; //支持flash控件
}
else if(!! && new ActiveXObject("")) {
return 2; //支持wmp控件
}
else{
return 0; //一直很安静
}
};
html5 实现逼真的3D游戏
Web 推送服务
http特点
HTTP是半双工的
HTTP在每次请求结束后都会主动释放连接，因此HTTP连接是一种“短连接”
如何实现？
很多网站为了实现即时通讯(real-time)，要么通过轮询（polling），每隔几秒向服务器请求更新数据
要么用长轮询（long polling）的办法模拟全双工的通信（Comet）
基于 Iframe 及 htmlfile 的流（streaming）方式， 通过在 HTML 页面里嵌入一个隐蔵帧，然后将这个隐蔵帧的 SRC 属性设为对一个长连接的请求，服务器端就能源源不断地往客户端输入数据。不足之处：IE、Firefox下端的进度栏都会显示加载没有完成，Chrome上方的图标会不停的转动。一个称为“htmlfile”的 ActiveX 可以解决 IE 中的加载显示问题，但是其他浏览器暂无解决方法。
普通Ajax请求
Server
Browser
time line
request
request
data
data
需要返回的数据
需要返回的数据
Long poll
Server
Browser
time line
poll
poll
data
data
没有需要推送的数据
有需要推送的数据
没有需要推送的数据
有需要推送的数据
n久之后...
收到数据后再次发起poll
收到数据后再次发起poll
Web Socket 特性
WebSocket 是HTML5一种新的协议，它实现了真正的浏览器与服务器全双工通信(full-duplex)
Web Socket是HTTP协议的扩展，用HTTP握手之后，服务器和浏览器就使用这条HTTP链接下的TCP连接来直接传输数据，
抛弃了复杂的HTTP头部和格式，Web Socket的格式是基于帧（Frame）的，最小的帧只有2个字节。在文本帧中，每一帧始于0x00直接，止于0xFF字节，数据使用UTF-8编码。
与long polling相比，通信的次数虽然一样多，但是Web Socket的帧头的标记部分也比long polling的request的header部分简洁得多（几个字节与几K字节的差别）
Web Socket
Server
Browser
time line
request
data
data
没有需要推送的数据
有需要推送的数据
没有需要推送的数据
有需要推送的数据
n久之后...
Ajax方式
用例A：1000客户端，每秒轮询一次
网络吞吐量（871x1000=871000字节=6968000比特/秒（）
用例B：10000客户端，每秒轮询一次
网络吞吐量（871x10000=8710000字节=69680000比特/秒（66Mbps）
用例C：100000客户端，每秒轮询一次
网络吞吐量（871x100000=87100000字节=696800000比特/秒（665Mbps）
Web Socket方式
用例A：1000客户端，每秒一次
网络吞吐量（2x1000）=2000字节=16000比特/秒（）
用例B：10000客户端，每秒一次
网络吞吐量（2x10000）=20000字节=160000比特/秒（）
用例C：100000客户端，每秒一次
网络吞吐量（2x100000）=200000字节=1600000比特/秒（）
Web 推送服务
Web Socket 建立方法
conn = new WebSocket('ws://:8080');
= function () {
= 'success';
= 'Socket open';
};
= function (event) {
var message = ;
= message;
};
= function (event) {
= 'fail';
= 'Socket closed';
};
();
Web Socket 的方法
1、send(msg)：用连接来发送数据；
2、close()：关闭连接；
Web Socket 的事件
1、onopen：连接建立时触发；
2、onmessage：收到服务端消息时触发；
3、onerror：连接出错时触发；
4、onclose：连接关闭时触发；
Web Socket 的属性
1、readyState：表示socket连接状态；
CONNECTING (0) 连接尚未建立
OPEN (1) 连接已经建立，可以通讯
CLOSING (2) 连接正在关闭
CLOSED (3) 连接已经关闭
渐进增强和降级处理
WebSocket：Chrome、Safari、Opera
Flash Socket：其他支持Flash的浏览器
Long poll：其他不支持Flash的浏览器
Web 语音视频聊天
WebQQ 语音视频
Web 语音视频聊天
Web 语音视频聊天
Web 语音视频聊天
Web 语音视频聊天
Web 语音视频聊天
AlloyOS 开放平台
AlloyOS开放平台
开放API架构
API Manager
WebOS
API SDK
Portal
App
Layout
More...
CGI Server
CGI API
Window
...
微博
开放API
1 AlloyOS
方法
系统[System]
窗口应用程序[Window]
挂件应用程序[Widget]
桌面布局及样式[Layout]
账号绑定QAuth
事件
系统[Event:System]
窗口应用程序[Event:Window]
挂件应用程序[Event:Widget]
桌面布局及样式[Event:Layout]
2 推送服务
开放API
开放API
未来就在你眼前
WebRTC
支持Real-Time Communications (RTC)的浏览器都可实现实时音频和视频聊天
使用HTML 5和简单的Javascript API即可轻松的创建RTC应用
跨设备的实时聊天标准，已经支持Android、Windows Mobile和iOS
Chrome、Firefox和Opera未来都将支持WebRTC
Desktop Drag-Out
<a href="src/" draggable="true" class="dragout"
data-downloadurl="MIMETYPE: FILENAME: ABSOLUTE_URI_TO_FILE">
</a>
FileSystem APIs
(, 1024 * 1024, function(fs) {
// is a DirectoryEntry object.
('', {create: true}, function(fileEntry) {
(function(writer) { // writer is a FileWriter object.
= function(e) { ... };
= function(e) { ... };
var bb = new BlobBuilder();
('Hello World!');
(('text/plain'));
}, opt_errorHandler);
}
}, opt_errorHandler);
Markup for applications
更多html5特性...
Speech Input
Canvas 3D (WebGL)
Custom data-* attributes
History API
Device Orientation
^_^
The End
非常感谢!!!
