chatpage web应用
由于上班时就坐在领导眼皮底下，玩手机不方便，而网页版的聊天软件如微信甚至有道云笔记都被屏蔽了，而自己前段时间在阿里云买了域名做了个网站，所以想顺便依托这个网站做一个网页版的聊天应用，一方面方便跟媳妇聊天，一方面也锻炼下自己的编程能力。
想实现的功能如下。
基本功能
- 可输入消息点击发送，消息会实时显示到聊天窗口里。
- 聊天窗口每隔一定时间自动刷新一次，读取各用户发送的消息并显示到聊天窗口里，也可手动刷新。
- 消息按发送的时间顺序进行排列。
- 聊天窗口最多显示10条消息，多于10条时会自动删除旧的消息。
- 打开该网页时会自动加载历史消息显示到聊天窗口里。
高级功能
- 历史消息记录不会被删除，可通过鼠标滚动查看历史消息，并实现翻页功能。
- 消息记录能显示发送时间。
- 可更改基本的字体格式如加粗、斜体、颜色等。
- 可发送一些基本的表情图。
- 实现登录界面，并实现用户名和密码的本地存储，下次加载时自动登录。
前后端通吃实在太辛苦，我最终耗费了很长时间但也只是做了个半成品，基础功能能实现，但高级功能实在没心力做下去了，而且在移植代码的过程中由于阿里云的域名绑定的数据库是sql server2008，而我一直都是在用wamp环境开发的，两个数据库在PHP里的函数是不一样的，代码得重新修改，嫌麻烦就不移植到网站上了，就在本地玩玩吧。而且也想再提高一下自己的姿势水平之后再来啃这块骨头，就放弃了，顺便把自己在过程中的经验分享在下面吧。
Tip1:前台如何提交数据给后台？
对于表单而言有两种方式:
方式一是直接设置一个type值为submit的input表单元素，点击该按钮会自动将整个外层form表单里的数据打包格式化后以键值对的形式提交给后台。
方式二是用ajax提交数据，这个时候要用到ajax函数？（jquery里是$.post()/$.get()，原生的不记得了），并且可以在参数里附加上要传的信息（是不是不附加的话就不传了还是会默认按照表单提交的方式传？应该是后一种）。
Tip2:后台如何接收前台提交的数据？
后台要识别这些数据也很简单，直接用$_GET或$_POST或$_REQUEST方法将不同表单元素的value值提取出来就行了，如$content=$_POST["content"];中括号中的content是表单各元素的name名。
Tip3:后台如何处理接收的数据？
将得到的数据进行提取后（可以部分提取），先赋值给php变量，然后对这些变量进行操作，一般情况下都是数据库的操作吧，收到的这些值可以跟数据库进行交互，比如存储到数据库里，或者根据这些数据的情况提取数据库中某些需要的信息。
Tip4:后台如何输出数据给前台？
接收到了前台的数据后，总要给前台点反应，数据用echo输出，但首先要在header里定义输出数据的格式，是html还是json?html包含了html片段和xml格式，而且还要注意输出数据的格式化，尤其是json，一定要先用encode()格式化后再输出给前台。
Tip5：前台如何接收后台返回的数据？
后台echo的值会自动返回给前台，数据存在xhr对象（如果我没记错的话）的data里，如果你是用的方式一提交的数据，就要自己去xhr.data里面找，如果你是用的ajax方式，就直接把data传递给回调函数处理就好了。
Tip6：前台如何处理接收到的数据？
在回调函数里先把格式化的数据解析，解析完后再通过for循环处理即可，如果用的不多，还可以直接用var data=JSON.parse(data),data.name,data.content提取想要的数据。提取这些数据后，是要显示在页面上还是怎么样，就看你自己了。
Tip7:Php和mysql数据库的常用函数
连接数据库mysqli_connect()
选择数据库mysqli_select_db()
设置编码值mysqli_query(set names as utf8)
执行sql语句mysqli_query()
获取和显示数据4个fetch函数mysqli_fetch_row/array/assoc/
mysqli_result
echo和print_r打印数据
foreach函数循环数组
if语句while语句条件判断
抛出错误mysqli_error
另外要知道mysql开头的函数是低版本的，现在基本都是mysqli开头的，这两者的区别就在于后者要多一个必选参数，就是连接标识符。
Tip8:实践经验
有一个问题一定要好好说一下，就是php到底是怎么把数据传递给js的，更具体点说是用什么语句把数据传递给js中回调函数的data的，为什么有时候data里什么内容都没有（全是object,object,object），有什么时候会有一个开头的一长段代码，后面才接着我echo的东西。</br>
首先，可以明确一个问题，那就是在php里面输出数据是用echo，而且只能是echo，不能是print_r，这个会直接在页面上打印东西，而不是传递数据用（好像是这样，不太确定，只是因为同样的情况我用echo行，用print_r就 不行。</br>
但它们之间还有个差别就是echo和print_r，前者是语法结构，后者是函数，echo就像是js里的var是语法结构（所以可以用逗号分隔，同时输出多个变量），而print就是js里的alert是函数（所以要用括号，不支持逗号分隔，但能显示如数组、对象等复杂变量类型）），这一点不用怀疑，所以有时候echo不出东西来的时候，先要怀疑不是echo本身这个关键字选错了，而是你php里的语法和变量是否有问题，比如如果是echo变量，那就不用加双引号，如果是echo字符串，那就要加双引号，如果字符串本身还带引号，那就要跟外层的引号保持相反（比如外层是双引号，里面就得是单引号，外层是单引号，里面就是双引号。</br>
另外还要注意一个问题就是如果用单引号包裹字符串或者变量，那么不管里面是啥，打印出来都是字符串，比如echo ’$name’，那么出来的就是$name，而双引号出来的就是$name本身的值，换句话说就是双引号会执行变量，而单引号不会。），另外语句结尾的分号也别忘了（有说如果该语句是Php里面的最后一条语句，就不用加分号，但我尝试了下，似乎没什么变化。）。</br>
如果语法也没问题，那就再看看变量有没有问题，比如如果header里面是json格式的，那你就要用encode函数先把变量格式化，然后再用echo输出，直接输出肯定乱码或有各种问题，尤其是json格式，要求特别严格，稍微有点问题都不行，不然就会在JSON.parse()部分解析报错，当然你可以在这条语句之前alert一下返回的data是可以判断后台返回的东西到底是啥（建议每次从后台接收到东西时都第一时间alert一下看看到底是什么玩意儿，通过这个就大致能判断到底出了啥问题。如果全是object，那多半是用错了语法，如果是乱码，那多半是没有格式化。）。</br>
如果alert出来的data没有问题，那就是前台js部分的问题了，是不是解析语法有问题，是不是变量名搞错了，没有经验之前直接用最原始的办法一步一步alert吧，别用什么console.log()了，太麻烦，还要打开F12，还不如一键alert，一个一个变量的来，排除法，谁出了问题就找谁。
Tip9:如何实现鼠标滚轮滚动查看历史消息？
设置聊天窗口的overflow属性为hidden即可。（实际上这样做是没用的，附加的<p>标签仍然是按照添加的时间顺序从上到下排列，下面溢出的部分就直接不可见了，不会出现什么滚动条。）
</br>其实可以以另外一种方式实现，即不用div标签包裹<p>，而是用文本区域<textarea>代替，或者将<p>替换成<textarea>，因为<textarea>自带滚动条。
</br>但实际上最终我实现的是另一种功能，在发送消息时，页面上最多显示10条，超过10条时，将第1条删除，保证页面上始终只显示后10条消息。而点击刷新时，虽然会将数据库里的消息记录全部读取出来，但在浏览器里面显示时只会显示后10条。</br>
用一个if语句，当<p>元素的数量大于10时，删除索引小于10的<p>元素。（这条语句我包裹在了刷新事件的回调函数里，这样做其实不太妥，耦合太强了），而且判断p的数量时我用的是$(“chatpanel”).children().length，也就是外层容器的子元素的数量，我一开始想用$(“p”).length，发现不行，老是返回0，后来才转用children函数的，后来发现直接用length不是不行，而是我把这条语句直接放在$(“#chatpanel”).html()这条语句之后执行了，那当然每次都是0了。
至于如何删除在发送消息时删除第1条以及如何在刷新时只保留后10条，我分别是这么做的，发送第11条消息时，我先做一个p元素数量的判断，如果大于10，那么删除索引小于1的p元素$(“p:lt(1)”).remove()，其实也可以删除div的第一个子元素$(“#chatpanel:first-child”)，这样性能上应该优化一点。</br>
另外对于刷新时保留后10条，方法一样$(“p:lt(10)”).remove()，但其实这样效果不好，先绘制DOM再删除DOM，相当于多了一步无意义的操作，可以在for循环里添加DOM节点时前置一个条件判断，如果p元素数量小于10才添加，大于10就直接停止并跳出循环，使用return语句即可。为了保证显示顺序添加DOM节点时不要使用append，而是使用insertbefore。
Tip10:如何在一个php文件里同时实现写入和读取数据的功能？
可以在POST发送一个act:"add" ，并通过在PHP里定义$act = $_GET["act"];//接口请求标识以获取act的值，如果值为add，就往数据库里添加消息，如果值为read，就往数据库里读取消息，在php里用if…else语句实现即可。（或者switch...case）。</br>
可以这么做，这一段其实也告诉了我们要将数据从前台传递到后台，还是很容易的，只要在发送的花括号号里面{}按照键值对的方式添加就行了，发送多少都行，如果实在太多，还可以直接发送一个json格式的变量（应该吧，没试过），后端php接收后可以先用decode解析下，然后再循环这个值获取自己需要的数据。
