傳統 HTTP 輪詢模式存在嚴重缺陷：客戶端頻繁發起請求，Header 開銷大，實時性差。HTML5 WebSocket 協議解決了這些問題：
Chatjson-lib, ezmorph, commons-* 等 JAR 至 WEB-INF/libassets 目錄至 WebContentumeditor 目錄至 WebContent<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<title>ShiYanLou Chat</title>
<link rel="stylesheet" href="assets/css/amazeui.min.css">
<link rel="stylesheet" href="assets/css/app.css">
<link href="umeditor/themes/default/css/umeditor.css" rel="stylesheet">
<style>
.chat-content-container { height: 29rem; overflow-y: scroll; border: 1px solid silver; }
</style>
</head>
<body>
<!-- 標題區 -->
<div class="title"><h1 class="am-text-primary">ShiYanLou Chat</h1></div>
<!-- 聊天內容區 -->
<div class="chat-content">
<ul id="message-list" class="am-comments-list am-comments-list-flip"></ul>
</div>
<!-- 輸入區 -->
<div class="message-input am-margin-top">
<script type="text/plain" id="myEditor"></script> <!-- UMEditor -->
<input id="nickname" type="text" placeholder="Please enter nickname"/>
<button id="send" class="am-btn am-btn-primary"><i class="am-icon-send"></i> Send</button>
</div>
<!-- JS 庫 -->
<script src="assets/js/jquery.min.js"></script>
<script src="umeditor/umeditor.config.js"></script>
<script 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();
// 建立 WebSocket 連接
var socket = new WebSocket('ws://${pageContext.request.getServerName()}:${pageContext.request.getServerPort()}${pageContext.request.contextPath}/websocket');
// 接收服務端消息
socket.onmessage = function(event) { addMessage(event.data); };
// 發送按鈕點擊
$('#send').on('click', function() {
var nickname = $('#nickname').val();
if (!um.hasContents()) { shakeEditor(); return; }
if (!nickname) { shakeNickname(); return; }
socket.send(JSON.stringify({ content: um.getContent(), nickname: nickname }));
um.setContent(''); um.focus();
});
function addMessage(data) {
var msg = JSON.parse(data);
var html = '<li class="am-comment ' + (msg.isSelf ? 'am-comment-flip' : '') + '">' +
'<img src="assets/images/' + (msg.isSelf ? 'self.png' : 'others.jpg') + '" class="am-comment-avater"/>' +
'<div class="am-comment-main"><header><a class="am-comment-author">' + msg.nickname +
'</a><time>' + msg.date + '</time></header>' +
'<div class="am-comment-bd">' + msg.content + '</div></div></li>';
$(html).appendTo('#message-list');
$(".chat-content-container").scrollTop($(".chat-content-container")[0].scrollHeight);
}
function shakeEditor() { /* 搖晃動畫 */ }
function shakeNickname() { /* 搖晃動畫 */ }
});
</script>
</body>
</html>package com.shiyanlou.chat;
import javax.websocket.*;
import javax.websocket.server.ServerEndpoint;
import net.sf.json.JSONObject;
import java.text.SimpleDateFormat;
import java.util.Date;
@ServerEndpoint("/websocket")
public class ChatServer {
private static final SimpleDateFormat DATE_FORMAT = new SimpleDateFormat("yyyy-MM-dd HH:mm");
@OnOpen
public void onOpen(Session session) { /* 可做初始化 */ }
@OnMessage
public void onMessage(String message, Session session) {
JSONObject json = JSONObject.fromObject(message);
json.put("date", DATE_FORMAT.format(new Date()));
// 廣播給所有在線會話
for (Session openSession : session.getOpenSessions()) {
json.put("isSelf", openSession.equals(session)); // 標記是否自己發送
openSession.getAsyncRemote().sendText(json.toString());
}
}
@OnClose public void onClose() { /* 清理資源 */ }
@OnError public void onError(Throwable t) { t.printStackTrace(); }
}content, nickname, date, isSelf。https://localhost:8080/Chat/index.jsp本文完整演示了基於 Java 原生 WebSocket API 構建網頁聊天室的全過程：從項目搭建、前端 UI 集成、後端端點開發到前後端 JSON 交互。WebSocket 以其輕量、高效、雙向通訊特性，成為實時 Web 應用的首選技術。掌握其核心 API 與前後端協作模式，可快速構建即時通訊、協作編輯、實時監控等多類場景應用。
