ZOOM 클론 코딩 (WebRTC, WebSocket) - 4

킹갓제네럴노마드코더의 무료 강의를 공부하며 작성하는 포스트입니다. 노마드코더에게 감사하십시오. 휴먼

headerimg

방(ROOM)을 만들자!

// app
socket.emit('enter_room', { payload: input.value });
// enter_room 이벤트를 만들어서 보내면?

// server
socket.on('enter_room', msg => console.log(msg));
// 서버에서 enter_room 이벤트를 받아서 실행 시킨다.

소켓은 이벤트 emit에 어떤 이벤트 이름을 써도 상관 없다. 내가 원하는 이벤트 이름을 설정하면 서버에서 바로 받아 쓸 수 있다.

정말 간변하게 서버와 연결을 유지하면서 통신을 주고 받을 수 있다.

app.js

const socket = io();

const welcome = document.querySelector('#welcome');
const form = welcome.querySelector('form');

const handleRoomSubmit = (event) => {
  event.preventDefault();
  const input = form.querySelector('input');
    socket.emit('enter_room', { payload: input.value }, () => {
    console.log('server is done!!');
  });
  input.value = '';
}
form.addEventListener('submit', handleRoomSubmit);

거기다가 callback 설정도 할 수 있다.

server.js

// ...
const ioServer = socketIO(httpServer);

ioServer.on('connection', (socket) => {
  socket.on('enter_room', (msg, callback) => {
    console.log(msg);
    setTimeout(() => {
      callback();
    }, 1000);
  });
})

// ...

1초후 클라이언트에 콜백이 실행된다.

에러 헨들링은?

socket.timeout(5000).emit("my-event", (err) => {
  if (err) {
    // the other side did not acknowledge the event in the given delay
  }
});

timeout도 설정할 수 있고 어밋에서 에러 헨들링도 설정이 가능하다.


© 2018. All rights reserved.