使用Java和WebSocket實現(xiàn)網(wǎng)頁聊天室實例代碼
在沒介紹正文之前，先給大家介紹下websocket的背景和原理：
背景
在瀏覽器中通過http僅能實現(xiàn)單向的通信,comet可以一定程度上模擬雙向通信,但效率較低,并需要服務(wù)器有較好的支持; flash中的socket和xmlsocket可以實現(xiàn)真正的雙向通信,通過 flex ajax bridge,可以在javascript中使用這兩項功能. 可以預(yù)見,如果websocket一旦在瀏覽器中得到實現(xiàn),將會替代上面兩項技術(shù),得到廣泛的使用.面對這種狀況，HTML5定義了WebSocket協(xié)議，能更好的節(jié)省服務(wù)器資源和帶寬并達(dá)到實時通訊。
在JavaEE7中也實現(xiàn)了WebSocket協(xié)議。
原理
WebSocket protocol 。
現(xiàn)很多網(wǎng)站為了實現(xiàn)即時通訊，所用的技術(shù)都是輪詢(polling)。輪詢是在特定的的時間間隔（如每1秒），由瀏覽器對服務(wù)器發(fā)出HTTP request，然后由服務(wù)器返回最新的數(shù)據(jù)給客戶端的瀏覽器。這種傳統(tǒng)的HTTP request 的模式帶來很明顯的缺點 – 瀏覽器需要不斷的向服務(wù)器發(fā)出請求，然而HTTP request 的header是非常長的，里面包含的有用數(shù)據(jù)可能只是一個很小的值，這樣會占用很多的帶寬。
而比較新的技術(shù)去做輪詢的效果是Comet – 用了AJAX。但這種技術(shù)雖然可達(dá)到全雙工通信，但依然需要發(fā)出請求。
在 WebSocket API，瀏覽器和服務(wù)器只需要做一個握手的動作，然后，瀏覽器和服務(wù)器之間就形成了一條快速通道。兩者之間就直接可以數(shù)據(jù)互相傳送。在此WebSocket 協(xié)議中，為我們實現(xiàn)即時服務(wù)帶來了兩大好處：
1. Header
互相溝通的Header是很小的-大概只有 2 Bytes
2. Server Push
服務(wù)器的推送，服務(wù)器不再被動的接收到瀏覽器的request之后才返回數(shù)據(jù)，而是在有新數(shù)據(jù)時就主動推送給瀏覽器。
一、項目簡介
WebSocket是HTML5一種新的協(xié)議，它實現(xiàn)了瀏覽器與服務(wù)器全雙工通信，這里就將使用WebSocket來開發(fā)網(wǎng)頁聊天室，前端框架會使用AmazeUI，后臺使用Java，編輯器使用UMEditor。
二、涉及知識點
網(wǎng)頁前端（HTML+CSS+JS）和Java
三、軟件環(huán)境 Tomcat 7 JDK 7 Eclipse JavaEE 現(xiàn)代瀏覽器
四、效果截圖
效果1
效果2
五、項目實戰(zhàn)
1. 新建項目
打開Eclipse JavaEE，新建一個名為Chat的Dynamic Web Project，然后導(dǎo)入處理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目錄下，最后把項目發(fā)布到Tomcat服務(wù)器上，到此空項目就搭建完成了。
2. 編寫前端頁面
在WebContent目錄下新建一個名為index.jsp的頁面，這里使用了AmazeUI框架，它是一個跨屏自適應(yīng)的前端框架，消息輸入框使用了UMEditor，它是一個富文本在線編輯器，能讓我們的消息內(nèi)容多姿多彩。
首先從 AmazeUI官網(wǎng) 下載壓縮包，然后解壓把assets文件夾拷貝到WebContent目錄下，這樣我們就能使用AmazeUI了。
再從 UEditer官網(wǎng) 下載Mini版的JSP版本壓縮包，解壓后把整個目錄拷貝到WebContent目錄下，接下來就可以編寫前端代碼了，代碼如下（你可以按照自己的喜好編寫）：
<%@ 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>ShiYanLou 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="alternate icon" href="assets/i/favicon.ico">
<link rel="stylesheet" href="assets/css/amazeui.min.css">
<link rel="stylesheet" href="assets/css/app.css">
<!-- umeditor css -->
<link href="umeditor/themes/default/css/umeditor.css" rel="stylesheet">
<style>
.title {
text-align: center;
}
.chat-content-container {
height: 29rem;
overflow-y: scroll;
border: 1px solid silver;
}
</style>
</head>
<body>
<!-- title start -->
<div class="title">
<div class="am-g am-g-fixed">
<div class="am-u-sm-12">
<h1 class="am-text-primary">ShiYanLou Chat</h1>
</div>
</div>
</div>
<!-- title end -->
<!-- chat content start -->
<div class="chat-content">
<div class="am-g am-g-fixed chat-content-container">
<div class="am-u-sm-12">
<ul id="message-list" class="am-comments-list am-comments-list-flip"></ul>
</div>
</div>
</div>
<!-- chat content start -->
<!-- message input start -->
<div class="message-input am-margin-top">
<div class="am-g am-g-fixed">
<div class="am-u-sm-12">
<form class="am-form">
<div class="am-form-group">
<script type="text/plain" id="myEditor" style="width: 100%;height: 8rem;"></script>
</div>
</form>
</div>
</div>
<div class="am-g am-g-fixed am-margin-top">
<div class="am-u-sm-6">
<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-6">
<button id="send" type="button" class="am-btn am-btn-primary">
<i class="am-icon-send"></i> Send
</button>
</div>
</div>
</div>
<!-- message input end -->
<!--[if (gte IE 9)|!(IE)]><!-->
<script src="assets/js/jquery.min.js"></script>
<!--<![endif]-->
<!--[if lte IE 8 ]>
<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<![endif]-->
<!-- umeditor js -->
<script charset="utf-8" src="umeditor/umeditor.config.js"></script>
<script charset="utf-8" src="umeditor/umeditor.min.js"></script>
<script src="umeditor/lang/zh-cn/zh-cn.js"></script>
<script>
$(function() {
// 初始化消息輸入框
var um = UM.getEditor('myEditor');
// 使昵稱框獲取焦點
$('#nickname')[0].focus();
});
</script>
</body>
</html>
編寫完成之后啟動Tomcat服務(wù)器，然后訪問 http://localhost:8080/Chat/index.jsp ，會看到如下界面。
3. 編寫后臺代碼
新建一個com.shiyanlou.chat的包，在包中創(chuàng)建一個名為ChatServer的類，從JavaEE 7開始就統(tǒng)一了WebSocket的API，因此無論是什么服務(wù)器，用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;
/**
* 聊天服務(wù)器類
* @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) {
// 添加初始化操作
}
/**
* 接受客戶端的消息，并把消息發(fā)送給所有連接的會話
* @param message 客戶端發(fā)來的消息
* @param session 客戶端的會話
*/
@OnMessage
public void getMessage(String message, Session session) {
// 把客戶端的消息解析為JSON對象
JSONObject jsonObject = JSONObject.fromObject(message);
// 在消息中添加發(fā)送日期
jsonObject.put("date", DATE_FORMAT.format(new Date()));
// 把消息發(fā)送給所有連接的會話
for (Session openSession : session.getOpenSessions()) {
// 添加本條消息是否為當(dāng)前會話本身發(fā)的標(biāo)志
jsonObject.put("isSelf", openSession.equals(session));
// 發(fā)送JSON格式的消息
openSession.getAsyncRemote().sendText(jsonObject.toString());
}
}
@OnClose
public void close() {
// 添加關(guān)閉會話時的操作
}
@OnError
public void error(Throwable t) {
// 添加處理錯誤的操作
}
}
4. 前后臺交互
后臺寫完了，前臺要用WebSocket連接后臺，需要新建一個WebSocket對象，然后就可以和服務(wù)器端進(jìn)行交互，從瀏覽器發(fā)送消息給服務(wù)器端，同時要驗證輸入框的內(nèi)容是否為空，然后接受服務(wù)端發(fā)送的消息，把它們動態(tài)地添加到聊天內(nèi)容框中，在
var um = UM.getEditor('myEditor');
$('#nickname')[0].focus();
// 新建WebSocket對象，最后的/websocket對應(yīng)服務(wù)器端的@ServerEndpoint("/websocket")
var socket = new WebSocket('ws://${pageContext.request.getServerName()}:${pageContext.request.getServerPort()}${pageContext.request.contextPath}/websocket');
// 處理服務(wù)器端發(fā)送的數(shù)據(jù)
socket.onmessage = function(event) {
addMessage(event.data);
};
// 點擊Send按鈕時的操作
$('#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 {
// 發(fā)送消息
socket.send(JSON.stringify({
content : um.getContent(),
nickname : nickname
}));
// 清空消息輸入框
um.setContent('');
// 消息輸入框獲取焦點
um.focus();
}
});
// 把消息添加到聊天內(nèi)容中
function addMessage(message) {
message = JSON.parse(message);
var messageItem = '<li class="am-comment '
+ (message.isSelf ? 'am-comment-flip' : 'am-comment')
+ '">'
+ '<a href="javascript:void(0)" ><img src="assets/images/'
+ (message.isSelf ? 'self.png' : 'others.jpg')
+ '" alt="" class="am-comment-avatar" width="48" height="48"/></a>'
+ '<div class="am-comment-main"><header class="am-comment-hd"><div class="am-comment-meta">'
+ '<a href="javascript:void(0)" class="am-comment-author">'
+ message.nickname + '</a> <time>' + message.date
+ '</time></div></header>'
+ '<div class="am-comment-bd">' + message.content
+ '</div></div></li>';
$(messageItem).appendTo('#message-list');
// 把滾動條滾動到底部
$(".chat-content-container").scrollTop($(".chat-content-container")[0].scrollHeight);
}
到這步，簡單的網(wǎng)頁聊天室就完成了，你可以多開幾個窗口或在局域網(wǎng)中邀請小伙伴們來一起測試。
六、小結(jié)
本次項目課使用WebSocket實現(xiàn)了簡單的網(wǎng)頁聊天室，其實WebSocket不僅可以應(yīng)用于瀏覽器，也可以應(yīng)用于桌面客戶端。
七、思考題
本次項目課只是簡單的實現(xiàn)聊天室，其實還有很多功能可以增加，例如頭像上傳功能、一對一聊天功能等，讓我們一起來完善聊天室吧。
看到這里想不想馬上去試試，點擊這里--- 為你免費提供在線編譯環(huán)境，讓你不再為搭建環(huán)境而煩惱
以上所述是小編給大家介紹的使用Java和WebSocket實現(xiàn)網(wǎng)頁聊天室實例代碼的相關(guān)知識，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
這篇文章主要介紹了Java事件處理機制和適配器全面解析，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2021-12-12
這篇文章主要介紹了Java StringBuilder類原理及常用方法,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-12-12
Spring Boot 整合 TKMybatis 二次簡化持久層代碼的實現(xiàn)
這篇文章主要介紹了Spring Boot 整合 TKMybatis 二次簡化持久層代碼的實現(xiàn),本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-01-01
這篇文章主要介紹了java常用工具類之DES和Base64加密解密類,需要的朋友可以參考下2014-07-07
jstack 是一個常用的用于分析 Java 進(jìn)程的工具。它可以顯示 Java 進(jìn)程中所有線程狀態(tài)和堆棧信息，幫助定位 Java 進(jìn)程中的問題，這篇文章主要介紹了jvm-jstack常用的用法示例,需要的朋友可以參考下2023-06-06
這篇文章主要介紹了Java訪問權(quán)限,結(jié)合實例形式詳細(xì)分析了java構(gòu)造者思想、包、訪問修飾符等相關(guān)原理、應(yīng)用與操作注意事項,需要的朋友可以參考下2020-02-02
Feign是Netflix開發(fā)的聲明式、模板化的HTTP客戶端， Feign可以幫助我們更快捷、優(yōu)雅地調(diào)用HTTP API2021-06-06
Java設(shè)計實現(xiàn)一個針對各種類型的緩存
這篇文章主要為大家詳細(xì)介紹了Java如何設(shè)計實現(xiàn)一個針對各種類型的緩存,文中的示例代碼講解詳細(xì),具有一定的學(xué)習(xí)價值,感興趣的小伙伴可以了解一下2023-11-11
IKAnalyzer結(jié)合Lucene實現(xiàn)中文分詞(示例講解)
下面小編就為大家?guī)硪黄狪KAnalyzer結(jié)合Lucene實現(xiàn)中文分詞(示例講解)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
這篇文章主要介紹了SpringBoot?Web依賴教程，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-11-11