org1/gitea-pages
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs: simplify js_ws example

Browse Source
This commit is contained in:
dragon
2026-01-29 14:15:08 +08:00
parent c630b7e34f
commit 8d7c7d2110
2 changed files with 57 additions and 364 deletions
Download Patch File Download Diff File Expand all files Collapse all files

390
examples/js_ws/index.html
View File

@@ -3,376 +3,80 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WebSocket聊天客户端</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
}
.chat-container {
width: 100%;
max-width: 900px;
height: 85vh;
background-color: white;
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
display: flex;
flex-direction: column;
overflow: hidden;
}
.header {
background: linear-gradient(to right, #4a00e0, #8e2de2);
color: white;
padding: 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
.header-content {
display: flex;
align-items: center;
gap: 15px;
}
.status {
display: flex;
align-items: center;
gap: 8px;
}
.status-indicator {
width: 10px;
height: 10px;
border-radius: 50%;
}
.status-connecting {
background-color: #ffc107;
}
.status-connected {
background-color: #28a745;
}
.status-disconnected {
background-color: #dc3545;
}
.connection-btn {
padding: 8px 16px;
border: none;
border-radius: 20px;
cursor: pointer;
font-weight: 600;
background: rgba(255, 255, 255, 0.2);
color: white;
transition: all 0.3s;
}
.connection-btn:hover {
background: rgba(255, 255, 255, 0.3);
transform: translateY(-2px);
}
.chat-area {
flex: 1;
padding: 20px;
overflow-y: auto;
background-color: #f8f9fa;
display: flex;
flex-direction: column;
gap: 15px;
}
.message {
max-width: 70%;
padding: 12px 18px;
border-radius: 18px;
position: relative;
line-height: 1.4;
word-wrap: break-word;
}
.user-message {
align-self: flex-end;
background: linear-gradient(to right, #4a00e0, #8e2de2);
color: white;
border-bottom-right-radius: 5px;
}
.server-message {
align-self: flex-start;
background-color: white;
color: #333;
border: 1px solid #e0e0e0;
border-bottom-left-radius: 5px;
}
.message-time {
font-size: 11px;
margin-top: 5px;
opacity: 0.7;
text-align: right;
}
.input-area {
padding: 20px;
background-color: white;
border-top: 1px solid #e0e0e0;
display: flex;
gap: 10px;
}
.input-area input {
flex: 1;
padding: 12px 15px;
border: 1px solid #ddd;
border-radius: 25px;
outline: none;
font-size: 16px;
transition: all 0.3s;
}
.input-area input:focus {
border-color: #8e2de2;
box-shadow: 0 0 0 2px rgba(142, 45, 226, 0.2);
}
.send-btn {
padding: 12px 25px;
border: none;
border-radius: 25px;
cursor: pointer;
font-weight: 600;
background: linear-gradient(to right, #4a00e0, #8e2de2);
color: white;
transition: all 0.3s;
}
.send-btn:hover {
background: linear-gradient(to right, #3a00b0, #7a1dc2);
transform: translateY(-2px);
}
.send-btn:disabled {
background: #cccccc;
cursor: not-allowed;
transform: none;
}
.empty-state {
text-align: center;
color: #6c757d;
margin-top: 50px;
}
.empty-state i {
font-size: 48px;
margin-bottom: 15px;
opacity: 0.5;
}
@media (max-width: 768px) {
.chat-container {
height: 95vh;
}
.message {
max-width: 85%;
}
.header {
flex-direction: column;
gap: 10px;
text-align: center;
}
}
</style>
<title>Simple WebSocket Example</title>
</head>
<body>
<div class="chat-container">
<div class="header">
<div class="header-content">
<h1>WebSocket聊天客户端</h1>
<div class="status">
<div class="status-indicator status-disconnected"></div>
<span id="status-text">未连接</span>
</div>
</div>
<button class="connection-btn" id="connectionButton" onclick="toggleConnection()">连接</button>
</div>
<h1>Simple WebSocket Echo</h1>
<div id="status">Disconnected</div>
<div id="messages" style="border: 1px solid #ccc; height: 300px; overflow-y: scroll; padding: 10px; margin-bottom: 10px;"></div>
<input type="text" id="input" placeholder="Type a message...">
<button onclick="send()">Send</button>
<button onclick="connect()">Connect</button>
<button onclick="disconnect()">Disconnect</button>
<div class="chat-area" id="chatArea">
<div class="empty-state">
<i>💬</i>
<p>连接服务器开始聊天</p>
</div>
</div>
<div class="input-area">
<input type="text" id="messageInput" placeholder="输入消息..." disabled>
<button class="send-btn" id="sendButton" onclick="sendMessage()" disabled>发送</button>
</div>
</div>
<script>
let ws = null;
let isConnected = false;
const statusText = document.getElementById('status-text');
const statusIndicator = document.querySelector('.status-indicator');
const chatArea = document.getElementById('chatArea');
const messageInput = document.getElementById('messageInput');
const sendButton = document.getElementById('sendButton');
const connectionButton = document.getElementById('connectionButton');
function toggleConnection() {
if (isConnected) {
disconnect();
} else {
connect();
}
}
<script>
let ws;
const statusDiv = document.getElementById('status');
const messagesDiv = document.getElementById('messages');
const input = document.getElementById('input');
function connect() {
updateStatus('正在连接...', 'status-connecting');
connectionButton.textContent = '连接中...';
if (ws) return;
// Get the current host (including port)
const host = window.location.host;
// Determine the protocol (ws or wss) based on the current page protocol
const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
// Construct the WebSocket URL. Note the leading slash for absolute path.
// Since .pages.yaml maps "ws" to the JS handler, we connect to /ws
const wsUrl = `${protocol}//${host}/ws`;
try {
ws = new WebSocket('/ws');
console.log('Connecting to:', wsUrl); // Debug log
ws = new WebSocket(wsUrl);
ws.onopen = () => {
isConnected = true;
updateStatus('已连接', 'status-connected');
connectionButton.textContent = '断开连接';
enableControls(true);
addSystemMessage('连接成功，可以开始聊天了');
statusDiv.innerText = 'Connected';
log('Connected to ' + wsUrl);
};
ws.onmessage = event => {
addServerMessage(event.data);
ws.onmessage = (event) => {
log('Received: ' + event.data);
};
ws.onclose = () => {
isConnected = false;
updateStatus('未连接', 'status-disconnected');
connectionButton.textContent = '连接';
enableControls(false);
addSystemMessage('连接已断开');
statusDiv.innerText = 'Disconnected';
log('Disconnected');
ws = null;
};
ws.onerror = error => {
isConnected = false;
updateStatus('连接错误', 'status-disconnected');
connectionButton.textContent = '连接';
enableControls(false);
addSystemMessage('连接错误，请检查服务器');
ws.onerror = (error) => {
statusDiv.innerText = 'Error';
log('Error: ' + error);
};
} catch (error) {
isConnected = false;
updateStatus('连接失败', 'status-disconnected');
connectionButton.textContent = '连接';
enableControls(false);
}
}
function disconnect() {
if (ws) {
ws.close();
ws = null;
}
isConnected = false;
connectionButton.textContent = '连接';
enableControls(false);
addSystemMessage('已断开连接');
}
function sendMessage() {
const message = messageInput.value.trim();
if (message) {
ws.send(message);
addUserMessage(message);
messageInput.value = '';
}
}
function addUserMessage(message) {
addMessage(message, 'user');
}
function addServerMessage(message) {
addMessage(message, 'server');
}
function addSystemMessage(message) {
addMessage(message, 'system');
}
function addMessage(message, type) {
const emptyState = document.querySelector('.empty-state');
if (emptyState) {
emptyState.remove();
}
const messageElement = document.createElement('div');
const time = new Date().toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'});
if (type === 'user') {
messageElement.className = 'message user-message';
messageElement.innerHTML = `
${message}
<div class="message-time">${time}</div>
`;
} else if (type === 'server') {
messageElement.className = 'message server-message';
messageElement.innerHTML = `
${message}
<div class="message-time">${time}</div>
`;
function send() {
if (ws && ws.readyState === WebSocket.OPEN) {
const msg = input.value;
ws.send(msg);
log('Sent: ' + msg);
input.value = '';
} else {
messageElement.className = 'message system-message';
messageElement.style.alignSelf = 'center';
messageElement.style.maxWidth = '100%';
messageElement.style.backgroundColor = 'rgba(0,0,0,0.05)';
messageElement.style.color = '#6c757d';
messageElement.style.fontSize = '14px';
messageElement.style.textAlign = 'center';
messageElement.style.borderRadius = '10px';
messageElement.textContent = message;
alert('Not connected');
}
}
chatArea.appendChild(messageElement);
chatArea.scrollTop = chatArea.scrollHeight;
function log(msg) {
const div = document.createElement('div');
div.innerText = msg;
messagesDiv.appendChild(div);
messagesDiv.scrollTop = messagesDiv.scrollHeight;
}
function updateStatus(message, statusClass) {
statusText.textContent = message;
statusIndicator.className = 'status-indicator ' + statusClass;
}
function enableControls(connected) {
messageInput.disabled = !connected;
sendButton.disabled = !connected;
}
messageInput.addEventListener('keypress', function(event) {
if (event.key === 'Enter') {
sendMessage();
}
});
</script>
</script>
</body>
</html>

13
examples/js_ws/index.js
View File

@@ -2,17 +2,6 @@
let ws = websocket();
while (true) {
let data = await ws.readText();
switch (data) {
case "exit":
return
case "panic":
throw Error("错误");
case "date":
await ws.writeText(new Date().toJSON())
break
default:
await ws.writeText("收到信息:" + data)
break;
}
await ws.writeText("ECHO: " + data)
}
})()