工作记录

2011.10.27-11.01

2011 年 10 月 21 日 ~10 月 23 日在杭州参加了由 InfoQ 网站主办的全球技术会议， QCon 全球企业开发大会（ QCon Enterprise Software Development Conference ）。

二、会议主题
10月21日
为社交网站构建新型数据产品（John Wang）
HTML5 WebSockets的今天（Guillermo Rauch）
新浪微博开放平台中的Redis 实践（唐福林）
又拍网架构中的消息/任务系统（赵钟秋）
阿里巴巴中文站架构设计实践（何崚）
Web请求异步处理和海量数据即时分析的实践（岑文初）
携程旅行网在SOA架构方面的探索（刘剡）
10月22日
eBay技术平台：掌控十亿级交易数据（Tony Ng）
基于事件驱动架构的实时企业（Richard Seroter）
MongoDB在盛大大数据量项目中的应用（郭理靖）
MySQL数据库开发的三十六条军规（吴诗展）
SAE云计算平台的技术发展与挑战（丛磊）
让交付的速度跟上思考的速度（潘捷 赵君）
基于Hadoop平台的亿贝用户邮件数据分析（苏立）
大数据时代的科学数据战略（卢东明）

10月23日
重构全局系统架构的方法与工具（程立）
把大象放进冰箱——技术型复杂项目的特性裂解（黄志斌）
吸纳敏捷方法 - 提升互联网开发的竞争优势（章显洲）
架构之路——穿行在产品和业务之间（吴立峰）

层级结构的数据在平面的数据库中常用两个方法 ：
邻接表(adjacency list)模型
通过给每个节点增加一个属性parent来表示这个节点的父节点从而将整个树状结构通过平面的表描述出来。
嵌套集合(nested set)模型
通过使用表示节点的嵌套关系的左值(left value)和右值(right value)来表现数据的包含及父子层次关系.

从外层节点的最左侧开始，从左到右编号：

其编号方式也同样适用于典型的树状结构：

以上这种预先对树中的每个节点进行排序，从左到右，一次一层，为节点赋右值前先从左到右遍历其子节点给其子节点赋左右值，这种方法被称作“预排序遍历树算法（preorder tree traversal algorithm） ”。

算法实现：
1、数据结构
2、增加节点
3、修改节点
4、删除节点
5、遍历树
6、查询节点的深度
7、查询直接子节点
8、查询所有子节点
9、查询节点到根的路径
10、查询指定深度的节点

具体请查看源码。左右值无限分类算法demo 。

整理下网站缩略图水印图动态生成的方法：

会员上传图片后，调用图片的各地方需要的尺寸不全一样，需要生成大小不同的等比例缩略图。
实现方法是nginx判断，请求的缩略图规则url中，如果图片不存在则调用php程序以原始图片生成对应的缩略图，然后显示出来，并且图片第一次生成后下次直接调用即可。

一、基本原则：
只保留原始图片，其它尺寸由原图生成。
缩略图按需生成，大小体现在固定的url。

二、图片文件：
原始图路径：/home/htdocs/app/upfiles/house/年/月/日/src_图片名
生成图路径：/home/htdocs/app/upfiles/house/active/年/月/日/图片名_图片生成大小
生成图路径：/home/htdocs/app/upfiles/house/active/年/月/日/图片名_图片生成大小及会员编号
原始图url：
http://p2.uedao.com/house /2011/02/12/src_ 130037359579225801.jpg
缩略图url（不存在则自动生成）：
http://p1.uedao.com/house/active /2011/02/12/130037359579225801_128x92 .jpg
水印图url（不存在则自动生成）：
http://p1.uedao.com/house/active /2011/02/12/130037359579225801_128x92x1001 .jpg

三、nginx配置（nginx.conf）

#p1.uedao.com p2.uedao.com
server {
    # listen port
    listen       80;
    server_name  p1.uedao.com p2.uedao.com;
    charset utf-8;

    # root
    root   /home/htdocs/app/upfiles;
    index  index.php index.html;

    # blocked
    location ~ .*\.(gif|jpg|png|jpeg|bmp|swf|cur|ico)$ {
        valid_referers none blocked *.uedao.com *.facebook.com;
        if ($invalid_referer) {
           #return 404;
        }
        location ~* /house/active/(.+)$ {
            if (!-f $request_filename) {
                proxy_pass http://localhost:8000/app/action/createimg.php?s=$1&$args;
                break;
            }
        }
        expires max;
        access_log off;
    }
}
#注：$1,为location匹配的正则结果；$args, 请求中的参数。

四、php程序（createimg.php）

