文档介绍：一、项目简介 WebSocket 是 HTML5 一种新的协议,它实现了浏览器与服务器全双工通信,这里就将使用 WebSocket 来开发网页聊天室,前端框架会使用 AmazeUI ,后台使用 Java ,编辑器使用 UMEditor 。二、涉及知识点网页前端( HTML+CSS+JS )和 Java 三、软件环境 1. Tomcat 7 2. JDK 7 3. Eclipse JavaEE 4. 现代浏览器四、效果截图效果 1 效果 2 五、项目实战 1. 新建项目打开 Eclipse JavaEE ,新建一个名为 Chat 的 Dynamic Web Project ,然后导入处理 JSO N 格式字符串所需要的包,mons-beanutils- 、 commons-collections- 、 commons-lang- 、 commons-logging- 、 ezmorph- 和 json-lib-- 这几个包放在 WebContent/WEB-INF/lib 目录下,最后把项目发布到 Tomcat 服务器上,到此空项目就搭建完成了。 2. 编写前端页面在 WebContent 目录下新建一个名为 的页面,这里使用了 AmazeUI 框架,它是一个跨屏自适应的前端框架,消息输入框使用了 UMEditor ,它是一个富文本在线编辑器, 能让我们的消息内容多姿多彩。首先从 AmazeUI 官网下载压缩包, 然后解压把 assets 文件夹拷贝到 WebContent 目录下, 这样我们就能使用 AmazeUI 了。再从 UEditer 官网下载 Mini 版的 JSP 版本压缩包,解压后把整个目录拷贝到 WebConten t 目录下,接下来就可以编写前端代码了,代码如下(你可以按照自己的喜好编写): Html 代码 1.< %@ page language = "java" contentType = "text/html; charset=UTF-8" pageEncoding = "UTF-8" %> 2. <!DOCTYPE html > 3. <html lang = "zh" > 4. <head> 5. <meta charset = "utf-8" > 6. <meta http-equiv = "X-patible" content = "IE=edge" > 7. <meta name = "viewport" content = "width=device-width, initial-scale=1, maximum- scale=1, user-scalable=no" > 8. <title> ShiYanLou Chat </title> 9. 10. <!-- Set render engine for 360 browser --> 11. <meta name = "renderer" content = "webkit" > 12. 13. <!-- No Baidu Siteapp--> 14. <meta http-equiv = "Cache-Control" content = "no-siteapp" /> 15. 16. <link rel = "alternate icon" href = "assets/i/" > 17. <link rel = "stylesheet" href = "assets/css/" > 18. <link rel = "stylesheet" href = "assets/css/" > 19. 20. <!-- umeditor css --> 21. <link href = "umeditor/themes/default/css/" rel = "stylesheet" > 22. 23. <style> 24. .title { 25. text-align: center; 26. } 27. 28. .chat-content-container { 29. height: 29rem; 30. overflow-y: scroll; 31. border: 1px solid silver; 32. } 33. </style> 34. </head> 35. <body> 36. <!-- title start --> 37. <div class = "title" > 38. <div class