2 분 소요

내가 코드 작업한 곳

이번 주 작업

웹 소캣 프로그래밍

HTTP처럼 stateless, 필요할 때만 연결하는 게 아닌 stateful, 항상 연결되어 있는 통신을 하게 해주면서 TCP보다는 간단하게 작성할 수 있는 통신 방식.

핸드셰이크

손에 손을 붙잡는 느낌으로 소켓 통신이 가능한지 확인하는 방법이며 현재 프로젝트에선 connect를 통해 보내고 있다.

//connection이란 게 발생할 때까지 대기한다.
    io.on('connection', (socket) => {
        //최초 커넥션이 맺어진 이후 계속 여기서 돌아간다.
        const userUUID = uuidv4();
        socket.on("event", (data)=>handleEvent(io,socket,data));

        socket.on('disconnection', (socket)=>handleDisconnect(socket,userUUID));
    })

연결은 브로드캐스트로 받고 있으며 개별 코드에 대해서 event와 disconnection을 실행하고 있다.
클라이언트 쪽에선 별도의 파일을 만들어서 관리하고 있다.

//localhost:3000으로 연결된 html 파일에서 연결 받는 것이고
//aws에 등록하면 이걸 바꿔야 할 수 있겠다.
//아마도 도메인을 할당하는 식으로 갈 것으로 보인다.
const socket = io('http://localhost:3000', {
  query: {
    clientVersion: CLIENT_VERSION,
  },
});

let userId = null;
socket.on('response', (data) => {
  console.log("responce");
  console.log(data);
  if(typeof data.id !== 'undefined')
  {
    const responseHandler = handlerMappings[data.id];
    const response = responseHandler(data.payload);
  }

});

socket.on('connection', (data) => {
  // console.log('connection: ', data);
  // console.log("시작시에 전송됨")
  userId = data.uuid;
});

socket.on('disconnection', (data) =>{
  if(data.status !== 'success')
  {
    console.log("아이디 지워짐")
  }
})

//받을 필요가 있는가 확인해야 하나.
socket.on('event', (data) => {

  if(data.status==='success')
  {
    //data에 아이디를 보내고 그걸로 맵핑한다.
    const handler = handlerMappings[data.id];

    if(!handler)
    {
      console.log("핸들 없음");
      return;   
    }

    //console.log("확인");
    // if(!data['payload'])
    // {
    //   console.log("데이터 없음");
    // }
    // else
    // {
    //   console.log(data['payload'])
    // }

    if(data.payload)
    {
      const response = handler(data.payload);
    }
    

    return data; 
  }
  else
  {
    console.log("이벤트 연결 실패");
  }
  //const handler = handlerMappings[data]
  console.log(data);
})

//확인 중
const sendEvent = (handlerId, payload) => {
  socket.emit('event', {
    userId,
    clientVersion: CLIENT_VERSION,
    handlerId,
    payload,
  });
};


export { sendEvent };

다음 주 목표

현재 작업하고 있는 건 로컬 저장소의 json에서 작업하는 걸 parse 해서 작업하고 있는데 redis라는 데이터베이스를 경유하면 좀 더 빠르게 테이블을 세팅할 수 있어 보인다. 브로드캐스팅이 미흡한 부분을 수정하고 난 다음엔 테이블을 작성해 볼 예정이다. 사이트에 들어가면 돈을 내야 된다고 보였는데 무료 방법도 있다고 하니 그 쪽을 알아봐야겠다.

기본적인 작업들은 완료가 되었으나 랭킹 설정 등을 위해서 브로드캐스팅을 보내야 하는 문제가 남았다.

const response = handler(data.userId, data.payload);
 if(response.broadcast)
    {
        //여긴 브로드캐스팅을 보내는 함수
        io.emit('response', {id : 2, payload : {score : RankOneScore()}});
        return;
    }

현재 broadcast를 쓸 경우는 점수를 받은 다음 그 점수가 랭킹 1위의 점수일 때 사용자들의 최고 점수를 수정하는 방식을 사용하려 하는데, 클라이언트 부분에서 게임을 시작할 때 충돌이 일어날 수 있어 아직 연구 중이다.

해당 코드에선 return 받은 값 안에 broadcast를 집어 넣어서 판별을 하고 있는데, 이 코드는 작업 후 용량을 줄이기 위해 broadcast라는 부분을 제거한 다음에 보내도록 하자. 조금의 용량이라도 효율적으로 보내는 게 좋지.