[필기노트] 실시간 통신 논리구조, Socket

-- API Socket 논리 구조 생각
1. 네이버 지도 페이지로 돌아왔을 때 Socket을 연결한다.
2. 연결한 클라이언트에게 자신의 친구 리스트, 동일한 일정에 등록되어있는 유저 리스트를 뿌려준다.
3. Server에서는 클라이언트의 실시간 위치를 취합해서 모든 유저에게 동일한 위치 데이터를 뿌려준다.
  3.1 Socket 데이터 = {userId, lat, lng}
4. 클라이언트는 친구, 일정 리스트에서 userId를 구분해 표시할 아이콘을 지정한다.

 TODO 일정 데이터는 어떻게 뿌려줄 수 있을까?
  - 일정 데이터 (모일 장소) 는 처음 접속했을 때 한번만 뿌려줄 수 있도록 설정한다.
  - 나중에 유저수가 증가할 경우 지역별로 일정데이터를 관리할 수 있도록 설정한다.

 

== Socket == 

Socket.io 
 - 웹 소켓을 포함해, 웹소켓을 사용하지 못하는 환경에서도 웹소켓과 비슷하게 사용 가능하도록 구현해놓은 라이브러리

$ npm install socket.io



소켓 : 데이터를 송수신하기 위해 반드시 거쳐야 하는 연결부

패킷 : 소켓을 통해 송수신하는 데이터 덩어리 

app 객체 : express로 기존처럼 API를 개발하거나 프론트엔드 파일을 서빙하는 용도로 사용

io 객체 : 기존처럼 클라이언트와 데이터를 주고 받는 용도로 사용

Room (방) : 네임스페이스보다 더 세부적인 개념
 - 같은 네임스페이스 안에서도 같은 방에 들어 있는 소켓끼리만 데이터를 주고받을 수 있다.
 - socket.request.headers.referer : 현재 웹 페이지의 URL을 가져올 수 있다.

사용자를 구분할 수 있는 고유한 값
 - 세션 아이디 : req.sessionId
 - 소켓 아이디 : socket.id
 - 페이지를 이동할 때마다 소켓 연결이 해제되고 다시 연결되면서 소켓 아이디가 바뀌게 된다.
 - Session ID를 사용한다.

Socket.IO에서 세션에 접근하는 방법
 - Socket.IO 에서도 미들웨어를 사용할 수 있으므로 express-session을 공유하면 된다.










-- Node.js Socket
io.on("connection", (socket) => {} );
 - 소켓 연결 이벤트 핸들링

socket.on("disconnect", () => {} )
 - 연결이 종료되었을때 자동으로 실행되는 이벤트

socket.emit("<String>", {} )
 - <String>에 해당하는 이벤트를 실행한다.

socket.on("<string>", (data) => {} );
 - <String>에 해당하는 이벤트를 수신받는다.
 - 클라이언트로 부터 메시지를 수신시 실행한다.
 - 이벤트 리스너를 등록한다.


socket.on("close", () => {} );
 - 에러 발생시 실행되는 이벤트

io.of("<NameSpace>");
 - 해당하는 NameSpace로 들어오는 주소값을 받는 소켓 서버를 생성한다.
 - 같은 네임스페이스끼리만 데이터를 전달한다.
 - 네임스페이스마다 각각 이벤트 리스너를 붙일 수 있다.
 ex) const room = io.of("/room");
 ex) room.on("connection", (socket)=>{

io.connect('http://localhost:8005/room'
 - /room 이라는 네임스페이스를 사용
 - 서버에서 /room 네임스페이스를 통해 보낸 데이터만 받을 수 있다.
 - 네임스페이스를 여러 개 구분해 주고받을 데이터를 분류할 수 있다.


app.set("io", io);
 - express 라우터에서 io 객체를 쓸 수 있게 저장해 준다.
 - req.app.get('io')로 접근할 수 있다.

socket.to(<roomId>) 
 - roomId에 해당하는 방에 데이터를 보낼 수있다.




e.preventDefault()
 - a 또는 submit 태그에서 발생하는 페이지이동, form 안에있는 input 전송을 중단시킨다.

e.stopPropagation()
 - 이벤트가 상위 객체에 전달되지 않게 막아주는 것

e.target
 - 전달받은 이벤트 form의 html 데이터를 전부 출력한다
 ex) e.target.chat.value : chat이라는 id의 데이터를 가져온다.


socket.join(<roomId>)
 - roomId에 해당하는 채널에 접속한다.

socket.leave(<roomId>)
 - roomId에 해당하는 채널에서 퇴장한다.

socket.to(소켓 아이디).emit(이벤트, 데이터);
 - 특정인에게 메시지 보내기

socket.broadcast.emit(이벤트, 데이터);
socket.broadcast.to(방 아이디).emit(이벤트, 데이터);
 - 나를 제외한 모두에게 메시지 보내기


req.sessionID
 - 단일 사용자의 작업을 식별하고 추적할 수 있는 방법
 - 클라이언트 구분 session-id