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

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

headerimg

emit은 뭐든 보내도된다!

// client
socket.emit('enter_room',
  { payload: input.value },
  'string',
  123,
  true,
  false,
  ['a', 'r', 'r', 'a', 'y'],
  (res) => {
    console.log(`Hello~ ${res.msg}`);
  }
);
// 마지막 인자에는 callback 과 같은 함수를 보낼 수 있음!

// server
socket.on('enter_room', (a,b,c,d,e,f) => {
  console.log(a, b, c, d, e, f);
  setTimeout(()=> {
    callback({ msg: "World!" });
  }, 2000)
});
// 서버는 모든 인자를 받을 수 있다.

이렇게 object, string, number, boolean, array, function 까지 아무거나 보낼 수 있다.

socketIO에서 타임아웃 구현

// client
const withTimeout = (onSuccess, onTimeout, timeout = 3000) => {
  let called = false;

  const timer = setTimeout(() => {
    if(called) return;
    called = true;
    onTimeout();
  }, timeout);

  return (...args) => {
    if (called) return;
    called = true;
    clearTimeout(timer);
    onSuccess.apply(this, args);
  };
};

socket.emit("enter_room", { data: input.value }, withTimeout(({ status })=>{
  console.log("onSuccess! - status: ", status);
}, () => {
  console.log('timeout!');
}));


// server
socket.on("enter_room", (payload, callback) => {
  setTimeout(() => {
    callback({status: '200'});
  });
});

응답이 없으면 별도의 timer에 저장된 setTimeout 함수가 실행되도록하여 클라이언트가 타임아웃 에러처리를 할 수 있게한다.

Volatile events (휘발성 이벤트)

휘발성 이벤트는 연결 이슈로 보내지 못한 이벤트를 버리는 기능이다. 연결이 불안정한 온라인 게임에서 불 필요한 예전 케릭터 위치들은 버리고 최신 값들만 사용 할 때 유용하다. 어쩌면 채팅을 서버로 보내지 못하면 수동으로 다시 보내도록 하는 기능에도 사용 할 수 있겠다.

// server-side
io.on("connection", (socket) => {
  socket.on("ping", (count) => {
    console.log(count);
  });
});

// client-side
let count = 0;
setInterval(() => {
  socket.volatile.emit("ping", ++count);
}, 1000);

이렇게 count 3,4 를 건너뛰고 보낸다. volatile를 뺀다면 123456 순서대로 보낸다.


© 2018. All rights reserved.