2018年10月15日
接到关于毕业设计的一些课题,在其中看到不少可以尝试的项目,电子商城,网络聊天室等等。在课上也挺无聊的,就开始尝试写了个网络聊天室的小Demo。
一、Demo
设想:用一个页面 不断从数据库读取内容(用户消息),并对每一条记录进行排版。先做出后端的逻辑,然后补上前端。
预想程序效果
实现:
1.0数据库的搭建
没有做过专业的表结构分析- -所以只能想到哪儿做到哪儿
简单的不能再简单的表结构
1.1用于接受数据并排版,然后嵌入在用户聊天界面的页面News.jsp
这个页面的主要功能就是接受数据库里的信息,然后排版遍历输出,之后利用iframe
嵌入用户聊天的界面中。
说归说实际实现起来真的惨不忍睹
-
第一版:在页面中直接使用jdbc
连接数据库,对获取到的结果集遍历生成HTML
代码,之后使用JavaScript
计时器不停的刷新页面得到最新的数据库结果。
我一定要吐槽这种写法真的很傻*,后面嵌入到用户界面闪闪闪个不停,并且滚动条完全没法拖动。
-
第二版:为了解决局部刷新,学习了Ajax
,同时也重写了之前的页面,将大部分Jsp
代码都写进了Servlet
中,不管怎么说至少我觉得舒服多了吧。
News.jsp第二版
说明:页面结构里本身什么都没有,页面加载之后启动JavaScript
的计时器开始执行Ajax
,Ajax
发送请求到GetNewsServlet
中,在GetNewsServlet
中完成对数据库的遍历并将生成的代码发送回来,之后写入到页面。
GetNewsServlet
说明:这一版本也没有见多好= =!只是学了点Ajax
之后,可以处理异步刷新了,至少不会闪啊闪的刷新了。
1.2用户界面页
说来界面页应该做好前端的……但是此时的我却一句CSS都没写(:з」∠)
先分析一下功能:这个页面主要功能有两个,第一是显示聊天记录;第二则是发送聊天内容。功能一需要的是嵌入之前的网页,而功能二则是往数据库中插入记录。
事实上因为写这个页面的时候什么也没想,这个页面的版本还真挺难算的……
-
第一版:最最最最最最最最无聊的垃圾代码,重复了80%的jdbc代码(剩下20%是把Statement
换成了PreparedStatement
),使用表单传数据然后为了处理插入数据库的操作还专门写了一个Seeding.jsp
的页面。
-
第二版:前面已经写了获取Connection
对象的工具类以及消息对应的实体类。此处又再前者的基础上增加了一个用于插入数据库的SendNewsServlet
类。
相比遍历时的内容这里就相对比较简单了
页面里的ajax
还是要说一下的,一开始目的很纯粹只是发送数据到对应的Servlet
,因为没有做规划所以当时的用户名用的是String UserName="用户"
,之后扔到服务器上消息的显示着实不清晰,于是去找了个简单的接口获取IP地址和归属地
<script src="http://pv.sohu.com/cityjson?ie=utf-8"></script>
var ip=returnCitySN["cip"];//获取ip
var address=returnCitySN["cname"]//获取地址
之后的用户名就用这个来代替了,不过后续加入用户系统之后,这个肯定就不用了。
用户名
二、细节处理
其实写到这里这个小项目的主要功能已经停止了,但实际上我确实不认为这样一个东西能算的上项目,所以在做完前端和细节的处理之后,这边我打算完善其它功能,例如在线人数,一对一私聊等等。此处先处理一些比较严重的细节。
问题描述:如上设计中比较硬伤的一个问题是,用户每一次接受到信息的时候,滚动条的位置都是在最顶部,那么使用起来非常不方便甚至会使用户产生没有新消息的错觉。
解决方法:获取iframe
连接的页面,然后设置滚动条高度为实际内容高度
var x = $("#News_iframe")[0].contentWindow.document;
$(x).scrollTop($(x).height() + 56);
但这里的问题并没有完全解决,我把这段代码放在了用户发送信息时的JavaScript
中,这样每一次用户发送数据都可以看到最新消息。然而其它用户在接受到消息的时候并不会触发这段代码,因此其它用户的消息框滚动条并不会产生改变。如果将代码放入接受消息的计时器中,则又会产生计时器执行过快导致页面一直被迫显示最底部,翻阅了一本教材里的项目案例《精彩人生聊天室》,发现其代码使用的是News.jsp
版本一的写法,也就是那个闪瞎眼的写法,叫人无力吐槽。
问题描述:在发表消息时出现了一个问题是有时候能发送有时候却不能发送,仔细排查发现是有时候无意识的用鼠标单击发送按钮,而有时候又是按的enter
键
解决过程:一开始没有多想,找了一些关于按键绑定的内容看了一下,给发表按钮做了按键绑定。
$(document).keydown(function(e) {
var eCode = e.keyCode ? e.keyCode : e.which ? e.which : e.charCode;
if (eCode == 13)
ajaxFun();
})
经过以上处理之后发现,按键检测的内容可以触发,但消息依然无法发送,并且有明显的刷新迹象。随机考虑到Submit
按钮与Enter
键似乎本身有绑定,加上此环境下本身就不需要表单,于是删除了页面中的表单并修改按钮类型为button
,问题解决。
三、代码提交
之前已经在服务器上装了Git了,不过多赘述了。
四、心得
在一天时间里去做了这样一个小练手个人还是蛮开心的,首先不管怎么说学到了东西,今后的开发过程中ajax
是必不可少的,而获取IP
的接口也非常有趣。
同时这一天也暴露了非常多的问题,首当其冲的应该是开发没有规划,大量代码的重写浪费了一些时间。其次是JavaScript
的基础非常有问题,正如我之前文章里所说的一样:“在我尚未很好的掌握js的时候,有一件更可怕的事情那就是我已经用上jQuery了”,这一点令我比较担忧,有时间的话还是要更熟练的掌握原色JavaScript
才可以。
之后的几天里打算完善功能,然后心思就可以放在前端上了……
网友评论