文章有点长，介绍了Channel的综合应用, JQM的动态加载、滚动刷新，Scala语言的特性(不管童鞋们今后搞不搞scala，Java8的新特性多多少少和scala类似)，和一些简单的设计模式和编程范式。希望大家能和Leonard能对此进行交流，并为SAE加油(SAE的服务真的很好，至少对比那么多家cloud platform后，SAE还是不错的)。

在此之前，已经有很多大牛写了关于channel介绍、配置和开发的文章了，请参考：http://cloudbbs.org/forum.php?mod=viewthread&tid=20008&highlight=channel
http://cloudbbs.org/forum.php?mod=viewthread&tid=19791&highlight=channel等，这里不再叙述。

App和手Q类似，登录，发消息等，功能较简单，界面也参考了手Q，只不过现在我们要用的是channel来实现。先看youku上的在window chrome的演示。App目前也仅支持Chrome(因为用了websql)
视频地址
http://v.youku.com/v_show/id_XNjYwNDcwOTQw.html
http://v.youku.com/v_show/id_XNjYwNDc1NTg4.html
http://v.youku.com/v_show/id_XNjYwNDQ0MjM2.html

APP地址
http://pabushai.sinaapp.com/page/
下面开始介绍，app使用了多种不同的技术，不过我们还是重点讨论Channel，以免跑题（考试作文跑题可是没有分的啊！！！）。
因涉及到的代码有点多，Leonard就不打算以各个代码结构为单元的方式叙说，而采用功能流程的方式，即代码走到哪里，我们就讲解哪里，这样容易串起来。OK，Let’s begin!

1. 总体结构

1.1 DB

用户表：
 
关系表：
fromUserNum就是自己的num，toUserNum 就是好友的num，toUserNumAlias就是我们对好友设置的别名。

好友分组表：
Num是自己的用户名，listName是好友分组名（这是早期的属性名，其实应该叫friendGroupName。。。。）。
 
关系和好友分组对应表：
toUserNum就是好友的num，listId就是imFriendGroup的id字段。一行记录即代表这个好友在哪个分组里。(其实toUserNum也可以换成关系表的id，但Leonard为了查询方便就这样设计了)
 
通讯消息表：
isRead为”1”时，表示已发送到对方的client端；为”0”则未发送。
msgUuid，是唯一标识这条记录的，会用到它来update这条记录。但id字段也可以唯一标识，曾经考虑要不要去掉msgUuid。不过先这样吧，以后再看。
 
好友请求消息表，结构和通讯消息表差不多。
 
这里就不用什么ER图和UML了，结构很简单。

1.2
projects
 
LeoWebAppServer是web工程，就是我们存放servlet等的地方。
LeoEntity是实体类，其他工程都用到。
LeoDao是进行DB持久化的工程。
LeoAction是进行request处理的地方。
CordovaExample是一个phonegap工程，本身此APP是一个phonegap项目，不过现在以web的形式部署。其实只要以phonegap形式打包，此APP就摇身一变变成Android或iOS app了，但此本文不会描述该工程，在这里提到只是想说明我们的web工程也可以灵活地转为Android或iOS app，使用手机的拍照、geolocation、摇一摇等多项有趣的功能，又多了一个选择。
工程的大概调用流程：浏览器->LeoWebAppServer->LeoAction->LeoDao->DB，而LeoEntity被各个工程引用。

1.3
用到的技术
Browser端：iScroll + jQuery + jQueryMobile + webSQL/IndexedDB + SAE Channel client lib + etc
Server端：scala + java + SAE Channel server lib
DB: mysql

1.4
主要功能
注册，登录，好友查找，聊天，心跳和断线重连，消息查看等

1.5
主要特色
实时消息、动态加载、滚动刷新、浏览器本地存储、消息提醒气泡。

2. 登录功能

2.1 登录页面
index.html

