Java和WebSocket开发网页聊天室_第1页
Java和WebSocket开发网页聊天室_第2页
Java和WebSocket开发网页聊天室_第3页
Java和WebSocket开发网页聊天室_第4页
Java和WebSocket开发网页聊天室_第5页
已阅读5页，还剩3页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

-.zJava和WebSocket开发网页聊天室一、工程简介WebSocket是HTML5一种新的协议，它实现了浏览器与效劳器全双工通信，这里就将使用WebSocket来开发网页聊天室，前端框架会使用AmazeUI，后台使用Java，编辑器使用UMEditor。二、涉及知识点网页前端〔HTML+CSS+JS〕和Java三、软件环境Tomcat7JDK7EclipseJavaEE现代浏览器效果截图效果1效果2五、工程实战1.新建工程翻开桌面上EclipseJavaEE，新建一个名为Chat的DynamicWebProject，然后导入处理JSON格式字符串所需要的包，把mons-beanutils-1.8.0.jar、mons-collections-3.2.1.jar、mons-lang-2.5.jar、mons-logging-1.1.1.jar、ezmorph-1.0.6.jar和json-lib-2.4-jdk15.jar这几个包放在WebContent/WEB-INF/lib目录下，最后把工程发布到Tomcat效劳器上，到此空工程就搭建完成了。2.编写前端页面在WebContent目录下新建一个名为inde*.jsp的页面，这里使用了AmazeUI框架，它是一个跨屏自适应的前端框架，消息输入框使用了UMEditor，它是一个富文本在线编辑器，能让我们的消息内容多姿多彩。首先从AmazeUI官网下载压缩包，然后解压把assets文件夹拷贝到WebContent目录下，这样我们就能使用AmazeUI了。再从UEditer官网下载Mini版的JSP版本压缩包，解压后把整个目录拷贝到WebContent目录下，接下来就可以编写前端代码了，代码如下〔你可以按照自己的喜好编写〕：<%pagelanguage="java"contentType="te*t/html;charset=UTF-8"pageEncoding="UTF-8"%><!DOCTYPEhtml><htmllang="zh"><head><metacharset="utf-8"><meta-equiv="*-UA-patible"content="IE=edge"><metaname="viewport"content="width=device-width,initial-scale=1,ma*imum-scale=1,user-scalable=no"><title>ShiYanLouChat</title><!--Setrenderenginefor360browser--><metaname="renderer"content="webkit"><!--NoBaiduSiteapp--><meta-equiv="Cache-Control"content="no-siteapp"/><linkrel="alternateicon"href="assets/i/favicon.ico"><linkrel="stylesheet"href="assets/css/amazeui.min.css"><linkrel="stylesheet"href="assets/css/app.css"><!--umeditorcss--><linkhref="umeditor/themes/default/css/umeditor.css"rel="stylesheet"><style>.title{

te*t-align:center;}

.chat-content-container{

height:29rem;

overflow-y:scroll;

border:1p*solidsilver;}</style></head><body><!--titlestart--><divclass="title"><divclass="am-gam-g-fi*ed"><divclass="am-u-sm-12"><h1class="am-te*t-primary">ShiYanLouChat</h1></div></div></div><!--titleend--><!--chatcontentstart--><divclass="chat-content"><divclass="am-gam-g-fi*edchat-content-container"><divclass="am-u-sm-12"><ulid="message-list"class="am-ments-listam-ments-list-flip"></ul></div></div></div><!--chatcontentstart--><!--messageinputstart--><divclass="message-inputam-margin-top"><divclass="am-gam-g-fi*ed"><divclass="am-u-sm-12"><formclass="am-form"><divclass="am-form-group"><scripttype="te*t/plain"id="myEditor"style="width:100%;height:8rem;"></script></div></form></div></div><divclass="am-gam-g-fi*edam-margin-top"><divclass="am-u-sm-6"><divid="message-input-nickname"class="am-input-groupam-input-group-primary"><spanclass="am-input-group-label"><iclass="am-icon-user"></i></span><inputid="nickname"type="te*t"class="am-form-field"placeholder="Pleaseenternickname"/></div></div><divclass="am-u-sm-6"><buttonid="send"type="button"class="am-btnam-btn-primary"><iclass="am-icon-send"></i>Send