$src = $GET ['s']; //图片路径
if ($src) {
    //省略数据验证（如请求来源判断、只响应指定尺寸等）
    $src_array = explode ( '/', $src );
    $src_array_len = count ( $src_array );
    $file_path = $src_array [0] . '/' . $src_array [1] . '/' . $src_array [2] . '/';
    $file_name = $src_array [3];
    //生成大小
    $size_ext_str = strrchr ( trim ( $file_name ), '_' );
    $size_str = substr ( str_replace ( strrchr ( $size_ext_str, '.' ), '', $size_ext_str ), 1 );
    $size_array = explode ( 'x', $size_str );
    
    $des_file_name = getSourceImgSrc ( $file_path, $file_name ); //会员原始图片
    if (! file_exists ( $des_file_name )) {
        $width = $size_array [0];
        $heigh = $size_array [1];
        $src_file_name = getDestImgSrc ( $file_path, $file_name ); //生成目标图片
        $obj_image = new Tool_Image ();
        if (2 == count ( $size_array )) {
            //生成缩略图
            $result = $obj_image->make_thumb ( $src_file_name, $width, $heigh, $des_file_name );
        } else if (3 == count ( $size_array ) && 0 != intval ( $size_array [2] )) {
            //生成水印图
            $user_id = $size_array [2];
            $water_img = FILE_PATH . 'images/index/public/global/logo.png';
            $result = $obj_image->make_watermark ( $src_file_name, $width, $heigh, $des_file_name, $water_img, $user_id );
        }
    }
    loadImgFile ( $des_file_name ); //读取图片并显示
}
//更快的读取图片并显示
function loadImgFile($file_name) {
    $fp = fopen ( $file_name, 'r' );
    header ( "Content-type:image/jpeg" );
    fpassthru ( $fp );
    return true;
}
注：生成缩略图后需要程序读取显示出来。

五、相关文章
如果你感兴趣阅读到此，下面的文章你可能也想看。
Nginx做动态生成缩略图
http://cnctblog.com/?p=633
Abusing Amazon images
http://aaugh.com/imageabuse.html
基于MongoDB GridFS的图片存储
http://liut.cc/blog/2010/12/about-imsto_my-first-open-source-project.html

SWFUpload是一个基于flash与javascript的客户端文件上传组件。

1、handlers.js文件

完成文件入列队（fileQueued） →
完成选择文件（fileDialogComplete） → 开始上传文件（uploadStart） → 上传处理（uploadProgress） → 上传成功（uploadSuccess） → 上传完成（uploadComplete）  →
列队完成（queueComplete）

如上所示，单选文件顺序执行以上回调函数，需要注意的是选择多个文件，fileQueued、queueComplete只会执行一次，而fileDialogComplet...→ uploadComplete每个文件都执行一次。

参数file是一个javascript对象，其结构如下：
{
    id : string, //SWFUpload为队列中的文件生成的ID
    index : number, //文件的索引值，使用getFile(index)可以获取该文件
    name : string, //原文件名，不包含原文件目录
    size : number, //文件的尺寸，单位：byte
    type : string, //文件类型
    creationdate : Date, //文件的创建时间
    modificationdate : Date, //文件的最后修改时间
    filestatus : number, //文件在上传队列中的状态，可以使用SWFUpload.FILE_STATUS比较值
}

2、批量上传
上传文件只需要调用SWFUpload的startUpload函数即可，如果队列中有多个文件，调用startUpload()后只会上传第一个未上传的文件，要批量上传只要设置上传文件成功后，再次调用开始上传方法。
function uploadComplete(file) {
    if (this.getStats().files_queued === 0) {
        document.getElementById(this.customSettings.cancelButtonId).disabled = true;
    } else {   
        this.startUpload();
    }
}

3、文件上传限制
刊登时直接设置file_upload_limit参数即可以，
如果是修改物件，剩余上传文件数 = file_upload_limit - this.getStats().successful_uploads
回调函数swfupload_loaded_handler中设置如下，详细见handlers.js
var stats = self.getStats();
self.customSettings.has_upload_num = parseInt(self.customSettings.has_upload_num);         //已上傳文件總數(修改)
if (self.customSettings.has_upload_num > 0) {
    stats.successful_uploads = self.customSettings.has_upload_num;
    self.setStats(stats);   
}

4、demo
http://blog.uedao.com/demos/swfupload/demo.php

5、SWFUpload中文文档
http://leeon.me/upload/other/swfupload.html

根据前篇介绍的html5 websocket协议 ，用 python实现其服务端：
主线程专门监听客户端socket请求，成功连接后开启相应的子线程各自处理客户端socket事务。
子线程接收到数据后，解析指令并返回处理结果，如没有数据时每隔2秒输出系统时间给客户端。

你可以下 载完整代码 ，包括服务端server.py及客户端client.html文件。

#!/usr/bin/env python
#-*-coding:utf-8-*-

import os, sys, time, logging, traceback, ConfigParser
import socket, threading, select, struct, hashlib, signal

#全局配置
config = ConfigParser.ConfigParser()
config.read('config.txt')
HOST = config.get('server', 'host')
PORT = config.getint('server', 'port')

