java、websokect、amazeUI、uEditor实现简易的webChat功能
2016-11-29 16:13
671 查看
后台Java类:
前台jsp代码:
项目目录结构如下图:
效果图如下:
package com.ccms.chat; import java.text.SimpleDateFormat; import java.util.Date; import java.util.concurrent.CopyOnWriteArraySet; 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 CopyOnWriteArraySet<ChatServer> webSocketSet = new CopyOnWriteArraySet<ChatServer>(); // 日期格式化 private static final SimpleDateFormat DATE_FORMAT = new SimpleDateFormat("yyyy-MM-dd HH:mm"); private Session session; @OnOpen public void open(Session session) { this.session = session; // 添加初始化操作 webSocketSet.add(this); } /** * 接受客户端的消息,并把消息发送给所有连接的会话 * @param message 客户端发来的消息 * @param session 客户端的会话 */ @OnMessage public void onMessage(String message, Session session) { // 把客户端的消息解析为JSON对象 JSONObject jsonObject = JSONObject.fromObject(message); // 在消息中添加发送日期 jsonObject.put("date", DATE_FORMAT.format(new Date())); for(ChatServer cs:webSocketSet){ System.out.println("用户"); synchronized (ChatServer.class) { jsonObject.put("isSelf", cs.session.equals(session)); cs.session.getAsyncRemote().sendText(jsonObject.toString()); } } } @OnClose public void close() { // 添加关闭会话时的操作 webSocketSet.remove(this); } @OnError public void error(Throwable t) { // 添加处理错误的操作 System.out.println("发生错误了"); } }
前台jsp代码:
<%@ 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-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <title>Simple 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="stylesheet" href="assets/css/amazeui.min.css"> <link rel="stylesheet" href="assets/css/app.css"> <!-- umeditor css --> <link href="ueditor/themes/default/css/ueditor.css" rel="stylesheet"> <style> html { font-size: 62.5%; } body { font-size: 1.6rem; /* =16px */ } .chat-history { text-align: center; } .chat-history h1{ margin: 0; font-size: 4rem; } .am-vertical-align{ height: 5rem; } .chat-content{ height: 75rem; overflow-y: scroll; border: 1px solid silver; font-size: 1.6rem; } .chat-ueditor{ margin-top: 5rem; } </style> </head> <body> <div class="chat-history am-g"> <div class="am-u-sm-7 am-u-md-7 am-u-lg-7 am-vertical-align"> <div class="am-u-sm-12 am-u-md-12 am-u-lg-12 am-vertical-align"> <h1 class="am-vertical-align-middle am-text-primary">聊天记录</h1> </div> <div class="am-u-sm-12 am-u-md-12 am-u-lg-12 chat-content"> <ul id="message-list" class="am-comments-list am-comments-list-flip"></ul> </div> </div> <div class="am-u-sm-5 am-u-md-5 am-u-lg-5"> <div class="am-u-sm-12 am-u-md-12 am-u-lg-12 chat-ueditor"> <form class="am-form"> <div class="am-form-group"> <script type="text/plain" id="myEditor"></script> </div> </form> </div> <div class="am-g am-u-sm-12 am-u-md-12 am-u-lg-12"> <div class="am-u-sm-7 am-u-md-7 am-u-lg-7"> <div id="message-input-nickname" class="am-input-group am-input-group-primary"> <span class="am-input-group-label"><i class="am-icon-user"></i></span> <input id="nickname" type="text" class="am-form-field" placeholder="Please enter nickname"/> </div> </div> <div class="am-u-sm-5 am-u-md-5 am-u-lg-5"> <button id="send" type="button" class="am-btn am-btn-primary"> <i class="am-icon-send"></i> Send </button> </div> </div> </div> </div> <script src="assets/js/jquery-2.2.1.min.js"></script> <script type="text/javascript" charset="utf-8" src="ueditor/ueditor.config.js"></script> <script type="text/javascript" charset="utf-8" src="ueditor/ueditor.all.min.js"> </script> <script type="text/javascript" charset="utf-8" src="ueditor/lang/zh-cn/zh-cn.js"></script> <script> $(function() { // 初始化消息输入框 var toolbar = [ ['fullscreen', 'source', 'undo', 'redo','bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc'] ]; var ue = UE.getEditor('myEditor',{initialFrameHeight: 700,initialFrameWidth:'100%',toolbars: toolbar}); // 使昵称框获取焦点 $('#nickname')[0].focus(); // 新建WebSocket对象,最后的/websocket对应服务器端的@ServerEndpoint("/websocket") var socket = new WebSocket('ws://${pageContext.request.getServerName()}:${pageContext.request.getServerPort()}${pageContext.request.contextPath}/websocket'); // 处理服务器端发送的数据 socket.onopen = function(message) { }; socket.onclose = function(message) { }; socket.onmessage = function(message) { showMessage(message.data); }; window.onbeforeunload = function() { if(confirm('确定要离开吗?')){ socket.close(); } }; // 点击Send按钮时的操作 $('#send').on('click', function() { var nickname = $('#nickname').val(); console.info(ue.hasContents()); console.info(nickname==''); if (!ue.hasContents()) { // 判断消息输入框是否为空 // 消息输入框获取焦点 ue.focus(); // 添加抖动效果 $('#myEditor').addClass('am-animation-shake'); setTimeout(function(){ $('#myEditor').removeClass('am-animation-shake') }, 1000); } else if (nickname == '') { // 判断昵称框是否为空 //昵称框获取焦点 $('#nickname')[0].focus(); // 添加抖动效果 $('#message-input-nickname').addClass('am-animation-shake'); setTimeout(function(){ $('#message-input-nickname').removeClass('am-animation-shake') }, 1000); } else { // 发送消息 socket.send(JSON.stringify({ content : ue.getContent(), nickname : nickname })); // 清空消息输入框 ue.setContent(''); // 消息输入框获取焦点 ue.focus(); } }); // 把消息添加到聊天内容中 function showMessage(message) { message = JSON.parse(message); var float_direction = message.isSelf?'am-comment-flip':'am-comment'; var img = message.isSelf?'self.png':'others.jpg'; var leftOrRight = message.isSelf?'right':'left'; var messageItem = ""; messageItem += "<li class='am-comment "+float_direction+"'>"; messageItem += "<a href='javascript:;'><img src='assets/images/"+img+"' alt='' class='am-comment-avatar' style='width: 48;height: 48;' /></a>"; messageItem += "<div class='am-comment-main'>"; messageItem += "<header class='am-comment-hd'>"; messageItem += "<div class='am-comment-meta' style='text-align: "+leftOrRight+";'><a href='javascript:;' class='am-comment-author'>"+message.nickname+"</a>"; messageItem += " <time>"+message.date+"</time></div></header>"; messageItem += "<div class='am-comment-bd' style='text-align: left;'>"+message.content+"</div></div></li>"; $("#message-list").append(messageItem); // 把滚动条滚动到底部 $(".chat-content").scrollTop($(".chat-content")[0].scrollHeight); } }); </script> </body> </html>
项目目录结构如下图:
效果图如下:
相关文章推荐
- JAVA应用XFire框架来实现WebServie的大文件传输功能之二(上传)
- Java Web 案例一 登录、注册功能实现
- 【How Tomcat Works】第一章——一个简易的java web服务实现(上)
- JavaWeb中struts2实现文件上传下载功能实例解析
- java web开发:servlet中图形验证码功能的实现
- Linux平台,使用JavaComm3 API及SMSLib项目实现在Web Application中发送手机短信的功能
- 使用Java在Web上实现简易干特图之一
- java web中实现同一帐号同一时间只能一个地点登陆(类似QQ登录的功能)
- java web中实现同一帐号同一时间只能一个地点登陆(类似QQ登录的功能)
- java web开发_购物车功能实现
- 使用Java在Web上实现简易干特图之四
- java web中实现同一帐号同一时间只能一个地点登陆(类似QQ登录的功能)
- java web中图片验证码功能实现
- 使用Java在Web上实现简易干特图之五
- 使用Java在Web上实现简易干特图之三
- java web中实现同一帐号同一时间只能一个地点登陆(类似QQ登录的功能)
- 使用Java在Web上实现简易干特图之四
- JAVA应用XFire框架来实现WebServie的大文件传输功能之一(下载)
- JAVA_WEB项目之Lucene检索框架实现增删查改的代码优化以及分页功能实现
- java web开发_购物车功能实现