当前分类: web前端编程

萧瑟秋风今又是,换了人间07/18/2010

啊哈!经过几个周末艰苦卓绝的奋斗,ZendStudio.Net终于换上了新的主题(我现在就想围观)!真是一件大喜事啊。新的首页多出了一块快速导航,是的,别看现在没有什么内容,我是打算将有用的东西都填进去,这样来到zend studio的人就更快的各取所需了,这是一片和谐的土地,每个人来到这里都感到快乐(你甚至感到,即使在天上人间也没有这么快乐)。

同时,征集一下!你希望什么样的内容应该放在首页的快速导航区域?请给我留言。

新的样式来自Prower最初的设计,这里特别感谢Prower!之前我们有过邮件沟通,他很爽快的表示我可以修改使用他的神来之笔。再次的谢谢!如果没有这个我很喜欢的Prower V3主题,我想对于一个程序员来说,从头开始设计一款自己中意的WordPress主题,还是有些困难的,因为我真的没有学过设计,显然是会让我花费更多的时间,而不见得能取得既定成效的一项工作。

这也是我第一次制作(和修改有着本质的不同)wordpress主题,期间还是遇到了一些小小的阻碍的,幸好我知道该在哪里找到答案,也就顺利的解决问题了。在修改了部分的html结构以后,我也对css部分做了改动,但比较遗憾的是我放弃了使用html5结构,同时如果你使用IE6,也有可能打开的zend studio呈现给你的是凌乱不堪,抱歉了!我不支持IE6.

同时,卸载了诸多wp插件,那些插件大多是为了支持上一个主题的,现在似乎打开的速度也变快了一些,希望这能给你带来好的体验~

最后,非常感谢所有长期以来一直关注zend studio的朋友,谢谢你们!zend studio还将走下去,有你们的陪伴真是幸福!

| 5条评论分类: web前端编程,咸吃萝卜 标签:  

web socket 心跳包的实现方案05/30/2010

现在网络环境错综复杂,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在这里:https://www.zendstudio.net/libs/websocket/chat/demo2.html

现在,有一个新的问题出现,如果我们要用php socket来模拟心跳包技术,该怎么实现?各位路过的朋友请多指教,感恩戴德。

| 3条评论分类: web前端编程,互联网2.0,网络通信协议 标签:  

websocket 通信协议(已更新到version 13)05/11/2010

UPDATE:前些天有网友mail和我讨论websocket协议,当时颇忙!更惭愧的是,此篇文章竟已不能使用,原因是当时我写的还是websocket草稿时候的协议!终于,我将websocket 协议更新到了version 13版本 —–2012.5.19

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),客户端发送数据格式类似这样: 此文妙哉,快快看全文 »

| 28条评论分类: web前端编程,互联网2.0,网络通信协议 标签:  

弄了个websocket 聊天室玩玩05/09/2010

今天,我写了个websocket的聊天室demo,实践之后感觉这个东西实现的长连接着实很有诱惑力,在数据量的传输上,除了第一次的handshake,其余的每次传输只在原数据头尾分别加上”\x00″和”\xFF”两个字符(除此之外,和socket便没有任何差别),这个和ajax的传输不太一样,后者属于http协议,因此每次都会带有的头信息。

websocket的协议颇为简单,在第一次handshake通过以后,便建立连接,其后的通讯数据都是以”\x00″开头,以”\xFF”结尾。在客户端,这个是透明的,websocket组件会自动将原始数据“掐头去尾”。

好吧!看看我写的简陋的demo吧(PS:请使用chrome 4.0以上版本来打开页面):
https://www.zendstudio.net/libs/websocket/chat/demo1.html

| 14条评论分类: web前端编程,互联网2.0,网络通信协议 标签:  

html5带您进入“云游戏”时代04/22/2010

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公司,你好纠结啊,哥们。

| 3条评论分类: web前端编程,互联网2.0 标签:  

IE下json格式的一小点需要注意的地方

我在最近制作的一个后台程序中,使用一处json初始化一些信息,用于使用中的调用,我一直在firefox下进行调试和开发,自始至终没有发现任何有问题的地方,而且是后台程序,就几个管理员用,所以不用考虑太多表现上的问题,故就以Firefox作为标准了,我们用的JS库是jquery,其本身的浏览器兼容性亦非常好,而bug也就这么产生了。我的代码大致是这样子的:

var info = {"var1":1,"var2":2,"var3":3,};

问题也就这么出现了,由于我在多个成员之间频繁的添加和减少,导致末尾多出一个逗号。这个在firefox下可以正常使用,然而到了IE下就会报错,初始化不成功,后面的所有功能都出不来,大囧啊!

这个和PHP数组的最后一个逗号不太一样!最好还是不要多出来这个逗号,略作小记,提醒自己啊!

| 4条评论分类: web前端编程 标签:  

隆重献礼:http协议调试神器 – Fiddler02/06/2010

Fiddler真乃神器!它和市面上常见的很多web调试器、http调试器、sniffer都不同!它的原理是在浏览器(或者其他使用http协议的进程)和服务器之间做代理角色,这样所有的通信都要经过它!尽管sniffer和这个原理是一样的,但他们工作的网络层不同。

太给力了,让我看完 »

| 4条评论分类: web前端编程,网络通信协议 标签:  

非背景中图片的css sprites应用,来自google05/10/2009

不常更新博客是可耻的,我常这样想。趁晚饭还没有准备完成的时候,写一下前些天注意到google的一个css sprites,页面是在google的搜索结果页面,例如在google搜索zend studio,就在这个页面,初看左上角的logo并无任何特别,当我准备将其另存为,我发现,这整张图片是这样的:

google 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了,吃饭!

| 5条评论分类: web前端编程,互联网2.0 标签:  

仿芒果网机票预定智能输入提示,基于jquery05/09/2009

这是一个完整的jquery插件,实际上是基于jquery的suggest插件修改的。

具体的功能如下:

  1. 点击输入框,自动列出热门出行城市;
  2. 支持中文/拼音/3字码 输入的智能提示;
  3. 支持键盘方向键选择、回车键确定;
  4. 支持选择后自定义callback函数;
  5. 支持IE6、IE7、IE8、Firefox

呃,实际上上面的很多都是原suggest插件中自有的,我只是去掉了其ajax获取数据的功能,因为这延迟稍微有些烦人。

看demo:仿芒果网机票预定智能输入提示demo

仿芒果网机票预定智能输入提示demo完整包下载

PS:3字码是航空系统中很常见的为每个城市定义的不重复的特殊3位字符串,比如pek代表北京,sha代表上海等等。

| 24条评论分类: web前端编程,有得下载哦 标签:  

innerHTML的一个BUG——丢失绑定事件04/23/2009

在编写一个后台的小应用的过程中,我碰到了这个bug,由于该系统之前已经开发完成,在验收阶段,客户要求加入这个快速输入的小功能,省却重复输入之烦恼。为了让程序在修改了千疮百孔之后依然显得可维护性很强,我不得不考虑动态创建元素。于是,在我快乐的敲入完代码以后,快乐的拿起鼠标点击生成的链接的时候。。。。点击链接的时候。。。。我点,我点。。。我连续的点击到我的鼠标明显的感到有意见的时候,程序都没有按照我的意愿去执行。什么原因呢?我们来看看我之前写的那段代码:

竟有如此美文,尽阅之 »

| 2条评论分类: web前端编程 标签:  

PHP界大牛们
反人类不分昼夜
牛掰级朋友圈子