| | <!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> |
