1 聊天室 html 模板篇一: Java 和 WebSocket 开发网页聊天室 Java 和 WebSocket 开发网页聊天室一、项目简介 WebSocket 是 HTML5 一种新的协议,它实现了浏览器与服务器全双工通信, 这里就将使用 WebSocket 来开发网页聊天室,前端框架会使用 AmazeUI ,后台使用 Java ,编辑器使用 UMEditor 。二、涉及知识点网页前端( HTML+CSS+JS )和 Java 三、软件环境 1. 2. 3. 4. Tomcat 7 JDK 7 Eclipse JavaEE 现代浏览器四、效果截图效果 1 效果 2 2 五、项目实战 1. 新建项目打开桌面上 Eclipse JavaEE ,新建一个名为 Chat 的 Dynamic Web Project ,然后导入处理 JSON 格式字符串所需要的包,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 版本压缩包,解压后把整个目录拷贝到 WebContent 目录下, 接下来就可以编写前端代码了,代码如下(你可以按照自己的喜好编写): 3 <%@ 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-patible 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/<link rel=stylesheet href=assets/css/amaze <link rel=stylesheet href=assets/css/ <!-- umeditor css --<link href=umeditor/themes/default/css/ rel=stylesheet < { text-align: center;} .chat-content-container { height: 29rem; overflow-y: scroll; 4 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 -- &l
聊天室html模板 来自淘豆网m.daumloan.com转载请标明出处.
