使用Java和WebSocket實(shí)現(xiàn)網(wǎng)頁聊天室實(shí)例代碼
在沒介紹正文之前，先給大家介紹下websocket的背景和原理：
背景
在瀏覽器中通過http僅能實(shí)現(xiàn)單向的通信,comet可以一定程度上模擬雙向通信,但效率較低,并需要服務(wù)器有較好的支持; flash中的socket和xmlsocket可以實(shí)現(xiàn)真正的雙向通信,通過 flex ajax bridge,可以在javascript中使用這兩項(xiàng)功能. 可以預(yù)見,如果websocket一旦在瀏覽器中得到實(shí)現(xiàn),將會替代上面兩項(xiàng)技術(shù),得到廣泛的使用.面對這種狀況，HTML5定義了WebSocket協(xié)議，能更好的節(jié)省服務(wù)器資源和帶寬并達(dá)到實(shí)時(shí)通訊。
在JavaEE7中也實(shí)現(xiàn)了WebSocket協(xié)議。
原理
WebSocket protocol 。
現(xiàn)很多網(wǎng)站為了實(shí)現(xiàn)即時(shí)通訊，所用的技術(shù)都是輪詢(polling)。輪詢是在特定的的時(shí)間間隔（如每1秒），由瀏覽器對服務(wù)器發(fā)出HTTP request，然后由服務(wù)器返回最新的數(shù)據(jù)給客戶端的瀏覽器。這種傳統(tǒng)的HTTP request 的模式帶來很明顯的缺點(diǎn) – 瀏覽器需要不斷的向服務(wù)器發(fā)出請求，然而HTTP request 的header是非常長的，里面包含的有用數(shù)據(jù)可能只是一個(gè)很小的值，這樣會占用很多的帶寬。
而比較新的技術(shù)去做輪詢的效果是Comet – 用了AJAX。但這種技術(shù)雖然可達(dá)到全雙工通信，但依然需要發(fā)出請求。
在 WebSocket API，瀏覽器和服務(wù)器只需要做一個(gè)握手的動作，然后，瀏覽器和服務(wù)器之間就形成了一條快速通道。兩者之間就直接可以數(shù)據(jù)互相傳送。在此WebSocket 協(xié)議中，為我們實(shí)現(xiàn)即時(shí)服務(wù)帶來了兩大好處：
1. Header
互相溝通的Header是很小的-大概只有 2 Bytes
2. Server Push
服務(wù)器的推送，服務(wù)器不再被動的接收到瀏覽器的request之后才返回?cái)?shù)據(jù)，而是在有新數(shù)據(jù)時(shí)就主動推送給瀏覽器。
一、項(xiàng)目簡介
WebSocket是HTML5一種新的協(xié)議，它實(shí)現(xiàn)了瀏覽器與服務(wù)器全雙工通信，這里就將使用WebSocket來開發(fā)網(wǎng)頁聊天室，前端框架會使用AmazeUI，后臺使用Java，編輯器使用UMEditor。
二、涉及知識點(diǎn)
網(wǎng)頁前端（HTML+CSS+JS）和Java
三、軟件環(huán)境 Tomcat 7 JDK 7 Eclipse JavaEE 現(xiàn)代瀏覽器
四、效果截圖
效果1
效果2
五、項(xiàng)目實(shí)戰(zhàn)
1. 新建項(xiàng)目
打開Eclipse JavaEE，新建一個(gè)名為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這幾個(gè)包放在WebContent/WEB-INF/lib目錄下，最后把項(xiàng)目發(fā)布到Tomcat服務(wù)器上，到此空項(xiàng)目就搭建完成了。
2. 編寫前端頁面
在WebContent目錄下新建一個(gè)名為index.jsp的頁面，這里使用了AmazeUI框架，它是一個(gè)跨屏自適應(yīng)的前端框架，消息輸入框使用了UMEditor，它是一個(gè)富文本在線編輯器，能讓我們的消息內(nèi)容多姿多彩。
首先從 AmazeUI官網(wǎng) 下載壓縮包，然后解壓把a(bǔ)ssets文件夾拷貝到WebContent目錄下，這樣我們就能使用AmazeUI了。
再從 UEditer官網(wǎng) 下載Mini版的JSP版本壓縮包，解壓后把整個(gè)目錄拷貝到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');
// 使昵稱框獲取焦點(diǎn)
$('#nickname')[0].focus();
});
</script>
</body>
</html>
編寫完成之后啟動Tomcat服務(wù)器，然后訪問 http://localhost:8080/Chat/index.jsp ，會看到如下界面。
3. 編寫后臺代碼
新建一個(gè)com.shiyanlou.chat的包，在包中創(chuàng)建一個(gè)名為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)閉會話時(shí)的操作
}
@OnError
public void error(Throwable t) {
// 添加處理錯(cuò)誤的操作
}
}
4. 前后臺交互
后臺寫完了，前臺要用WebSocket連接后臺，需要新建一個(gè)WebSocket對象，然后就可以和服務(wù)器端進(jìn)行交互，從瀏覽器發(fā)送消息給服務(wù)器端，同時(shí)要驗(yàn)證輸入框的內(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);
};
// 點(diǎn)擊Send按鈕時(shí)的操作
$('#send').on('click', function() {
var nickname = $('#nickname').val();
if (!um.hasContents()) { // 判斷消息輸入框是否為空
// 消息輸入框獲取焦點(diǎn)
um.focus();
// 添加抖動效果
$('.edui-container').addClass('am-animation-shake');
setTimeout("$('.edui-container').removeClass('am-animation-shake')", 1000);
} else if (nickname == '') { // 判斷昵稱框是否為空
//昵稱框獲取焦點(diǎn)
$('#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('');
// 消息輸入框獲取焦點(diǎn)
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)頁聊天室就完成了，你可以多開幾個(gè)窗口或在局域網(wǎng)中邀請小伙伴們來一起測試。
六、小結(jié)
本次項(xiàng)目課使用WebSocket實(shí)現(xiàn)了簡單的網(wǎng)頁聊天室，其實(shí)WebSocket不僅可以應(yīng)用于瀏覽器，也可以應(yīng)用于桌面客戶端。
七、思考題
本次項(xiàng)目課只是簡單的實(shí)現(xiàn)聊天室，其實(shí)還有很多功能可以增加，例如頭像上傳功能、一對一聊天功能等，讓我們一起來完善聊天室吧。
看到這里想不想馬上去試試，點(diǎn)擊這里--- 為你免費(fèi)提供在線編譯環(huán)境，讓你不再為搭建環(huán)境而煩惱
以上所述是小編給大家介紹的使用Java和WebSocket實(shí)現(xiàn)網(wǎng)頁聊天室實(shí)例代碼的相關(guān)知識，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
- WebSocket(java版)服務(wù)核心實(shí)例代碼
- Java Socket編程實(shí)現(xiàn)群聊實(shí)踐案例
- Java通過ServerSocket與Socket實(shí)現(xiàn)通信過程
- java網(wǎng)絡(luò)編程之socket網(wǎng)絡(luò)編程示例(服務(wù)器端/客戶端)
- java使用Socket類接收和發(fā)送數(shù)據(jù)
- java socket編程實(shí)例代碼講解
- 簡單的java socket客戶端和服務(wù)端示例
- Java后端Tomcat實(shí)現(xiàn)WebSocket實(shí)例教程
- 教你怎么使用Java實(shí)現(xiàn)WebSocket
- Java Socket通信（一）之客戶端程序 發(fā)送和接收數(shù)據(jù)
- 基于Java Socket實(shí)現(xiàn)一個(gè)簡易在線聊天功能（一）
- Java網(wǎng)絡(luò)編程：Socket套接字、TCP和UDP協(xié)議以及Java高性能實(shí)戰(zhàn)
相關(guān)文章
這篇文章主要對java中的匿名內(nèi)部類的詳細(xì)總結(jié)，需要的朋友可以參考下2017-04-04
這篇文章主要介紹了Java之ThreadLocal使用常見和方式案例講解,本篇文章通過簡要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-08-08
解決Mybatis 大數(shù)據(jù)量的批量insert問題
這篇文章主要介紹了解決Mybatis 大數(shù)據(jù)量的批量insert問題，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2021-01-01
這篇文章主要介紹了Java基礎(chǔ)之動態(tài)代理Cglib詳解,文中有非常詳細(xì)的代碼示例,對正在學(xué)習(xí)java基礎(chǔ)的小伙伴們有非常好的幫助,需要的朋友可以參考下2021-05-05
Spring boot 應(yīng)用實(shí)現(xiàn)動態(tài)刷新配置詳解
這篇文章主要介紹了spring boot 配置動態(tài)刷新實(shí)現(xiàn)詳解,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2021-09-09
mybatis使用雙層<foreach>循環(huán)嵌套方式
在Mybatis中使用雙層循環(huán)嵌套插入數(shù)據(jù)可以有效減少數(shù)據(jù)庫IO操作,提高性能,通過在mapper.xml中定義雙層集合來實(shí)現(xiàn),外層集合為實(shí)體類中的集合字段,內(nèi)層集合為集合字段中的另一個(gè)集合,通過這種方式,可以在業(yè)務(wù)代碼中減少循環(huán)插入的次數(shù)2024-09-09
這篇文章主要介紹了spring配置不掃描service層的原因解答，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
本篇文章主要介紹了Java使用File類遍歷目錄及文件實(shí)例代碼，詳細(xì)的介紹了File類的使用，有興趣的可以了解一下。2017-04-04
基于Java實(shí)將現(xiàn)Excel轉(zhuǎn)換為HTML
在當(dāng)今數(shù)據(jù)驅(qū)動的時(shí)代,Excel?作為數(shù)據(jù)存儲和分析的利器,幾乎無處不在,,本文將深入探討如何利用?Java,結(jié)合強(qiáng)大的?Spire.XLS?for?Java?庫,輕松實(shí)現(xiàn)?Excel?到?HTML?的高效轉(zhuǎn)換,感興趣的可以了解下2025-08-08
這篇文章主要介紹了java長整除問題，有需要的朋友可以參考一下2013-11-11