Java和WebSocket開發(fā)網頁聊天室_第1頁
Java和WebSocket開發(fā)網頁聊天室_第2頁
Java和WebSocket開發(fā)網頁聊天室_第3頁
Java和WebSocket開發(fā)網頁聊天室_第4頁
Java和WebSocket開發(fā)網頁聊天室_第5頁
已閱讀5頁，還剩3頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

-.zJava和WebSocket開發(fā)網頁聊天室一、工程簡介WebSocket是HTML5一種新的協(xié)議，它實現(xiàn)了瀏覽器與效勞器全雙工通信，這里就將使用WebSocket來開發(fā)網頁聊天室，前端框架會使用AmazeUI，后臺使用Java，編輯器使用UMEditor。二、涉及知識點網頁前端〔HTML+CSS+JS〕和Java三、軟件環(huán)境Tomcat7JDK7EclipseJavaEE現(xiàn)代瀏覽器效果截圖效果1效果2五、工程實戰(zhàn)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目錄下，最后把工程發(fā)布到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的包，在包中創(chuàng)立一個名為ChatServer的類，從JavaEE7開場就統(tǒng)一了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){

}

/**

*承受客戶端的消息，并把消息發(fā)送給所有連接的會話

*parammessage客戶端發(fā)來的消息

*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對象，然后就可以和效勞器端進展交互，從瀏覽器發(fā)送消息給效勞器端，同時要驗證輸入框的內容是否為空，然后承受效勞端發(fā)送的消息，把它們動態(tài)地添加到聊天內容框中，在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. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網頁內容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經權益所有人同意不得將文件中的內容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網僅提供信息存儲空間，僅對用戶上傳內容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內容本身不做任何修改或編輯，并不能對任何下載內容負責。
  • 6. 下載文件中如有侵權或不適當內容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論