</button></div></div></div><!--messageinputend--><!--[if(gteIE9)|!(IE)]><!--><scriptsrc="assets/js/jquery.min.js"></script><!--<![endif]--><!--[iflteIE8]>

<scriptsrc="libs.baidu./jquery/1.11.1/jquery.min.js"></script>

<![endif]--><!--umeditorjs--><scriptcharset="utf-8"src="umeditor/umeditor.config.js"></script><scriptcharset="utf-8"src="umeditor/umeditor.min.js"></script><scriptsrc="umeditor/lang/zh-/zh-.js"></script><script>

$(function(){

//初始化消息输入框

varum=UM.getEditor('myEditor');

//使昵称框获取焦点

$('*nickname')[0].focus();

});

</script></body></html>编写完成之后启动Tomcat效劳器，然后localhost:8080/Chat/inde*.jsp，会看到如下界面。3.编写后台代码新建一个.shiyanlou.chat的包，在包中创立一个名为ChatServer的类，从JavaEE7开场就统一了WebSocket的API，因此无论是什么效劳器，用Java写的代码都是一样的，代码如下：package.shiyanlou.chat;

importjava.te*t.SimpleDateFormat;importjava.util.Date;

importjava*.websocket.OnClose;importjava*.websocket.OnError;importMessage;importjava*.websocket.OnOpen;importjava*.websocket.Session;importjava*.websocket.server.ServerEndpoint;

importnet.sf.json.JSONObject;

/**

*聊天效劳器类

*authorshiyanlou

*

*/ServerEndpoint("/websocket")publicclassChatServer{

privatestaticfinalSimpleDateFormatDATE_FORMAT=newSimpleDateFormat("yyyy-MM-ddHH:mm");//日期格式化OnOpenpublicvoidopen(Sessionsession){

}

/**

*承受客户端的消息，并把消息发送给所有连接的会话

*parammessage客户端发来的消息

*paramsession客户端的会话

*/OnMessagepublicvoidgetMessage(Stringmessage,Sessionsession){

JSONObjectjsonObject=JSONObject.fromObject(message);

jsonObject.put("date",DATE_FORMAT.format(newDate()));

for(SessionopenSession:session.getOpenSessions()){

jsonObject.put("isSelf",openSession.equals(session));

openSession.getAsyncRemote().sendTe*t(jsonObject.toString());

}

}

OnClosepublicvoidclose(){

}

OnErrorpublicvoiderror(Throwablet){

}

}4.前后台交互后台写完了，前台要用WebSocket连接后台，需要新建一个WebSocket对象，然后就可以和效劳器端进展交互，从浏览器发送消息给效劳器端，同时要验证输入框的内容是否为空，然后承受效劳端发送的消息，把它们动态地添加到聊天内容框中，在varum=UM.getEditor('myEditor');

$('*nickname')[0].focus();之后添加代码如下：//新建WebSocket对象，最后的/websocket对应效劳器端的ServerEndpoint("/websocket")varsocket=newWebSocket('ws://${pageConte*t.request.getServerName()}:${pageConte*t.request.getServerPort()}${pageConte*t.request.conte*tPath}/websocket');

socket.onmessage=function(event){

addMessage(event.data);

};

$('*send').on('click',function(){

varnickname=$('*nickname').val();

if(!um.hasContents()){

um.focus();

$('.edui-container').addClass('am-animation-shake');

setTimeout("$('.edui-container').removeClass('am-animation-shake')",1000);

}elseif(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();

}

});

functionaddMessage(message){

message=JSON.parse(message);

varmessageItem='<liclass="am-ment'

+(message.isSelf?'am-ment-flip':'am-ment')

+'">'

+'<ahref="javascript:void(0)"><imgsrc="assets/images/'

+(message.isSelf?'self.png':'others.jpg')

+'"alt="class="am-ment-avatar"width="48"height="48"/></a>'

+'<divclass="

人人文库> 全部分类> 行业资料 > 信息产业

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论