http://blog.csdn.net/sexy_squirrel/article/details/53817829
http://www.imooc.com/opus/resource?opus_id=254&tree=%2Fjs%2Fcomments.js
Chatpage web应用
实现功能:
基本功能
- 聊天消息可自动刷新,实现实时聊天。
- 以POST方式提交表单,在发送数据里定义3个字段,name/content/timestamp(时间戳)。回调函数的功能为将返回的JSON数据解析为字符串,并创建文本节点append到聊天窗口里。可以另外定义一个创建节点的函数。
- 每提交一次消息,就把这条消息存储到数据库中,数据库设置4个字段id(auto-increment,primary)/name/content/time,同时回调函数将此消息显示到聊天窗口中(这一部分已经能够比较轻易的实现了)。
- 可以定义一个从数据库读取消息的函数,定时调用,或者通过轮询的方式,一旦有新消息记录出现在数据库里,就读取该条记录并展示到页面上。关键就是如何判断数据库里有新消息出现,通过数量来判断(id的值)吗?可以在POST发送一个act:"add" ,并通过在PHP里定义$act = $_GET["act"];//接口请求标识以获取act的值,如果值为add,就往数据库里添加消息,如果值为read,就往数据库里读取消息,在php里用if…else语句实现即可。(或者switch...case)
- 综上,有3个函数要写,一是ajax提交表单的事件回调函数,二是将消息显示到聊天窗口的函数,三是从数据库中读取消息的函数。
- 同时为了提高容错率,可设置一个手动刷新按钮,点击可直接读取消息记录,可耦合一个read的act值。
- 可通过鼠标滚动可查看历史消息。
- 设置聊天窗口的overflow属性为hidden即可。
高级功能
- 消息记录能显示发送时间。
- 能发送几个简单的表情图片。
- 可以更改字体颜色。(可设计一个颜色切换键,点击可切换颜色)
- 消息显示时能按昵称分左右对齐显示。(此条较难,暂时没有思路)
- 实现登录界面。
- 载入页面时能读取数据库中所有消息记录,可以点击清空按钮清除所有消息记录。