Ana içeriğe geç

Eğitim Adımı

Yayınlama

Bir sonraki hedefimiz, sunucudan diğer kullanıcılara etkinlik göndermektir.

ipucu

Herkese etkinlik göndermek için Socket.IO, io.emit() yöntemini sağlar.

// bu, tüm bağlı soketlere etkinliği gönderir
io.emit('hello', 'world');

Belirli bir yayım yapan soket haricindeki tüm kullanıcılara mesaj göndermek isterseniz, o soketten yayım yapmak için broadcast bayrağını kullanabiliriz:

io.on('connection', (socket) => {
socket.broadcast.emit('hi');
});

Bu durumda, basitlik açısından, göndericiyi de dahil ederek herkese mesajı göndereceğiz:

io.on('connection', (socket) => {
socket.on('chat message', (msg) => {
io.emit('chat message', msg);
});
});

Ve istemci tarafında chat message olayını yakaladığımızda, bunu sayfada dahil edeceğiz.

<script src="/socket.io/socket.io.js"></script>
<script>
const socket = io();

const form = document.getElementById('form');
const input = document.getElementById('input');
const messages = document.getElementById('messages');

form.addEventListener('submit', (e) => {
e.preventDefault();
if (input.value) {
socket.emit('chat message', input.value);
input.value = '';
}
});

socket.on('chat message', (msg) => {
const item = document.createElement('li');
item.textContent = msg;
messages.appendChild(item);
window.scrollTo(0, document.body.scrollHeight);
});
</script>
<script src="/socket.io/socket.io.js"></script>
<script>
var socket = io();

var form = document.getElementById('form');
var input = document.getElementById('input');
var messages = document.getElementById('messages');

form.addEventListener('submit', function(e) {
e.preventDefault();
if (input.value) {
socket.emit('chat message', input.value);
input.value = '';
}
});

socket.on('chat message', function(msg) {
var item = document.createElement('li');
item.textContent = msg;
messages.appendChild(item);
window.scrollTo(0, document.body.scrollHeight);
});
</script>

Bunu eylemde görelim:

bilgi

Bu örneği doğrudan tarayıcınızda çalıştırabilirsiniz:

Bu örneği doğrudan tarayıcınızda çalıştırabilirsiniz: