java、websokect、amazeUI、uEditor实现简易的webChat功能

后台Java类：

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、websokect、amazeUI、uEditor实现简易的webChat功能相关推荐

JAVA 局域网聊天_java实现简易局域网聊天功能
本文实例为大家分享了java使用udp模式编写聊天程序的具体代码,供大家参考,具体内容如下 java代码: /* 使用udp模式,编写一个聊天程序有发送和接收数据2部分, 一个线程接收,一个线程发送 ...
java简单小程序_Java简易登录注册小程序
这篇文章主要介绍了Java图形界面开发,简易登录注册小程序,具有一定的参考价值,感兴趣的小伙伴们可以参考一下登录注册小代码,将学过的一些小知识融合在一起进行了使用,加深印象.本例中如果有注释不详细的 ...
简单java socket_基于Java Socket实现一个简易在线聊天功能（一）
最近做了一个项目,其中有一个在线网页交流的需求,好久没写代码了,手都生疏了,于是先写demo练练手,分享到脚本之家平台,以此做个记录,方便自己和大家使用. 先给大家说下实现步骤分这样几大步: 1.使用 ...
java入门（3）——简易绘图板
简易绘图板简易绘图板的实现,主要用到了java.awt和javax.swing包中的制作界面的相关知识,其次是Graphics类用于绘图,最后用监听器将两者联系起来. 监听器监听器用于监听事件,比 ...
Java游戏开发组件LGame简易测试版发布（版本号 0 1 5）
LGame-Simple-0.1.5组件下载地址:http://code.google.com/p/loon-simple/downloads/list 2009-09-13 更新内容: Java游戏 ...
Java语言程序设计：医院简易挂号管理系统 Java实验
Java语言程序设计 :医院简易挂号管理系统 Java实验 1.课程设计目的医院预约挂号管理系统是每一个医疗机构管理平常挂号业务流程不可或缺的一个管理信息系统,它的存在解决了病人挂号难.看病难等问题 ...
java调色板代码_简易网页调色板功能调用代码_html
简易网页调色板功能调用代码 colorSelect('色值输入框ID','显示色值的容器ID',event) 调用起来很简单,任何物品onClick就可以. 以下是html网页特效代码,点击运行按钮可 ...
AJAX+JSON【练习】实现简易的点赞功能
AJAX+JSON[练习]实现简易的点赞功能 1.前言 2.AJAX实现前后端数据传递 3.JSON与Java对象之间的转换 4.数据库相关配置 5.jQuery的JS文件,lib中的Jar包 6.代 ...
使用vue-cli+element-ui+expsess+mysql做一个简易的登录功能
使用vue-cli+element-ui+expsess+mysql做一个简易的登录功能 1使用webpack下载vue模板 vue init webpack aaa(aaa为项目名称) cd到aaa ...

java、websokect、amazeUI、uEditor实现简易的webChat功能

java、websokect、amazeUI、uEditor实现简易的webChat功能相关推荐

最新文章

热门文章