Java和WebSocket开发网页聊天室汇编.docxVIP

一、项目简介 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