2.2
点击登录，获取channel URL
从index.html我们可以看到，登录实际上是调用leo.leoChannel.loginServer($('#num').val(), $('#pwd').val(), true);
我们看一下类leo.LeoChannel：
clientActionChannel.js
leo.LeoChannel负责连接server，收、发消息，就是和server通信的类。
loginServer方法中，对当前的连接状态作了一些判断，实际上调用的是connectAndThenLogin和getChannelUrlAndConnect方法。
在getChannelUrlAndConnect方法中，我们用Ajax调用LeoWebAppServer工程的一个servlet，该servlet会新生成一个channel URL，供浏览器连接到该channel。

2.3
生成channel URL
SaeChannelUrlCreator.java

重点看CreateSaeChannel方法，先以UUID作为channel的name来生成一个channel， 然后new一个SaeChannelWrapper，把channel对象塞进去，最后是以JSON的方式把channel URL返回给browser。

2.4
快递SaeChannelWrapper
SaeChannelWrapper.java

我是专门负责收发消息的…快递….??。
这个类包含了channel，用户信息等属性。先提到注意下onTextMessage方法，我们用channel发送消息的时候，会调用该方法，也就是说这个类是收发消息的，很简单，大家不要搞复杂了。
SaeChannelUrlCreator中调用了onopen，中间用到了LeoSocketManager，我们接下来研究他。
2.5
快递的头儿LeoSocketManager
LeoSocketManager.scala

我是管理你们这些快递的头，想拿奖金就得多送点快递。不过我们过年停业：）。
不好意思了各位Javaer，Leonard要开始讲Scala代码了。没搞过？不用怕，它们语法很像，也是编译为byte code在JVM上执行。
(插个题外话，嫌长可略过。选择Scala是因为它的flexibility，强大的语法，模式匹配，虽然TIOBE世界编程语言排行榜三十多位，但论静态编译性和执行性能，它绝对是Java在JVM上候选语言的前列。学习scala的同时还能掌握functional paradigm（函数式编程范式）。Java8其实多少也借鉴了Scala。Leonard在开发的过程中也是在学习scala，如果有scala高手还请提些建议)。
此快递头儿有三个主要的属性，实际上都是Map集合：
1)loginSockets：凡是登录成功的用户都放进来，key为user num(登录页面输入的用户名)，value是一个IImSocket的Set集合，为什么是set? 意思是可以保存多个快递channel，一个用户可进行多次登录，向此用户发消息则所有的channel都能收到。要想唯一性登录，在登录时判断一下就好了，设计成set是想具有灵活性。
2)rawSockets: 连接了channel但未登录成功的用户都放进来，类型为set。很少用。
3)Channels：专门为SAE channel新建的Map。在Leonard用SAE channel前，此APP是用websocket实现的，并且loginSockets是以user num为key。但用了SAE channel，不能以user num为key了，因为不唯一，因此Channels 的key为channel name(即UUID)，value为抽象接口快递IImSocket(SaeChannelWrapper实现了此IImSocket接口)。
提升：目前此快递头是住在我们普通的内存里，并且使用了synchronized来同步操作，这样并不好。后边打算使用SAE的KVDB，有这方面的专家还请不吝赐教。

2.6
Channel URL回到客户浏览器
好了，server返回了Channel URL，并且该缓存的channel都缓存了，也初始化了，下来又该JS活跃了。
clientActionChannel.js
继续getChannelUrlAndConnect方法。在success回调方法中，有2行代码：socket = esto.CreateSocket(e.url); esto.setHandlersForSocket(obj);
第一行实际上就是调用sae.Channel(url); 并赋值给socket变量(socket就是channel，一个东西)。因为之前是用websocket来new window.WebSocket(_url)，所以做了抽象，不直接调用SAE API。
第二行是对socket变量进行事件回调配置。
后续：
一个基于SAE Channel的综合应用--mobile web IM（2）
http://cloudbbs.org/forum.php?mod=viewthread&tid=20301

一个基于SAE Channel的综合应用--mobile web IM（3）
http://cloudbbs.org/forum.php?mod=viewthread&tid=20302

一个基于SAE Channel的综合应用--mobile web IM（4）
http://cloudbbs.org/forum.php?mod=viewthread&tid=20304