接到关于毕业设计的一些课题，在其中看到不少可以尝试的项目，电子商城，网络聊天室等等。在课上也挺无聊的，就开始尝试写了个网络聊天室的小 Demo。

1. 设想

用一个页面 不断从数据库读取内容（用户消息），并对每一条记录进行排版。先做出后端的逻辑，然后补上前端。

预想程序效果

2. 实现

2.0 数据库的搭建

没有做过专业的表结构分析- -所以只能想到哪儿做到哪儿

简单的不能再简单的表结构

2.1 用于接受数据并排版，然后嵌入在用户聊天界面的页面News.jsp

这个页面的主要功能就是接受数据库里的信息，然后排版遍历输出，之后利用iframe嵌入用户聊天的界面中。

说归说实际实现起来真的惨不忍睹

  • 第一版：在页面中直接使用JDBC连接数据库，对获取到的结果集遍历生成HTML代码，之后使用JavaScript计时器不停的刷新页面得到最新的数据库结果。
    我一定要吐槽这种写法真的很傻 *，后面嵌入到用户界面闪闪闪个不停，并且滚动条完全没法拖动。
  • 第二版：为了解决局部刷新，学习了AJAX，同时也重写了之前的页面，将大部分Jsp代码都写进了Servlet中，不管怎么说至少我觉得舒服多了吧。

News.jsp 第二版

说明：页面结构里本身什么都没有，页面加载之后启动JavaScript的计时器开始执行Ajax,Ajax发送请求到GetNewsServlet中，在GetNewsServlet中完成对数据库的遍历并将生成的代码发送回来，之后写入到页面。

GetNewsServlet

说明：这一版本也没有见多好= =！只是学了点Ajax之后，可以处理异步刷新了，至少不会闪啊闪的刷新了。

2.2 用户界面页

说来界面页应该做好前端的……但是此时的我却一句 CSS 都没写_(:з」∠)_

先分析一下功能：这个页面主要功能有两个，第一是显示聊天记录；第二则是发送聊天内容。功能一需要的是嵌入之前的网页，而功能二则是往数据库中插入记录。

事实上因为写这个页面的时候什么也没想，这个页面的版本还真挺难算的……

  • 第一版：最最最最最最最最无聊的垃圾代码，重复了 80% 的 jdbc 代码（剩下 20% 是把Statement换成了PreparedStatement）,使用表单传数据然后为了处理插入数据库的操作还专门写了一个Seeding.jsp的页面。
  • 第二版：前面已经写了获取Connection对象的工具类以及消息对应的实体类。此处又再前者的基础上增加了一个用于插入数据库的SendNewsServlet类。

相比遍历时的内容这里就相对比较简单了

页面里的ajax还是要说一下的，一开始目的很纯粹只是发送数据到对应的Servlet，因为没有做规划所以当时的用户名用的是String UserName="用户",之后扔到服务器上消息的显示着实不清晰，于是去找了个简单的接口获取 IP 地址和归属地

1
2
3
<script src="http://pv.sohu.com/cityjson?ie=utf-8"></script>
var ip=returnCitySN["cip"];//获取 ip
var address=returnCitySN["cname"]//获取地址

之后的用户名就用这个来代替了，不过后续加入用户系统之后，这个肯定就不用了。

用户名

3. 细节处理

其实写到这里这个小项目的主要功能已经停止了，但实际上我确实不认为这样一个东西能算的上项目，所以在做完前端和细节的处理之后，这边我打算完善其它功能，例如在线人数，一对一私聊等等。此处先处理一些比较严重的细节。

3.1 滚动条

问题描述：如上设计中比较硬伤的一个问题是，用户每一次接受到信息的时候，滚动条的位置都是在最顶部，那么使用起来非常不方便甚至会使用户产生没有新消息的错觉。

解决方法：获取iframe连接的页面，然后设置滚动条高度为实际内容高度

1
2
var x = $("#News_iframe")[0].contentWindow.document;
$(x).scrollTop($(x).height() + 56);

但这里的问题并没有完全解决，我把这段代码放在了用户发送信息时的JavaScript中，这样每一次用户发送数据都可以看到最新消息。然而其它用户在接受到消息的时候并不会触发这段代码，因此其它用户的消息框滚动条并不会产生改变。如果将代码放入接受消息的计时器中，则又会产生计时器执行过快导致页面一直被迫显示最底部，翻阅了一本教材里的项目案例《精彩人生聊天室》，发现其代码使用的是News.jsp版本一的写法，也就是那个闪瞎眼的写法，叫人无力吐槽。

2.2 按键绑定

问题描述：在发表消息时出现了一个问题是有时候能发送有时候却不能发送，仔细排查发现是有时候无意识的用鼠标单击发送按钮，而有时候又是按的enter键

解决过程：一开始没有多想，找了一些关于按键绑定的内容看了一下，给发表按钮做了按键绑定。

1
2
3
4
5
$(document).keydown(function(e) {
	var eCode = e.keyCode ? e.keyCode : e.which ? e.which : e.charCode;
	if (eCode == 13)
		ajaxFun();
	})

经过以上处理之后发现，按键检测的内容可以触发，但消息依然无法发送，并且有明显的刷新迹象。随机考虑到Submit按钮与Enter键似乎本身有绑定，加上此环境下本身就不需要表单，于是删除了页面中的表单并修改按钮类型为button，问题解决。

3. 版本管理

之前已经在服务器上装了 Git 了，不过多赘述了。

4. 心得

在一天时间里去做了这样一个小练手个人还是蛮开心的，首先不管怎么说学到了东西，今后的开发过程中ajax是必不可少的，而获取IP的接口也非常有趣。

同时这一天也暴露了非常多的问题，首当其冲的应该是开发没有规划，大量代码的重写浪费了一些时间。其次是JavaScript的基础非常有问题，正如我之前文章里所说的一样：“在我尚未很好的掌握 js 的时候，有一件更可怕的事情那就是我已经用上 jQuery 了”，这一点令我比较担忧，有时间的话还是要更熟练的掌握原生JavaScript才可以。

之后的几天里打算完善功能，然后心思就可以放在前端上了……

许可协议

本文采用 署名-非商业性使用-相同方式共享 4.0 国际 许可协议，转载请注明出处。