java和websocket开发网页聊天室

Java 和 WebSocket 开发网页聊天室 一、项目简介 WebSocket 是 HTML5 一种新的协议，它实现了浏览器与服务器全双工通信， 这里就将使用 WebSocket 来开发网页聊天室，前端框架会使用 AmazeUI，后台 使用 Java，编辑器使用 UMEditor。 二、涉及知识点 网页前端（HTML+CSS+JS ）和 Java 三、软件环境 1. Tomcat 7 2. JDK 7 3. Eclipse JavaEE 4. 现代浏览器 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); 到这步，简单的网页聊天室就完成了，你可以多开几个窗口或在局域网中邀请 小伙伴们