- 1、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。。
- 2、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 3、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
- 4、该文档为VIP文档,如果想要下载,成为VIP会员后,下载免费。
- 5、成为VIP后,下载本文档将扣除1次下载权益。下载后,不支持退款、换文档。如有疑问请联系我们。
- 6、成为VIP后,您将拥有八大权益,权益包括:VIP文档下载权益、阅读免打扰、文档格式转换、高级专利检索、专属身份标志、高级客服、多端互通、版权登记。
- 7、VIP文档为合作方或网友上传,每下载1次, 网站将根据用户上传文档的质量评分、类型等,对文档贡献者给予高额补贴、流量扶持。如果你也想贡献VIP文档。上传文档
查看更多
Java和WebSocket开发网页聊天室汇编
一、项目简介
WebSocket是HTML5一种新的协议,它实现了浏览器与服务器全双工通信,这里就将使用WebSocket来开发网页聊天室,前端框架会使用AmazeUI,后台使用Java,编辑器使用UMEditor。
二、涉及知识点
网页前端(HTML+CSS+JS)和Java
三、软件环境
Tomcat 7
JDK 7
Eclipse JavaEE
现代浏览器
四、效果截图
效果1
?
效果2
?
五、项目实战
1. 新建项目
打开Eclipse JavaEE,新建一个名为Chat的Dynamic Web Project,然后导入处理JSON格式字符串所需要的包,把commons-beanutils-1.8.0.jar、commons-collections-3.2.1.jar、commons-lang-2.5.jar、commons-logging-1.1.1.jar、ezmorph-1.0.6.jar和json-lib-2.4-jdk15.jar这几个包放在WebContent/WEB-INF/lib目录下,最后把项目发布到Tomcat服务器上,到此空项目就搭建完成了。
2. 编写前端页面
在WebContent目录下新建一个名为index.jsp的页面,这里使用了AmazeUI框架,它是一个跨屏自适应的前端框架,消息输入框使用了UMEditor,它是一个富文本在线编辑器,能让我们的消息内容多姿多彩。
首先从 HYPERLINK / AmazeUI官网下载压缩包,然后解压把assets文件夹拷贝到WebContent目录下,这样我们就能使用AmazeUI了。
再从 HYPERLINK / UEditer官网下载Mini版的JSP版本压缩包,解压后把整个目录拷贝到WebContent目录下,接下来就可以编写前端代码了,代码如下(你可以按照自己的喜好编写):
Html代码??
%@?page?language=java?contentType=text/html;?charset=UTF-8?pageEncoding=UTF-8%??
!DOCTYPE?html??
html?lang=zh??
head??
meta?charset=utf-8??
meta?http-equiv=X-UA-Compatible?content=IE=edge??
meta?name=viewport?content=width=device-width,?initial-scale=1,?maximum-scale=1,?user-scalable=no??
titleShiYanLou?Chat/title??
??
!--?Set?render?engine?for?360?browser?--??
meta?name=renderer?content=webkit??
??
!--?No?Baidu?Siteapp--??
meta?http-equiv=Cache-Control?content=no-siteapp?/??
??
link?rel=alternate?icon?href=assets/i/favicon.ico??
link?rel=stylesheet?href=assets/css/amazeui.min.css??
link?rel=stylesheet?href=assets/css/app.css??
??
!--?umeditor?css?--??
link?href=umeditor/themes/default/css/umeditor.css?rel=stylesheet??
??
style??
.title?{??
????text-align:?center;??
}??
??
.chat-content-container?{??
????height:?29rem;??
????overflow-y:?scroll;??
????border:?1px?solid?silver;??
}??
/style??
/head??
body??
????!--?title?start?--??
????div?class=title??
????????div?class=am-g?am-g-fixed??
????????????div?class=am-u-sm-12??
????????????????h1?class=am-text-primaryShiYanLou?Chat/h1??
????????????/div??
????????/div??
????/div??
????!--?title?end?--??
??
????!--?chat?content?st
原创力文档


文档评论(0)