[프로젝트]1:1 매칭 대상을 바꿔보자 (react,nodejs,express)

오늘 작업한거 정리이다

 

기존 이성 끼리만 매칭되던 기능을 버튼 하나 더 만들어 동성끼리도 만나게 해주자

 

---

콤보박스를 누르면 원래는 1:1과팅과 "다중매칭은 준비중입니다." 가 뜬다 저자리에

 

동성 친구를 넣어주자

 

버튼은 어떻게 구분 해 줄까

 

this.state = {
   arrow_text: "1 : 1 과팅",    // 콤보박스에 뜨는 문구인데 default는 "1 : 1 과팅"
   count: 1,

state 값에 count를 넣어서

 

1:1 과팅 클릭시 count: 1,

동성친구 클릭시 count: 2, 로 초기화 해준다

 

"매칭시작"을 누르면 <start/> 컴포넌트가 실행 되는데 

 

<Start
    count={this.state.count}
    //nickname_switch_true={this.nickname_switch_true}
    //nickname_switch_false={this.nickname_switch_false}
/>

start 컴포넌트에 count값을 넘겨 주자, 그래야 구분지어 함수를 실행 할 수 있다

 

 

 

<start>컴포넌트

 

당연히 props를 사용해야 한다

const userid = {
      userid: this.state._id,
      sex: this.state.sex,
    };

    if (this.props.count === 1) {                     //count 1일때 , 1 : 1 과팅--------------------
      fetch("api/CheckMatching", {                    //기존 누군가 만들어 놨던 CheckMatching 라우터이다
        method: "post",
        headers: {
          "content-type": "application/json",
        },
        body: JSON.stringify(userid),
      })
        .then((res) => res.json())
        .then((json) => {
          if (json.touserid === undefined) {
          } else {
            this.props.nickname_switch_false();
            socket.emit("matchingtouser", json);
            this.setState({
              open: true,
              progress: (
                <button className="Font_start">메시지함을 확인하세요</button>
              ),
            });
          }
        });
    } else {                                          // count 2일때 동성 친구--------------------
      fetch("api/CheckMatching2", {                   // 그대로 복사해서 2만 붙여 줬다
        method: "post",
        headers: {
          "content-type": "application/json",
        },
        body: JSON.stringify(userid),
      })

 

<server>

 

기존 CheckMatching의 기능은:

 

매칭 할 상대가 없을 때 matching대기 테이블에 넣고 상대가 있을 경우 매칭대기 열에서 삭제한다

그리고 본인과 매칭된 상대의 정보를 반환한다

 

기존 남녀 매칭 테이블을 사용하니까 대기열에 있는 자기 자신과 매칭되고 , 1:1 매칭과 동성 매칭이 만나는 경우가 발생했다

 

당황하지 않고 동성매칭을 위한 남,녀 대기 테이블을 따로 만들어 줬다

 

 

그랬더니 원활하게 돌아간다

 

기존 쿼리문의 테이블에 _same만 붙여 줬다

router.post("/CheckMatching2", (req, res) => {
  //동성 일때
  if (req.body.sex === "M") {  //남자일때
    connection.query("SELECT * FROM matching_table_m_same", [], function (
      err,
      rows,
      fields
    ) {
      if (rows[0] === undefined) {
        //매칭할 남자가 없음 대기열에 추가한다
        //

        connection.query(
          "INSERT INTO matching_table_m_same (matching_userid) values (?)",
          [req.body.userid],
          function (err, rows, field) {
            const touserid = {
              touserid: undefined,
            };

            res.send(touserid); //
          }
        );
      } else {
        //매칭할 남자가 있음
        const userm = req.body.userid;
        const userw = rows[0].matching_userid;
        const lastmessage = "매칭이 성공적으로 되었습니다.";
        connection.query(
          "INSERT INTO wagle_room (room_userid,room_touserid,room_lastmessage,room_roomname) values (?,?,?,?)",
          [userm, userw, lastmessage, userm + userw],
          function (err, rows, field) {
            connection.query(
              "delete from matching_table_m_same where matching_userid = ?",
              [userw],
              function (err, rows, field) {
                if (err) {
                }

                const match_info = {
                  userid: userm,
                  touserid: userw,
                  roomname: userm + userw,
                };
                res.send(match_info);
              }
            );
          }
        );
      }
    });
  } else {
    //여자일떄

    connection.query("SELECT * FROM matching_table_w_same", [], function (
      err,
      rows,
      fields
    ) {
      if (rows[0] === undefined) {
        //매칭할 여자가 없음 대기열 추가
        //

        connection.query(
          "INSERT INTO matching_table_w_same (matching_userid) values (?)",
          [req.body.userid],
          function (err, rows, field) {
            const touserid = {
              touserid: undefined,
            };

            res.send(touserid); 
          }
        );
      } else {
        //매칭할 여자가 있음
        const userm = rows[0].matching_userid;
        const userw = req.body.userid;
        const lastmessage = "매칭이 성공적으로 되었습니다.";
        connection.query(
          "INSERT INTO wagle_room (room_userid,room_touserid,room_lastmessage,room_roomname) values (?,?,?,?)",
          [userw, userm, lastmessage, userm + userw],
          function (err, rows, field) {
            connection.query(
              "delete from matching_table_w_same where matching_userid = ?",
              [userm],
              function (err, rows, field) {
                if (err) {
                }

                const match_info = {
                  userid: userw,
                  touserid: userm,
                  roomname: userm + userw,
                };
                res.send(match_info);
              }
            );
          }
        );
      }
    });
  }
});

 

---

결과:  네 개의 브라우저가 남자이고 이성매칭을 돌려 놨다

위의 두개를

 

동성친구▼ 로 바꾸고 돌리면

 

둘은 만날 수 있다

 

---

기존 다른 팀원이 짜놓은 코드를

 

살짝 수정 한 것 뿐이지만

 

소켓자체를 처음 만져봐서 해석하는데만 시간 몇시간 썼다 해석 능력도 중요한 것 같다

 

고민의 흔적들: 

 

 

 

 

 

 

 

 

 

아이패드 자랑할려고 올려봤다

 

 

가입자수가 현재 시각 401명이다 떡상하자