class WebSocketServer:
    def __init__( self, host,port ):
        self.host = host;
        self.port = port;

    def run( self ):
        self.srvsock = socket.socket( socket.AF_INET, socket.SOCK_STREAM ) #TCP套接字
        self.srvsock.setsockopt( socket.SOL_SOCKET, socket.SO_REUSEADDR, 1 )
        self.srvsock.bind( ("", self.port) )
        self.srvsock.listen( 10 )
        #指定端口监听请求
        while True:
            connection,address = self.srvsock.accept() #阻塞，等待连接
            self.socket_clients.append( connection )
            t = threading.Thread(target=self.handlechild, args=[connection]) #启动专门线程响应请求
            t.setDaemon(1) #True主线程退出不等待子线程
            t.start()
        self.srvsock.close() #关闭服务器套接字

    def handlechild(self,connection):
        self.dohandshake( connection ) #握手
        #长连接，响应请求
        while True:
            #数据接收
            infds,outfds,errfds = select.select([connection,], [], [], 2) #select扫描socket缓冲区，timeout 2s
            if len(infds) != 0:
                data = connection.recv(8196)
            if not data:
                data = time.ctime() #todo 解决中文
            connection.send('\x00%s\xff' % data)
        connection.close() #关闭客户套接字   

    def dohandshake(self, connection):
        pass #详细见完整文件

def main():
    logging.basicConfig(level=logging.DEBUG, format="[%(asctime)s] %(message)s")
    server = WebSocketServer( HOST,PORT )
    server.run()

if __name__ == "__main__":
    main()

使用方法：
服务端执行：
d:\local\Python27\python.exe d:\htdocs\html5\websocket\server.py
/usr/local/python/bin/python2.7 /home/htdocs/html5/websocket/server.py
浏览器查看：

http://localhost/html5/websocket/client.html

运行截图：

参考资料：
实现参考

http://code.google.com/p/phpwebsocket/

http://site.douban.com/widget/forum/33650/discussion/37917149/

python socket编程简单实例讲解

http://hi.baidu.com/cly84920/blog/item/0f384c82cc89c5af6d8119ac.html

握手另外方法见

http://hi.baidu.com/cly84920/blog/item/4ae5a38d94f37102b21bba18.html

select实现非阻塞socket

http://kanhua.blogbus.com/logs/77135233.html

参考网上的资料，成功跑起来的代码(下载完整代码 )

实现的功能 ：nodejs建立web服务器，实时输出“iostat -c 2”的结果，客户端发送命令时，输出请求的命令。
完整的代码或使用方法请参考压缩包裡的iostat-server.js文件及注释。

websocket protocol是html5一种新的协议(protocol)。实现了浏览器与服务器全双工通信(full-duplex)。
相比传统http有如下好处：
* 一个web客户端只建立一个tcp连接
* websocket服务端可以推送(push)数据到web客户端.
* 有更加轻量级的头，减少数据传送量，互相沟通的header是很小的-大概只有2 Bytes。

websocket客户端与服务端建立连接的过程：
客户端创建websocket实例，发送如下握手信息连接服务器：

Tue Jul 19 15:52:17 2011
GET / HTTP/1.1
Upgrade: WebSocket
Connection: Upgrade
Host: localhost:8088
Origin: http://localhost
Sec-WebSocket-Key1: 3106 2 + 9 3 n. 17 c /k 0 +
Sec-WebSocket-Key2: 279  90/1  4 38 2

哑V}

服务器断获取包后，提取总长度为20的sec-websocket-key，进行如下计算：把以上字符串转化成数字，然后计算key中的空格数目，并用 key值除以空格数得到最后key值。
最后发送包含以下信息的head给client，完成握手。

Tue Jul 19 15:52:17 2011
HTTP/1.1 101 Web Socket Protocol Handshake
Upgrade: WebSocket
Connection: Upgrade
Sec-WebSocket-Origin: http://localhost
Sec-WebSocket-Location: ws://localhost:8088/
Sec-WebSocket-Protocol: sample

^QNW阶廃舒?畐

具体的ws协议，可以参考： http://tools.ietf.org/html/draft-hixie-thewebsocketprotocol-76

客户端在握手成功后，客户端的websocket对象一共绑定了四个事件：
* onopen 建立连接后触发
* onmessage 收到消息后触发
* onerror 发生错误时触发
* onclose 关闭连接时触发
详细的websocket API，可以参考： http://dev.w3.org/html5/websockets/

通信数据都是以”\x00″开头以”\xFF”结尾的，并且都是UTF-8编码的。注意客户端的websocket对象能够自动将头尾去除，获得主 体数据.

node.js 天生就是一个高效的服务端语言，可以直接使用 javascript直接来处理来自客户端的请求，这样如果服务端这边需要大量的业务逻辑开发，则可以直接使用node开发。

运行效果如下：