59 lines
1.7 KiB
HTML
59 lines
1.7 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Chat Room</title>
|
|
</head>
|
|
<body>
|
|
<input type="text" id="messageInput" />
|
|
<button onclick="sendMessage()">Send Message</button>
|
|
|
|
<input type="file" id="fileInput" />
|
|
<button onclick="sendFile()">Upload File</button>
|
|
|
|
<div id="messageContainer"></div>
|
|
<script>
|
|
const port = !window.location.port ? '' : `:${window.location.port}`;
|
|
const ws = new WebSocket(`ws://${window.location.hostname}${port}`);
|
|
const messageContainer = document.getElementById('messageContainer');
|
|
|
|
ws.onmessage = function(event) {
|
|
const data = JSON.parse(event.data);
|
|
if (data.type === 'file') {
|
|
// 处理文件消息，例如显示文件下载链接
|
|
const fileUrl = window.location.origin + data.url;
|
|
const fileLink = document.createElement('a');
|
|
fileLink.href = fileUrl;
|
|
fileLink.target = '_blank';
|
|
fileLink.textContent = fileUrl;
|
|
messageContainer.appendChild(fileLink);
|
|
messageContainer.appendChild(document.createElement('br'));
|
|
} else {
|
|
// 处理文本消息
|
|
const messageElement = document.createElement('p');
|
|
messageElement.textContent = 'Received message: ' + data.msg;
|
|
messageContainer.appendChild(messageElement);
|
|
}
|
|
};
|
|
|
|
function sendMessage() {
|
|
const messageInput = document.getElementById('messageInput');
|
|
const message = messageInput.value;
|
|
ws.send(message);
|
|
messageInput.value = '';
|
|
}
|
|
|
|
function sendFile() {
|
|
const fileInput = document.getElementById('fileInput');
|
|
const file = fileInput.files[0];
|
|
const formData = new FormData();
|
|
formData.append('file', file);
|
|
|
|
fetch('/upload', {
|
|
method: 'POST',
|
|
body: formData
|
|
});
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|