• 2014-07-28

    HTTP 长连接技术 Comet

    Views: 29283 | 3 Comments

    人们常常提到"Comet", 或者"Web 服务器推", "HTTP 长连接", 事实上, 他们指的是同一件东西, 可以统称为 Comet 技术. 但是, Comet 技术又不是单独的一种东西, 而解决某一个问题的许多技术的统称. 要解决的问题是 Web 服务器向浏览器实时推送数据, 而解决方案有很多种.

    最经典的方案是 AJAX 轮询, 这种方案和"推"技术毫无关系, 只是由于轮询的间隔比较短, 如一两秒, 便给了用户实时的错觉.

    新下来是安装浏览器插件, 如 Active-X, 或者使用 Flash 插件, Java Applet 插件等, 这些方案都不通用, 兼容性不好, 也不能被称为 Comet 技术.

    根据实践, 真正的 HTTP 长连接方案主要有: Script Tag Long-Polling, Forever Iframe, WebSocket. 这些方案在我的另一篇文章"各种 Comet 技术优缺点对比"有介绍.

    对于开发者, 为了快速和方便的开发, 应该选择一个支持 Comet 技术的 Web 服务器和一套 JavaScript 库. iComet 就是这样的一套解决方案.

    iComet 开源项目: https://github.com/ideawu/icomet
    iComet Demo: http://www.ideawu.com/icomet/chat/

    Posted by ideawu at 2014-07-28 08:46:23 Tags: ,
  • 2014-07-23

    jQuery 设置复选框选中状态的 BUG

    Views: 16007 | 3 Comments

    在以前, 如果想做一个全选和全不选的功能, 用 jQuery 非常简单, 就是设置 checked 属性. 但今天见鬼了, 以前能正常工作的代码无论如何也不能工作.

    if(selectAll){
    	$('input.cb').attr('checked', 'checked');
    }else{
    	$('input.cb').removeAttr('checked');
    }
    

    这段代码只能工作一次, 但我可以发誓, 这段代码以前用得没问题! 然后我尝试这段代码:

    $('input.cb').attr('checked', selectAll);
    

    也是只能工作一次.

    后来, 终于查明好像是 jQuery 的版本兼容问题, 我找出了下面的正确方法, 但不知道是不是兼容所有版本的 jQuery.

    $('input.cb').prop('checked', cb.checked);
    

    兼容所有版本的正确方法:

    // 兼容所有版本的正确方法
    $('input.cb').each(function(i, e){
    	e.checked = cb.checked;
    });
    

    搜索了一下, jQuery 对于 attr()prop() 有很大的争论.

    Posted by ideawu at 2014-07-23 10:20:51 Tags:
  • 2014-07-16

    MySQL 更新并返回计数

    Views: 13331 | 6 Comments

    对于想使用 MySQL 实现简单 ID 分配器, 一般就是设置一个整数字段, 然后想分配的时候加 1 并返回. 新手往往犯错误, 先执行一条 update 语句, 然后再 select 那个字段. 但这是错误的!

    正确的方式应该是使用 last_insert_id() 函数:

    update mytable set counter=last_insert_id(counter+1);
    select last_insert_id();
    
    Posted by ideawu at 2014-07-16 13:51:59
  • 2014-07-12

    网页适配手机移动版的CSS

    Views: 12722 | No Comments

    首先, 禁止网页缩放, 在 HTML head 里加入

    <meta name="viewport"
        content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    

    接着, 避免图片撑大网页, 出现横向滚动条, 设置 img 标签的 CSS

    img{
    	max-width: 100%;
    }
    

    最后, 对某些表格或者表单等, 我们希望在电脑版(正常版)网页上有最大宽度, 但在手机上则希望是 100% 宽度, 这时, 便可利用 max-width 参数

    .container{
    	width: 100%;
    	max-width: 880px;
    }
    
    Posted by ideawu at 2014-07-12 00:43:47
  • 2014-03-25

    账号系统的两阶段登录和三阶段登录

    Views: 11967 | No Comments

    简单的账号登录是一阶段登录, 也即用户提供用户名和密码, 然后服务器端验证账号和密码是否正确以决定是否成功登录. 一阶段登录其实安全性是非常危险了, 其危险性就在于这个登录流程涉及到的数据都是静态的, 因为用户名和密码一般不会改变.

    为了在登录流程中引入动态数据, 必须把流程改为两阶段登录: 1, 获取动态临时 secret salt; 2. 利用 secret salt 加密用户名和/或密码. 而为了实现单点登录(SSO), 还需要利用三阶段登录.

    Continue reading »

    Posted by ideawu at 2014-03-25 00:27:00
  • 2014-03-24

    生成二维码图片的jQuery qrcode插件

    Views: 28415 | 2 Comments

    二维码是移动应用领域非常重要的一项技术, 可用在账号登录, App 下载, 好友关注等领域. 事实上, 二维码是一种以图片形式编码数据的方式, 在图片中包含了某些数据, 这些数据可以是一段文本, 一个URL等等.

    既然二维码是一种图片, 那么你可以会想当然地使用 PHP 或者 Java 等语言生成二维码图片, 如果在 Web 应用中这么做, 你很可能就大错特错了! 因为, 图片处理是非常消耗 CPU 计算资源的, 这会给你带来很大的成本.

    对于 Web 应用, 其实可以使用客户端(浏览器)技术来生成二维码图片, 也即使用 JavaScript 来生成二维码图片, 这样, 把计算分布到每一个用户的电脑上, 充分利用"分布式计算".

    Continue reading »

    Posted by ideawu at 2014-03-24 00:29:34 Tags:
|<<<123456789>>>| 4/28 Pages, 163 Results.