68 lines
2.3 KiB
HTML
68 lines
2.3 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="tr">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>MWSE — Chat Demo</title>
|
||
<script src="/script"></script>
|
||
<style>
|
||
body { font-family: sans-serif; max-width: 600px; margin: 2rem auto; padding: 0 1rem; }
|
||
h2 { margin-bottom: .5rem; }
|
||
#status { font-size: .85rem; color: #666; margin-bottom: .5rem; }
|
||
#log { border: 1px solid #ccc; height: 260px; overflow-y: auto; padding: 8px;
|
||
margin-bottom: 8px; border-radius: 4px; }
|
||
#log p { margin: 2px 0; font-size: .9rem; }
|
||
#log .system { color: #888; font-style: italic; }
|
||
#log .me { color: #006; font-weight: bold; }
|
||
#log .peer { color: #060; }
|
||
#controls { display: flex; gap: 6px; }
|
||
#msg { flex: 1; padding: 6px; }
|
||
button { padding: 6px 14px; cursor: pointer; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<h2>MWSE Chat Demo</h2>
|
||
<p id="status">Bağlanıyor…</p>
|
||
<div id="log"></div>
|
||
<div id="controls">
|
||
<input id="msg" placeholder="Mesaj yaz… (Enter)" onkeydown="if(event.key==='Enter') send()">
|
||
<button onclick="send()">Gönder</button>
|
||
</div>
|
||
|
||
<script>
|
||
// Bu demo ~20 satır JavaScript ile odalı gerçek zamanlı sohbet kurar.
|
||
// Birden fazla sekme / kullanıcı aynı "genel" odasına otomatik katılır.
|
||
|
||
const mwse = new MWSE({ endpoint: location.origin.replace(/^http/, 'ws') });
|
||
let room;
|
||
|
||
mwse.on('scope', async () => {
|
||
document.getElementById('status').textContent =
|
||
`Bağlandı: ${mwse.me.socketId}`;
|
||
|
||
room = mwse.room({ name: 'genel', joinType: 'free', ifexistsJoin: true });
|
||
await room.createRoom();
|
||
|
||
room.on('join', peer => log(`${peer.socketId} odaya katıldı`, 'system'));
|
||
room.on('eject', peer => log(`${peer.socketId} odadan ayrıldı`, 'system'));
|
||
room.on('message', (pack, peer) => log(`${peer.socketId}: ${pack.text}`, 'peer'));
|
||
});
|
||
|
||
function send() {
|
||
const el = document.getElementById('msg');
|
||
const text = el.value.trim();
|
||
if (!text || !room) return;
|
||
room.send({ text });
|
||
log(`ben: ${text}`, 'me');
|
||
el.value = '';
|
||
}
|
||
|
||
function log(text, cls = '') {
|
||
const p = Object.assign(document.createElement('p'), { textContent: text, className: cls });
|
||
const box = document.getElementById('log');
|
||
box.appendChild(p);
|
||
box.scrollTop = box.scrollHeight;
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|