Java和WebSocket开发网页聊天室

下载本文档

ID 347057
格式 doc
大小 149 KB
约10页
收藏
点赞(0)
海报
举报

/ 10

下载本文档

文本预览下载提示常见问题

Java和WebSocket开发网页聊天室一、项目简介WebSocket是HTML5一种新的协议，它实现了浏览器与服务器全双工通信，这里就将使用WebSocket来开发网页聊天室，前端框架会使用AmazeUI，后台使用Java，编辑器使用UMEditor。二、涉及知识点网页前端（HTML+CSS+JS）和Java三、软件环境1.Tomcat72.JDK73.EclipseJavaEE4.现代浏览器四、效果截图效果1效果2五、项目实战1.新建项目打开桌面上EclipseJavaEE，新建一个名为Chat的DynamicWebProject，然后导入处理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，它是一个富文本在线编辑器，能让我们的消息内容多姿多彩。首先从AmazeUI官网下载压缩包，然后解压把assets文件夹拷贝到WebContent目录下，这样我们就能使用AmazeUI了。再从UEditer官网下载Mini版的JSP版本压缩包，解压后把整个目录拷贝到WebContent目录下，接下来就可以编写前端代码了，代码如下（你可以按照自己的喜好编写）：<%@pagelanguage="java"contentType="text/html;charset=UTF-8"pageEncoding="UTF-8"%><!DOCTYPEhtml><htmllang="zh"><head><metacharset="utf-8"><meta-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><title>ShiYanLouChat</title><metaname="renderer"content="webkit"><meta-equiv="Cache-Control"content="no-siteapp"/><linkrel="alternateicon"href="assets/i/favicon.ico"><linkrel="stylesheet"href="assets/css/amazeui.min.css"><linkrel="stylesheet"href="assets/css/app.css"><linkhref="umeditor/themes/default/css/umeditor.css"rel="stylesheet"><style>.title{text-align:center;}.chat-content-container{height:29rem;overflow-y:scroll;border:1pxsolidsilver;}</style></head><body><divclass="title"><divclass="am-gam-g-fixed"><divclass="am-u-sm-12"><h1class="am-text-primary">ShiYanLouChat</h1></div></div></div><divclass="chat-content"><divclass="am-gam-g-fixedchat-content-container"><divclass="am-u-sm-12"><ulid="message-list"class="am-comments-listam-comments-list-flip"></ul></div></div></div><divclass="message-inputam-margin-top"><divclass="am-gam-g-fixed"><divclass="am-u-sm-12"><formclass="am-form"><divclass="am-form-group"><scripttype="text/plain"id="myEditor"style="width:100%;height:8rem;"></script></div></form></div></div><divclass="am-gam-g-fixedam-margin-top"><divclass="am-u-sm-6"><divid="message-input-nickname"class="am-input-groupam-input-group-primary"><spanclass="am-input-group-label"><iclass="am-icon-user"></i></span><inputid="nickname"type="text"class="am-form-field"placeholder="Pleaseenternickname"/></div></div><divclass="am-u-sm-6"><buttonid="send"type="button"class="am-btnam-btn-primary"><iclass="am-icon-send"></i>Send</button></div></div></div><scriptsrc="assets/js/jquery.min.js"></script><scriptcharset="utf-8"src="umeditor/umeditor.config....

1、当您付费下载文档后，您只拥有了使用权限，并不意味着购买了版权，文档只能用于自身使用，不得用于其他商业用途（如 [转卖]进行直接盈利或[编辑后售卖]进行间接盈利）。
2、本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺！文档内容仅供参考，付费前请自行鉴别。
3、如文档内容存在侵犯商业秘密、侵犯著作权等，请点击“举报”。