把留言板改造为一个即时通讯工具

留言板给我留下了深刻的印象,那时跑装修业务时,有空总喜欢到搜房的装修论坛去发帖子。随便写几句话，选择几个图片，点击“发送”按钮，自己写的图文即刻在页面显示出来了。这样逛论坛的人都可以看到自己发表的文章。

后来看了点HTML和PHP网页设计方面的书才明白，留言板其实很简单，不过是个表单页面。自己也搞过一个简单的留言板点击查看。留言板一般需要数据库的支持，一个留言表的字段设计大概这样：id,content,hasimg,author。分别表示唯一主键、留言内容、是否含有图片以及留言者。

再后来看到一些即时通讯的文章和教程感觉就复杂了。最先看到有java的socket方面的教程有讲，套接字应用必须在服务端和客户端的应用采用同一种语言来编程。我申请的一个虚拟主机是PHP的，这样明显就是一个限制了。又了解到有网易IM、环信即时通讯什的，反正是别人写好的框架或接口。（QQ微信这些就不说了）

想了一下自己实现也可以，就用虚拟主机都支持的PHP，从留言板开始改造，一步一步实现即时通讯功能。先说一下用户表，不管是留言板还是即时通讯，都会提供注册功能来收集一些用户信息，这也是实现即时通讯的基础。用户表的字段设计大概这样：id,username,password,email,logtime,outtime,isline这几个主要的字段，当然要实现丰富的功能用户表可能会很复杂。id字段和留言表的id相同，username是注册的用户名，password是注册的密码，email是电子邮箱，logtime,outtime分别表示登录时间和退出时间，isline表示是否在线。

首先即时通讯要确定一个聊天的对象，这样要把用户列表罗列出来。查询用户表就行了，可是我们要聊天肯定要找一个在线用户，所以用户有没有在线必须明确区分开来。我们能够立刻想到需要设置用户状态的时候就是登录和退出，点击登录时设置用户状态在线，点击退出时设置用户状态离线。不过不要忘了用户的登录和退出是一个动态的过程，所以用户列表的页面需要随时监测到用户的登录和退出。这样我们能够想到的是让这个页面自动刷新，一秒钟一次总可以了吧。网页自动刷新的方法很多，比如使用JavaScript的location对象的reload()方法。

到了这里我遇到了第一个难点，用户有没有在线确实实时检测出来了，但是页面出现了闪烁，每秒一次的闪烁确是让人难以接受的。我想到用框架(iframe)去加载用户列表，还是一样闪烁,只不过换到页中框架的部分了,同样是让人难以接受的。在网上搜解决方案，还是要用ajax。ajax页面局部刷新技术，要解决页面的闪烁还非它不可(至少我没找到其他方法)。

   

本来想插入一些代码的，搞不来这个代码编辑，代码全变成乱码了，不管继续写。搞定了显示全部用户和在线用户后，就要进入聊天界面的编写了。还是看看聊天界面是怎么打开的，当我们点击用户界面中用户列表中的某个在线用户名时，这时应该打开聊天界面，注意，这个聊天界面应该新打开一个标签页，不应该把用户列表的界面给覆盖了，这样我们还可以跟其他用户聊天。打开新标签页应该用JS的window.open(url)方法，不过考虑到一些浏览器会阻止window.open方法打开的窗口，因此我用的是a标签加上target="_blank"属性来打开一个新标签页面的聊天窗口。

先说说聊天窗口界面，基本结构分两部分，上大半部分展示聊天的内容，下小半部分是一个输入标签和表单的submit提交按钮。聊天内容的设计方法很多，我用的简单的p标签，使用两种样式，一种显示自己发言的内容用的是文字坐对齐；另一种是对方的发言,用的是文字右对齐，这样有个区分。

再就是聊天内容了，展示的是自己上次退出登录后对方发过来的内容，这就是用户表中要设计登录时间和退出时间的原因了，就是用来限制查询聊天记录。后面还要讲到设计一个标记，就是登录以后用来标明哪些人跟自己发来了信息。这个其实也就是个数据库查询。最后聊天界面也需要自动实时刷新页以接收最新消息，这个用的也是ajax，有了前面的用户列表刷新，这里就简单了。

最后谈一下，用户没有点击退出直接关闭页面或浏览器就下线。首先想到的是unload事件，但我发现这个浏览器兼容不好，所以我用的是beforeunload事件，不过还是发现了“奇葩”，总的说比unload好多了。先说谷歌和火狐浏览器必须在页面操作一下，比如点击一下按钮或选中一下文字然后关闭或刷新网页才会触发beforeunload事件；如果一打开网页没有任何操作就刷新或关闭网页则不会触发beforeunload。IE(我的版本是11)不管有没有操作网页，第一次刷新或关闭网页均会触发beforeunload事件，但是只要做了刷新操作再次刷新或关闭就不会触发卸载前事件了。注：这里说触发均指执行beforeunload事件指向函数中的代码。

结论：能即时自动刷新的留言板即是即时通讯工具。如果您觉得这篇文章对您有所启发欢迎给我打赏。我以后有更多动力写更多文章。