Isaac/ChatRoom
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

dockerfile修改

Browse Source
This commit is contained in:
RichZDS
2026-02-04 13:06:11 +08:00
parent 15cea49f2d
commit 7b94177b83
8 changed files with 475 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

332
web/index.html
View File

@@ -1,38 +1,253 @@
<!DOCTYPE html>
<html>
<html lang="zh-CN">
<head>
<title>Chat Test</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>混沌聊天室 - 散修浅谈代码</title>
<style>
#messages { height: 300px; overflow-y: auto; border: 1px solid #ccc; padding: 10px; margin: 10px 0; }
input[type=text] { width: 70%; padding: 5px; }
button { padding: 5px 10px; margin: 5px; }
:root {
--bg-color: #f4f1de;
--ink-color: #2b2d42;
--accent-color: #8d99ae;
--gold-color: #d4af37;
--jade-color: #00a86b;
--scroll-bg: rgba(255, 255, 255, 0.6);
}
@font-face {
font-family: 'Kaiti';
src: local('STKaiti'), local('KaiTi'), local('楷体');
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: var(--bg-color);
background-image:
radial-gradient(circle at 10% 20%, rgba(0,0,0,0.02) 0%, transparent 20%),
radial-gradient(circle at 90% 80%, rgba(0,0,0,0.02) 0%, transparent 20%);
color: var(--ink-color);
font-family: 'Kaiti', serif;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 20px;
}
.chat-container {
width: 100%;
max-width: 900px;
background: var(--scroll-bg);
border: 2px solid var(--ink-color);
box-shadow: 0 0 30px rgba(0,0,0,0.1), inset 0 0 50px rgba(0,0,0,0.05);
position: relative;
backdrop-filter: blur(5px);
display: flex;
flex-direction: column;
height: 90vh;
}
/* 四角花纹 */
.chat-container::before, .chat-container::after {
content: '';
position: absolute;
width: 40px;
height: 40px;
border: 2px solid var(--ink-color);
pointer-events: none;
}
.chat-container::before { top: 10px; left: 10px; border-right: none; border-bottom: none; }
.chat-container::after { bottom: 10px; right: 10px; border-left: none; border-top: none; }
header {
padding: 20px;
text-align: center;
border-bottom: 1px solid var(--ink-color);
position: relative;
}
#online-count {
position: absolute;
right: 20px;
top: 20px;
font-size: 0.9rem;
color: var(--jade-color);
border: 1px solid var(--jade-color);
padding: 5px 10px;
border-radius: 15px;
background: rgba(255, 255, 255, 0.5);
}
h2 {
font-size: 2rem;
letter-spacing: 0.3rem;
margin-bottom: 10px;
}
.auth-section {
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
padding: 10px;
background: rgba(0,0,0,0.03);
}
#messages {
flex: 1;
overflow-y: auto;
padding: 20px;
display: flex;
flex-direction: column;
gap: 10px;
scrollbar-width: thin;
scrollbar-color: var(--ink-color) transparent;
}
#messages::-webkit-scrollbar {
width: 6px;
}
#messages::-webkit-scrollbar-thumb {
background-color: var(--ink-color);
}
.message-item {
padding: 8px 15px;
border-left: 3px solid var(--accent-color);
background: rgba(255,255,255,0.4);
animation: fadeIn 0.3s ease;
}
.message-time {
font-size: 0.8rem;
color: #888;
margin-right: 8px;
}
.message-tag {
font-size: 0.85rem;
padding: 2px 6px;
border-radius: 3px;
margin-right: 8px;
font-weight: bold;
}
.tag-broadcast { background: #ffe8d6; color: #d62828; }
.tag-room { background: #e9f5db; color: #588157; }
.tag-private { background: #e0e1dd; color: #1b263b; }
.tag-system { border: 1px solid var(--ink-color); }
.control-panel {
padding: 20px;
border-top: 1px solid var(--ink-color);
display: grid;
grid-template-columns: 1fr;
gap: 15px;
}
.input-group {
display: flex;
gap: 10px;
}
input {
padding: 10px 15px;
border: 1px solid var(--accent-color);
background: rgba(255,255,255,0.8);
font-family: 'Kaiti', serif;
font-size: 1rem;
flex: 1;
}
input:focus {
outline: none;
border-color: var(--ink-color);
box-shadow: 0 0 5px rgba(0,0,0,0.1);
}
.small-input {
width: 120px;
flex: none;
}
button {
padding: 10px 20px;
background: var(--ink-color);
color: white;
border: none;
cursor: pointer;
font-family: 'Kaiti', serif;
font-size: 1rem;
transition: all 0.3s;
}
button:hover {
background: #4a4e69;
transform: translateY(-2px);
}
button:active {
transform: translateY(0);
}
@keyframes fadeIn {
from { opacity: 0; transform: translateX(-10px); }
to { opacity: 1; transform: translateX(0); }
}
.status-msg {
text-align: center;
font-style: italic;
color: var(--accent-color);
font-size: 0.9rem;
margin: 5px 0;
}
</style>
</head>
<body>
<h2>多人聊天测试</h2>
<div>
<label>用户名: <input id="username" value="alice"></label>
<button onclick="connect()">连接</button>
</div>
<div class="chat-container">
<header>
<h2>混沌聊天室</h2>
<div id="online-count">当前道友: 0</div>
<div class="auth-section">
<span>道号:</span>
<input id="username" value="散修道友" class="small-input">
<button onclick="connect()">开启神识</button>
</div>
</header>
<div id="messages"></div>
<div id="messages">
<div class="status-msg">神识未开，请先开启神识以感应诸位道友...</div>
</div>
<div>
<input type="text" id="globalMsg" placeholder="全体消息...">
<button onclick="sendGlobal()">发送全体</button>
</div>
<div class="control-panel">
<!-- 全体消息 -->
<div class="input-group">
<input type="text" id="globalMsg" placeholder="传音诸天...">
<button onclick="sendGlobal()">诸天传音</button>
</div>
<div>
<input type="text" id="roomID" value="game" placeholder="房间ID">
<input type="text" id="roomMsg" placeholder="房间消息...">
<button onclick="sendRoom()">发送房间</button>
</div>
<!-- 房间消息 -->
<div class="input-group">
<input type="text" id="roomID" value="仙缘洞府" class="small-input" placeholder="秘境标识">
<input type="text" id="roomMsg" placeholder="传音秘境...">
<button onclick="sendRoom()">秘境传音</button>
</div>
<div>
<input type="text" id="toUser" value="bob" placeholder="私聊对象">
<input type="text" id="privateMsg" placeholder="私聊内容...">
<button onclick="sendPrivate()">发送私聊</button>
<!-- 私聊消息 -->
<div class="input-group">
<input type="text" id="toUser" value="某位道友" class="small-input" placeholder="道号">
<input type="text" id="privateMsg" placeholder="神识密语...">
<button onclick="sendPrivate()">神识密语</button>
</div>
</div>
</div>
<script>
@@ -40,29 +255,49 @@
function connect() {
const user = document.getElementById('username').value;
if (!user) { alert('请输入用户名'); return; }
if (!user) { alert('请留下道号'); return; }
if (ws) ws.close();
ws = new WebSocket(`ws://localhost:8080/ws?user=${user}`);
// 保持原有的逻辑地址，生产环境可能需要动态获取
const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
const host = window.location.host || 'localhost:8080';
ws = new WebSocket(`${protocol}//${host}/ws?user=${encodeURIComponent(user)}`);
ws.onopen = () => log('🟢 连接成功');
ws.onclose = () => log('🔴 连接断开');
ws.onerror = (err) => log('❌ 连接错误: ' + err.message);
ws.onopen = () => log('🟢 神识已开启，成功感应虚空', 'system');
ws.onclose = () => log('🔴 神识已断开，归于虚无', 'system');
ws.onerror = (err) => log('❌ 神识波动异常: ' + err.message, 'system');
ws.onmessage = (event) => {
try {
const msg = JSON.parse(event.data);
log(`[${msg.type}] ${msg.user || 'system'}: ${msg.content}`);
// 特殊处理在线人数
if (msg.type === 'user_count') {
document.getElementById('online-count').textContent = `当前道友: ${msg.count}`;
return;
}
let typeLabel = '';
let tagClass = '';
switch(msg.type) {
case 'broadcast': typeLabel = '诸天'; tagClass = 'tag-broadcast'; break;
case 'room': typeLabel = `秘境:${msg.room}`; tagClass = 'tag-room'; break;
case 'private': typeLabel = '密语'; tagClass = 'tag-private'; break;
default: typeLabel = '感应'; tagClass = 'tag-system';
}
displayMsg(msg.user || '无名氏', msg.content, typeLabel, tagClass);
} catch (e) {
log('⚠️ 无效消息: ' + event.data);
log('⚠️ 感应到未知因果: ' + event.data, 'system');
}
};
}
function sendGlobal() {
const content = document.getElementById('globalMsg').value;
if (!content) return;
if (!content || !ws) return;
ws.send(JSON.stringify({
type: 'broadcast',
user: '',
@@ -74,7 +309,7 @@
function sendRoom() {
const room = document.getElementById('roomID').value;
const content = document.getElementById('roomMsg').value;
if (!room || !content) return;
if (!room || !content || !ws) return;
ws.send(JSON.stringify({
type: 'room',
room: room,
@@ -86,7 +321,7 @@
function sendPrivate() {
const to = document.getElementById('toUser').value;
const content = document.getElementById('privateMsg').value;
if (!to || !content) return;
if (!to || !content || !ws) return;
ws.send(JSON.stringify({
type: 'private',
to: to,
@@ -95,12 +330,31 @@
document.getElementById('privateMsg').value = '';
}
function log(msg) {
function displayMsg(user, content, typeLabel, tagClass) {
const container = document.getElementById('messages');
const div = document.createElement('div');
div.textContent = `[${new Date().toLocaleTimeString()}] ${msg}`;
document.getElementById('messages').appendChild(div);
div.className = 'message-item';
const time = new Date().toLocaleTimeString();
div.innerHTML = `
<span class="message-time">[${time}]</span>
<span class="message-tag ${tagClass}">${typeLabel}</span>
<span class="message-user"><strong>${user}</strong>:</span>
<span class="message-content">${content}</span>
`;
container.appendChild(div);
div.scrollIntoView();
}
function log(msg, type) {
const container = document.getElementById('messages');
const div = document.createElement('div');
div.className = type === 'system' ? 'status-msg' : 'message-item';
div.textContent = type === 'system' ? msg : `[${new Date().toLocaleTimeString()}] ${msg}`;
container.appendChild(div);
div.scrollIntoView();
}
</script>
</body>
</html>
</html>