曾经说过360利用云计算打压竞争对手的事情，今日一改往事之郁闷，我专门来篇文章夸奖下360安全卫士。咳咳！今天不完全是写360安全卫士的，我喜欢其中的一个叫做软件管家的功能，坦白说，我有点喜欢新软件，喜欢没事升级升级，尤其是chrome，一有新版本出来，我立马升级，好不含糊！国内这种软件管家很多的，不过我个人觉得360软件管家速度比较快。这点上，360的软件管家立功了，因为公司强制每台机器必须安装360，所以在公司，软件升级这很轻松，可是家里电脑我不想安装这玩意儿，于是我想，我只要弄到我想要升级的软件URL不就可以下载了么？基于这么一点朴素的想法，我就打算分析下360软件管家是通信协议是啥？ 此文妙哉，快快看全文 »
404位童鞋围观 | 5条评论分类： JS/DIV/CSS, PHP 标签: 360、360安全卫士
现在网络环境错综复杂，socket心跳包是获得健康强壮的连接的有效解决方案，今天，我们就在web socket中实现心跳包方案，是的，尽管我们只是做一个简单的聊天室，但我们让他稳定可靠一些一点也没有错。
我的心跳包方案很是简单，原理就是间隔发送心跳包数据给服务器，服务器在一定时间内发回心跳包响应，对比超时限定，如果超过设定的超时时间，则认为当前与服务器的websocket连接已经断开，关闭当前web socket连接，善后处理，例如重新连接，或者弹出提示……
比较有用的核心代码是这样子的：
function keepalive( ws ){ var time = new Date(); if( last_health != -1 && ( time.getTime() - last_health > health_timeout ) ){ //此时即可以认为连接断开，可设置重连或者关闭连接 $("#keeplive_box").html( "服务器没有响应." ).css({"color":"red"}); //ws.close(); } else{ $("#keeplive_box").html( "连接正常" ).css({"color":"green"}); if( ws.bufferedAmount == 0 ){ ws.send( '~H#C~' ); } } }
这就是心跳函数，发送心跳包和检测心跳健康度。我们将其植入到websocket的onopen事件中，来开启心跳检测。像这样：
var ws = new WebSocket( to_url ); ws.onopen=function(){ $("#statustxt").html("connected."); $("#send_btn").attr("disabled", false); heartbeat_timer = setInterval( function(){keepalive(ws)}, 1000 ); }
是的，这样子就可以实现web socket的心跳包，这里有些类似于多线程的发送方式，在发送心跳包的同时，并不影响正常的数据通信，我们的例子还是以上次的websocket聊天室来改进，我们可以发现，心跳包运行过程中，并不会干扰到我们的正常聊天。服务端我也进行了一些修改，原理类似，在超过一定时间内都没有收到客户端发来的心跳包，则认为该客户端已经掉线，关闭连接，收回资源。
Demo在这里：http://www.zendstudio.net/libs/websocket/chat/demo2.html
现在，有一个新的问题出现，如果我们要用php socket来模拟心跳包技术，该怎么实现？各位路过的朋友请多指教，感恩戴德。
互联网上的应用越发的五花八门，特别是进入web2.0以后，互联网更是把各地的人们紧紧的联系在了一起，为了掌握资讯，人们大量的使用搜索引擎来寻找自己想要知道的，自从有了RSS，比如我，就喜欢用google reader来订阅各种新鲜的资讯、先进的技术资源，这使得信息的呈现方式多样化，人们可以更为个性的、以更为适合自己的方式来获取和阅读资讯。
博客程序的出现，已有很多年的时间，然而未见其有所衰退，网民们还是很热衷于写博客，阅读博客，这还是一个很个性、独立的个人空间，我们可以写任何自己想写的东西。为了让自己写的东西更容易被别人找到，博客程序需要搜索引擎友好。搜索引擎技术也是不断进步，发展至今，其已经不仅仅是靠蜘蛛去抓取内容了，他们有了更好的技术，今天，就单独讲讲博客搜索吧！
百度开放平台的推出，确实是一个很大的进步，他的阿拉丁接口相当不错，从用户的角度看，可以不用点击进入目标网站，直接在搜索引擎即可了解到他想要知道的讯息。同时，它也支持blog ping接口了，该接口标准和google的blog ping是一样的，数据格式没有什么不同。这些API接口的推出，无疑是大大加快文章的收录速度，新鲜出炉的文字能够更快更广的发布传播出去，当然，前不久，google又推出了PubSubHubbub协议，这更是个伟大的创举，其实现了实时搜索！也就是XXX在微博上刚刚说了一句话，google通过使用PubSubHubbub就能马上呈现给对此话题感兴趣的用户。在技术上，我们一贯的承认,google是走在前列的。
从开放型博客程序的角度出发，那么以上讲到的都是主动技术，被动技术除了日志页面内容之外呢，还有RSS、RDF、Atom等等格式的被动呈现，用户可以在订阅了这些源之后，不用打开主页，只要在自己的阅读器里就可以浏览诸多的博客内容，感兴趣的可以再点击了解详细，发表评论等等，并且从阅读器可以一口气看很多的博客，而不用一个一个的来回切换，这是有效率的阅读方式。
所以，开放型博客程序已经不仅仅是将日志内容简单的显示出来完事的东西了，她需要默默工作的东西还有很多，除了以上的google ping,百度ping，RSS,RDF,Atom，甚至还需要更新sitemap,虽然很多人认为这是SEO，可是你的博客程序要显得有足够的开放性，这些都应该去实现，因为你根本不知道你的用户以哪种方式来阅读你发表的文字。是的，请相信这一点，就像我以前说的，多做一些，再多做一些。
websocket通信协议实现的是基于浏览器的原生socket，在客户端用JS即可轻松完成，前些天都在学习websocket 协议（但实际上websocket 协议甚为简约），并且粗略的思考过websocket的对于下一代web应用会产生怎样的影响，我想最大的巨变应该是就是实时性上吧！另外诸如上传大文件之类的优于http的应用。但问题也随之而来，服务端怎么办？前些天我弄了个websocket 聊天室的demo，现在还得在服务器上专门开个进程来跑呢，也许到时候不再是简单架设个web server就能跑应用的了。也许过不了多久，会出不同的服务端方案吧！先期待一下。
websocket的协议是很简单的，这里我把它分成客户端和服务端来讲。在客户端，new WebSocket即可实例化一个新的websocket对象，但其参数略微有一点不一样，参数格式是这样的ws://yourdomain:port/path ，这个从我的聊天室demo里面就可以轻松看出（ws = new WebSocket( “ws://www.zendstudio.net:9108/chat” ); ），WebSocket对象会自动解析这段字符串，发送到指定服务器端口，首先执行的是双方握手(handshake)，客户端发送数据格式类似这样： 此文妙哉，快快看全文 »
今天，我写了个websocket的聊天室demo，实践之后感觉这个东西实现的长连接着实很有诱惑力，在数据量的传输上，除了第一次的handshake，其余的每次传输只在原数据头尾分别加上”\x00″和”\xFF”两个字符（除此之外，和socket便没有任何差别），这个和ajax的传输不太一样，后者属于http协议，因此每次都会带有的头信息。
websocket的协议颇为简单，在第一次handshake通过以后，便建立连接，其后的通讯数据都是以”\x00″开头，以”\xFF”结尾。在客户端，这个是透明的，websocket组件会自动将原始数据“掐头去尾”。
好吧！看看我写的简陋的demo吧(PS:请使用chrome 4.0以上版本来打开页面)：
http://www.zendstudio.net/libs/websocket/chat/demo1.html
632位童鞋围观 | 9条评论分类： ITer, JS/DIV/CSS 标签: html5、websocket
html5的巨大影响已经越来越无法让人们忽略了，几个牛逼的demo出尽了风头，大家谈论web的东西也越来越多的涉及html5,这个下一代的web标准，她强调的原生概念深入人心，乔布斯帮主犀利的指出导致safari崩溃的罪魁祸首乃是flash插件的言论并非空穴来风，我们也常常在web game中感到flash插件略微的有些捉襟见肘。尽管flash显然在目前比html4+js的解决方案看上去要优秀的多，当然互联网上根本不乏优秀的成功的flash game，甚至“社区游戏”（例如开心农场），但人们往往想做的更好。
于是，html5逐渐的进入人们的视野，到了目前这个让人无法忽略的地位。更为激动人心的不仅仅是html5实现了原生视频播放这么简单代替flash，而webGL绝对是个震撼的体验！
WebGL实现了真正的3D,这项技术如果应用到web game中，那简直就是个颠覆性的效果，我们的web game完全和大型网游之间毫无差别，而且还不用去下载客户端，轻松跨平台。看看这几个关于webGL的demo吧！这真的太不可思议了。
在web game中，基于http的无状态连接有时候着实让我们头疼，我们需要socket，这样可以让我们的游戏运行的更顺畅，负载更小，我们的服务器能同时支持的在线数将更多，游戏体验也会更好！可这些在目前的浏览器上无法直接实现，我们的聊天室实在没有办法基于http，只好使用flash socket + JS的解决方案来让聊天室可以使用。而下一代的web标准，也就是html5中，将加入websocket，这是一个支持长连接的socket底层实现，让我们可以创建自己的通信，这对游戏太重要了，加上她，我们就可以完全的宣布，web game不再和大型网游有什么区别了！现在，我们基于http协议的web game要不断的去通过一个seesion令牌来验证玩家的合法性，验证提交数据的有效性，还有只能通过客户端向服务器“拉”数据，不能“推”数据的机制让很多功能开发起来非常吃力，出来的效果却不甚满意，有了websocket，很多头疼问题都将迎刃而解。
使用html5的webGL、webSocket将可以实现web游戏的最佳体验，说起来都令人热血沸腾啊。也许在不久的将来，就会有一款这样的web game 上线，所有的东西都在云端，玩游戏只要打开网页就行，跨浏览器，跨平台，随时随地玩游戏！这就是“云游戏”时代。
当然，html5普及还有很多的工作要做，浏览器的支持，硬件加速，网络带宽……等等等等，还有很长的一段路要走。另外，flash也不会那么快的死掉，flash game目前在国内相当成功，相当火爆，AS的程序员也是相当吃香的，毕竟flash这项技术目前很成熟，有很多资深的开发人员，有很强大的IDE,Adobe公司也没有放弃研发，继续寻找着先进的技术来改进flash，使他支持的东西更多。
html5的IDE会是Dreamweaver么？那不还是adobe的东西？呜呼！作为adobe公司，你好纠结啊，哥们。
402位童鞋围观 | 3条评论分类： ITer, JS/DIV/CSS 标签: html5、web game、webGL、websocket
我在最近制作的一个后台程序中，使用一处json初始化一些信息，用于使用中的调用，我一直在firefox下进行调试和开发，自始至终没有发现任何有问题的地方，而且是后台程序，就几个管理员用，所以不用考虑太多表现上的问题，故就以Firefox作为标准了，我们用的JS库是jquery，其本身的浏览器兼容性亦非常好，而bug也就这么产生了。我的代码大致是这样子的：
var info = {"var1":1,"var2":2,"var3":3,};
问题也就这么出现了，由于我在多个成员之间频繁的添加和减少，导致末尾多出一个逗号。这个在firefox下可以正常使用，然而到了IE下就会报错，初始化不成功，后面的所有功能都出不来，大囧啊！
这个和PHP数组的最后一个逗号不太一样！最好还是不要多出来这个逗号，略作小记，提醒自己啊！
199位童鞋围观 | 3条评论分类： JS/DIV/CSS, PHP 标签: iebug、javascript
Fiddler真乃神器！它和市面上常见的很多web调试器、http调试器、sniffer都不同！它的原理是在浏览器（或者其他使用http协议的进程）和服务器之间做代理角色，这样所有的通信都要经过它！尽管sniffer和这个原理是一样的，但他们工作的网络层不同。
1,018位童鞋围观 | 3条评论分类： ITer, JS/DIV/CSS 标签: 工具、调试器
不常更新博客是可耻的，我常这样想。趁晚饭还没有准备完成的时候，写一下前些天注意到google的一个css sprites，页面是在google的搜索结果页面，例如在google搜索zend studio，就在这个页面，初看左上角的logo并无任何特别，当我准备将其另存为，我发现，这整张图片是这样的:
因为在背景中我是常用到或者看到css sprites，而这张图片是“前景”，看了下代码，还是很巧妙的。原理是这样的：父元素相对定位，定义宽和高，然后overflow:hidden,img用绝对定位，然后top和left来控制位置，就让多余的部分hidden了。
看代码：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<style type="text/css">
body{background:#ccc}
h1{padding:0;margin:0;font-size:small;}
a#logo{position:relative;margin:14px 0 7px;width:150px;height:52px;overflow:hidden;display:block;}
a#logo img{position:absolute;top:-26px;left:0;border:0;}
</style>
</head>
<body>
<h1>
<a id="logo" title="google 主页" href="http://www.google.cn/webhp?hl=zh-cn">google<img alt="" src="http://www.google.cn/images/nav_logo4.png" width=168 height=119></a>
</h1>
<img alt="" src="http://www.google.cn/images/nav_logo4.png" width=168 height=119>
</body>
</html> |
就是这样的“前景” css sprites，而背景的应用似乎更为简单，就是background-position了，吃饭！
747位童鞋围观 | 5条评论分类： JS/DIV/CSS 标签: ajax、css sprites、div+css
这是一个完整的jquery插件，实际上是基于jquery的suggest插件修改的。
具体的功能如下：
呃，实际上上面的很多都是原suggest插件中自有的，我只是去掉了其ajax获取数据的功能，因为这延迟稍微有些烦人。
看demo：仿芒果网机票预定智能输入提示demo
PS：3字码是航空系统中很常见的为每个城市定义的不重复的特殊3位字符串，比如pek代表北京，sha代表上海等等。
2,664位童鞋围观 | 15条评论分类： JS/DIV/CSS 标签: ajax、jquery、suggest、智能输入
