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