Java和WebSocket开发网页聊天室.doc

Java和WebSocket开发网页聊天室一、项目简介WebSocket是HTML5一种新的协议，它实现了浏览器与服务器全双工通信，这里就将使用WebSocket来开发网页聊天室，前端框架会使用AmazeUI，后台使用Java，编辑器使用UMEditor。二、涉及知识点网页前端（HTML+CSS+JS）和Java三、软件环境1. Tomcat 72. JDK 73. Eclipse JavaEE4. 现代浏览器4、 效果截图效果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，它是一个富文本在线编辑器，能让我们的消息内容多姿多彩。首先从AmazeUI官网下载压缩包，然后解压把assets文件夹拷贝到WebContent目录下，这样我们就能使用AmazeUI了。再从UEditer官网下载Mini版的JSP版本压缩包，解压后把整个目录拷贝到WebContent目录下，接下来就可以编写前端代码了，代码如下（你可以按照自己的喜好编写）：ShiYanLou Chat.title text-align: center;.chat-content-container height: 29rem; overflow-y: scroll; border: 1px solid silver; ShiYanLou Chat Send !- $(function() / 初始化消息输入框 var um = UM.getEditor(myEditor); / 使昵称框获取焦点 $(#nickname)0.focus(); ); 编写完成之后启动Tomcat服务器，然后访问http:/localhost:8080/Chat/index.jsp ，会看到如下界面。3. 编写后台代码新建一个com.shiyanlou.chat的包，在包中创建一个名为ChatServer的类，从JavaEE 7开始就统一了WebSocket的API，因此无论是什么服务器，用Java写的代码都是一样的，代码如下：package com.shiyanlou.chat;import java.text.SimpleDateFormat;import java.util.Date;import javax.websocket.OnClose;import javax.websocket.OnError;import javax.websocket.OnMessage;import javax.websocket.OnOpen;import javax.websocket.Session;import javax.websocket.server.ServerEndpoint;import net.sf.json.JSONObject;/* * 聊天服务器类 * author shiyanlou * */ServerEndpoint(/websocket)public class ChatServer private static final SimpleDateFormat DATE_FORMAT = new SimpleDateFormat(yyyy-MM-dd HH:mm); / 日期格式化 OnOpen public void open(Session session) /* * 接受客户端的消息，并把消息发送给所有连接的会话 * param message 客户端发来的消息 * param session 客户端的会话 */ OnMessage public void getMessage(String message, Session session) JSONObject jsonObject = JSONObject.fromObject(message); jsonObject.put(date, DATE_FORMAT.format(new Date(); for (Session openSession : session.getOpenSessions() jsonObject.put(isSelf, openSession.equals(session); openSession.getAsyncRemote().sendText(jsonObject.toString(); OnClose public void close() OnError public void error(Throwable t) 4. 前后台交互后台写完了，前台要用WebSocket连接后台，需要新建一个WebSocket对象，然后就可以和服务器端进行交互，从浏览器发送消息给服务器端，同时要验证输入框的内容是否为空，然后接受服务端发送的消息，把它们动态地添加到聊天内容框中，在var um = UM.getEditor(myEditor);$(#nickname)0.focus();之后添加代码如下：/ 新建WebSocket对象，最后的/websocket对应服务器端的ServerEndpoint(/websocket)var socket = new WebSocket(ws:/$pageContext.request.getServerName():$pageContext.request.getServerPort()$pageContext.request.contextPath/websocket); socket.onmessage = function(event) addMessage(event.data); ; $(#send).on(click, function() var nickname = $(#nickname).val(); if (!um.hasContents() um.focus(); $(.edui-container).addClass(am-animation-shake); setTimeout($(.edui-container).removeClass(am-animation-shake), 1000); else if (nickname = ) $(#nickname)0.focus(); $(#message-input-nickname).addClass(am-animation-shake); setTimeout($(#message-input-nickname).removeClass(am-animation-shake), 1000); else socket.send(JSON.stringify( content : um.getContent(), nickname : nickname ); um.setContent(); um.focus(); ); function addMessage(message) message = JSON.parse(message); var messageItem = + + + + message.nickname + + message.date + + + message.content + ; $(messageItem).appendTo(#message-list); $(.chat-content-container).scrollTop($(.chat-content-container)0.scrollHeight); 到这步，简单的网页聊天室就完成了，你可以多开几个窗口或在局域网中邀请