이제 매칭이 성공한 상대의 더 자세한 정보를 보기위해클릭했을때 상대 프로필 정보를 볼수있는 기능을 만들어준다프로필 사진 구역을 클릭했을때 window.open 함수를 사용하여 새로운 페이지 처리!!profileBox의 좌표는 event의 함수들을 사용해 클릭한곳의 좌표를 구해옴!!! 결과 !!!
My Project/Final Project
매칭 시작 버튼을 누르면 매칭 시간이 흘러가도록setInterval 기능을 활용해1초 간격으로 시간이 변하도록 스크립트를 만들어준다 그리고 매칭 시작 버튼을 매칭 중지버튼으로 만들어주고 버튼의 onClick 속성을 변경해 stopMatching 함수가 작동되도록 만들어 준뒤 웹 소켓에는 원하는 mbti를 보내준다서버에서는 매칭이 성사되었을때만 메세지가 날라오도록 설계해두었기때문에메세지가 날라오면 상대방의 정보를 띄워주고 setInterval를 정지시켜준다
앞에서 만든 sql 테이블을 활용해 mbti 데이터를 긁어온다고 생각할때웹 소켓에서는 사용자가 찾는 mbti와 일치한 사용자를 찾아서 해당 사용자의 정보를 보내주면 될것같아서사용자의 MBTI정보를 웹소켓에 저장해 두었다 이제 선택한 mbti와 매칭을 하는중인 유저들의 mbti를 비교해서 일치하면 매칭시켜주는 코드를 설계해보자 우선 코드를 작성하는데에 집중해 한줄적을때마다 캡처하지 못한점 양해 바란다.원래는 MBTIS에 user를 넣으려했지만 JSON 형식으로 바꿀때 null인 변수들이 있어서 오류가 나기때문에새로 Test용으로 DTO를 하나더 만들어서 유저의 mbti와 프로필사진, 이름만 넣어주도록 만들었다매칭 시작을 누른 유저들의 mbti를 저장해놓고새로운 유저가 매칭시작을 누를때 이미 있는 유저들중..
이번에는 파이널 프로젝트의 핵심인 매칭 시스템 구현을 생각해보았다매칭또한 양방향통신이 필요하기 때문에 웹 소켓을 활용해봐야겠다고 생각했다 우선 채팅과 같은 웹소켓 서버를 사용하면 혼잡해지기 때문에 MatchHandler를 따로 만들어주고registry에 url을 추가해주었다 매칭 시스템은 들어올때 CLIENTS (유저 정보) 뿐만아니라 MBTI로 매칭시켜줄거기 떄문에 유저의 MBTI도 같이 저장해주도록 하자 CLIENTS와 MBTI로 나누는 이유는 CLIENTS에는 메세지를 보낼때 사용할 Client webSocketSession 을 담아 주기 위해서 이다그리고 매칭 시스템은 매칭을 시작할때만 사용자 정보가 필요하기떄문에 웹소켓 연결시에는 아무것도 할필요가 없다 고로 afterConnectionEstab..
