练手项目:BullShit 聊天室(第一天)

接到关于毕业设计的一些课题,在其中看到不少可以尝试的项目,电子商城,网络聊天室等等。在课上也挺无聊的,就开始尝试写了个网络聊天室的小 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才可以。

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