임의의 이벤트 발생시키기

사용자가 메시지 전송 폼에 메시지를 입력한 후 전송하면, 해당 메시지를 콘솔에 출력하도록 만들어봅시다.

이벤트 발생시키기

그러기 위해서는 클라이언트의 특정 동작이 발생했을 때, 서버로 특정 이벤트를 전달해 해당 동작을 처리할 수 있도록 해야 합니다. 고로, index.html을 다음과 같이 작성합니다.

<script>
    const socket = io();

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

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

html 내부에 작성된 form과 input 태그의 id로 해당 오브젝트를 가져옵니다. 이후, form에는 submit 이벤트가 발생했을 때, 콜백으로 주어진 이벤트 핸들러를 동작할 수 있도록 합니다.

콜백으로 전달된 이벤트 핸들러는 input에 입력된 값이 있을 경우, 해당 값을 서버로 chat message라는 이벤트 이름으로 전달합니다. socket.emit이 그 역할을 한다고 보면 될 것 같습니다.

chat message 이벤트 처리

서버 쪽 코드의 수정은 매우 간단합니다. 전에 connect나 disconnect 이벤트를 처리했을 때와 마찬가지로, 다음과 같은 코드를 작성하면 되기 때문입니다.

io.on('connection', (socket) => {
  console.log('user connected.');

  // chat message 이벤트 처리
  socket.on('chat message', (message) => {
    console.log('message : ' + message);
  });
  
  socket.on('disconnect', () => {
    console.log('user disconnected.');
  });
});

실행 결과

사용자가 입력한 메시지가 콘솔 창에 정상적으로 출력되는 것을 볼 수 있습니다.