|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Simple Chat</title> |
|
|
<script src="https://unpkg.com/peerjs@1.4.7/dist/peerjs.min.js"></script> |
|
|
<style> |
|
|
body { |
|
|
font-family: monospace; |
|
|
max-width: 600px; |
|
|
margin: 0 auto; |
|
|
padding: 20px; |
|
|
} |
|
|
#message-container { |
|
|
height: 300px; |
|
|
border: 1px solid #ccc; |
|
|
padding: 10px; |
|
|
overflow-y: auto; |
|
|
margin-bottom: 10px; |
|
|
} |
|
|
#message-input { |
|
|
width: 80%; |
|
|
padding: 8px; |
|
|
} |
|
|
#send-btn { |
|
|
width: 18%; |
|
|
padding: 8px; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<h1>Simple Chat</h1> |
|
|
<div id="message-container"> |
|
|
<div>Connecting to chat server...</div> |
|
|
</div> |
|
|
<div> |
|
|
<input type="text" id="message-input" placeholder="Type message here..."> |
|
|
<button id="send-btn">Send</button> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
document.addEventListener('DOMContentLoaded', () => { |
|
|
const messageContainer = document.getElementById('message-container'); |
|
|
const messageInput = document.getElementById('message-input'); |
|
|
const sendBtn = document.getElementById('send-btn'); |
|
|
|
|
|
|
|
|
const peer = new Peer({ |
|
|
config: { |
|
|
'iceServers': [ |
|
|
{ urls: 'stun:stun.l.google.com:19302' }, |
|
|
{ urls: 'stun:global.stun.twilio.com:3478?transport=udp' }, |
|
|
{ |
|
|
urls: 'turn:numb.viagenie.ca', |
|
|
username: 'webrtc@live.com', |
|
|
credential: 'muazkh' |
|
|
} |
|
|
] |
|
|
} |
|
|
}); |
|
|
|
|
|
let conn; |
|
|
const roomId = 'simple-chat-room'; |
|
|
|
|
|
peer.on('open', (id) => { |
|
|
messageContainer.innerHTML = `<div>Connected to chat room. Your ID: ${id}</div>`; |
|
|
|
|
|
|
|
|
conn = peer.connect(roomId); |
|
|
|
|
|
|
|
|
conn.on('open', () => { |
|
|
appendMessage('Connected to chat room'); |
|
|
}); |
|
|
|
|
|
conn.on('data', (data) => { |
|
|
appendMessage(data); |
|
|
}); |
|
|
|
|
|
conn.on('close', () => { |
|
|
appendMessage('Connection closed'); |
|
|
}); |
|
|
}); |
|
|
|
|
|
peer.on('connection', (connection) => { |
|
|
conn = connection; |
|
|
conn.on('data', (data) => { |
|
|
appendMessage(data); |
|
|
}); |
|
|
}); |
|
|
|
|
|
function appendMessage(message) { |
|
|
const messageElement = document.createElement('div'); |
|
|
messageElement.textContent = message; |
|
|
messageContainer.appendChild(messageElement); |
|
|
messageContainer.scrollTop = messageContainer.scrollHeight; |
|
|
} |
|
|
|
|
|
sendBtn.addEventListener('click', sendMessage); |
|
|
messageInput.addEventListener('keypress', (e) => { |
|
|
if (e.key === 'Enter') sendMessage(); |
|
|
}); |
|
|
|
|
|
function sendMessage() { |
|
|
const message = messageInput.value.trim(); |
|
|
if (message && conn && conn.open) { |
|
|
conn.send(message); |
|
|
appendMessage(`You: ${message}`); |
|
|
messageInput.value = ''; |
|
|
} |
|
|
} |
|
|
}); |
|
|
</script> |
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=commit3r/temp" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
