Etap

Olay Yayma

Socket.IO'nun arkasındaki ana fikir, istediğiniz herhangi bir olayı, istediğiniz herhangi bir veri ile gönderip alabilmenizdir. JSON olarak kodlanabilen herhangi bir nesne iş görecektir ve ikili veriler de desteklenmektedir.

Kullanıcı bir mesaj yazdığında, sunucunun bunu chat message olayı olarak almasını sağlayalım. index.html içindeki script bölümü aşağıdaki gibi görünmelidir:

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

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

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

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

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

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

Ve index.js içinde chat message olayını yazdırıyoruz:

io.on('connection', (socket) => {
  socket.on('chat message', (msg) => {
    console.log('message: ' + msg);
  });
});

Sonuç aşağıdaki video gibi olmalıdır:

bilgi

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

Olay Yayma​

Olay Yayma