Skip to content

Socket 명세

Hyungjin Lee edited this page Dec 10, 2022 · 8 revisions

📶 연결

연결 및 유저들 정보 받기

  • ws://localhost:3333

    • 아마도 https 환경에서는 wss://localhost:3333 로 변경될 예정

    요청

    • header에 다음 필드 필수.
    { // headers
    		authorization : {cookie.accessToken}
    		room : {URL에서 갖고온 현재 채널명(‘town’ || userId)}
    }
    
    

    응답

    • 성공시 userInitiated 이벤트 발생
    • 접속 한 유저 - 현재 접속 중인 모든 유저들 정보 불러오기
    [ // 현재 접속중인 모든 유저 정보 (자신 포함)
        {
            "id": "IZI_1Wzwhqblu0A4KA_TCrtkl4mM55Qstc_FDKMv_sY",
            "social": "naver",
            "nickname": "연어초밥",
            "characterName": "nohair",
            "iat": 1669789117,
            "exp": 1669875517,
            "x": -25,
            "y": 400,
            "direction": "right",
            "state": "wait",
            "roomName": "town",
            "userState":"on",
            "callingRoom" : ""
        },
        {
            "id": "Z-NVwpPpbw7oOjHEn-CYEZ8V9nU3P9IIChz_9PuuVak",
            "social": "naver",
            "nickname": "stouter",
            "characterName": "longhair",
            "iat": 1669782828,
            "exp": 1669869228,
            "x": -25,
            "y": 400,
            "direction": "right",
            "state": "wait",
            "roomName": "town",
            "userState":"on",
            "callingRoom" : ""
        }
    ]
    
    
    • userCreated 이벤트 발생
    • 내가 이미 접속한 상태에서 새로 접속한 유저 정보 불러오기
    // 방금 들어온 유저 정보
    {
    	  "id": "IZI_1Wzwhqblu0A4KA_TCrtkl4mM55Qstc_FDKMv_sY",
    	  "social": "naver",
    	  "nickname": "연어초밥",
    	  "characterName": "nohair",
    	  "iat": 1669789117,
    	  "exp": 1669875517,
    	  "x": -25,
    	  "y": 400,
    	  "direction": "right",
    	  "state": "wait",
    	  "userState":"on",
    	  "roomName": "town"
        "userState":"on",
        "callingRoom" : ""
    },
    
    

연결 해제

  • 다른 유저 접속 해제 시, 접속 중인 모든 유저에게 userLeaved로 유저 정보 전달

    요청

    • 없음

    응답

    • 성공시 userLeaved 이벤트 발생
    • 접속 중인 모든 유저에게 전달
    { // 방금 나간 유저 정보
        "id": "IZI_1Wzwhqblu0A4KA_TCrtkl4mM55Qstc_FDKMv_sY",
        "social": "naver",
        "nickname": "연어초밥",
        "characterName": "nohair",
        "iat": 1669789117,
        "exp": 1669875517,
        "x": -25,
        "y": 400,
        "direction": "right",
        "state": "wait",
        "roomName": "town"
        "userState":"on",
        "callingRoom" : ""
    }
    
    

👤 유저 상태 변화

UserDataChanged 이벤트

  • userDataChanged 이벤트를 통해 서버에 움직임 전달.

    요청

    • 다음 데이터를 body에 담아서 userDataChanged 이벤트 emit.
    {
      nickname: string;
      characterName: string;
    }
    
    

    응답

    • 성공시 userDataChanged 이벤트로 채널 내 broadcast.
    { // 유저의 바뀐 정보를 Update 하여 broadcast
        "id": "IZI_1Wzwhqblu0A4KA_TCrtkl4mM55Qstc_FDKMv_sY",
        "social": "naver",
        "nickname": "연어초밥",
        "characterName": "nohair",
        "iat": 1669789117,
        "exp": 1669875517,
        "x": -25,
        "y": 400,
        "direction": "right",
        "state": "wait",
        "roomName": "town"
        "userState":"on",
        "callingRoom" : ""
     },
    
    

userStateChanged 이벤트

  • 유저의 다양한 활동 시, 변한 상태를 서버에서 userStateChanged 이벤트로 접속 중인 이들에게 전달

  • userStateon, off, busy 가 있으며. off 는 해당 이벤트가 아닌, userLeaved 이벤트로 감지합니다

    응답

    • 상태가 변한 유저들의 정보가 전달됩니다.
    { // 해당 유저들이 on 이 됨
        "userIdList": [
    					"IZI_1Wzwhqblu0A4KA_TCrtkl4mM55Qstc_FDKMv_sY",
    					"Z-NVwpPpbw7oOjHEn-CYEZ8V9nU3P9IIChz_9PuuVak"
    			]
        "userState": "on",
    
    }
    
    
    { // 해당 유저들이 busy가 됨
        "userIdList": [
    					"IZI_1Wzwhqblu0A4KA_TCrtkl4mM55Qstc_FDKMv_sY",
    					"Z-NVwpPpbw7oOjHEn-CYEZ8V9nU3P9IIChz_9PuuVak"
    			]
        "userState": "busy",
    
    }
    
    

🚶 유저 움직임 관련

Move 이벤트

  • move 이벤트를 통해 서버에 움직임 전달.

    요청

    • 다음 4가지 데이터 담아서 move 이벤트 emit.
    {
    		x: number;
    		y: number;
    		direction: string;
    		state: string;
    }
    
    
    • 가능한 direction 및 state 범위 (all 소문자 권장)
    export enum directionOptions {
      LEFT = 'left',
      RIGHT = 'right',
    }
    
    export enum stateOptions {
      WAIT = 'wait',
      RUN = 'run',
      WALK = 'walk',
      ROLL = 'roll',
      JUMP = 'jump',
    }
    
    

    응답

    • 성공시 move 이벤트로 채널 내 broadcast.
    { // 해당 유저의 바뀐 위치를 포함한 유저 정보 전달
          "id": "Z-NVwpPpbw7oOjHEn-CYEZ8V9nU3P9IIChz_9PuuVak",
          "social": "naver",
          "nickname": "stouter",
          "characterName": "longhair",
          "iat": 1669782828,
          "exp": 1669869228,
          "x": -25,
          "y": 400,
          "direction": "right",
          "state": "wait",
          "roomName": "town",
          "userState":"on",
          "walk": 5000 (10으로 나누세요~)
    }
    
    

💬 채팅 관련

publicChat 이벤트

  • publicChat 이벤트를 통해 서버에 전체 채팅 전달.

  • 휘발성 채팅.

    요청

    • message 필드를 채워서 publicChat 이벤트 emit.
    {
    		message: "보낼 전체 채팅 내용"
    }
    
    

    응답

    • 성공시 publicChat 이벤트로 채널 내 broadcast.
    • 해당 유저의 id, 닉네임, 보낸 시간, 메시지 내용 전달
    { // 해당 유저 id, 닉네임, 보낸 시간, message를 전달
        "fromUserId": "IZI_1Wzwhqblu0A4KA_TCrtkl4mM55Qstc_FDKMv_sY",
        "nickname": "연어초밥",
        "timestamp": 1669819694425,
        "message": ""
    }
    
    

chatRoomEntered 이벤트

  • 1:1 채팅방 입장 시. chatRoomEntered 이벤트로 서버에 전달

  • 채팅 보내기 전, 채팅 방 생성을 위한 이벤트

  • 메시지를 수신, 발신하지 않더라도 채팅방이 내부적으로 생성되어야해서

    요청

    • 상대방의 userId와 함께 chatRoomEntered 이벤트 emit.
    {
    		targetUserId: "싱대방 userId"
    }
    
    

    응답

    • 응답 없음.
    • 채팅 방이 내부적으로 생성

chatRoomLeaved 이벤트

  • 1:1 채팅방 떠날 시. chatRoomLeaved 이벤트로 서버에 전달.

  • 읽은 메시지 마킹 최신화를 위한 이벤트

    요청

    • 상대방의 userId와 함께 chatRoomLeaved 이벤트 emit.
    {
    		targetUserId: "싱대방 userId"
    }
    
    

    응답

    • 응답 없음

    유의사항

    • 채팅방을 떠난 후, 채팅방 목록을 다시 불러와야 메시지 읽음 부분이 해결됨으로 로직 순서를 다음과 같이 강제해주세요.
      • chatRoomLeaved 발생 후,
      • chat/roomList 불러오기 (API)

privateChat 이벤트

  • 1:1 채팅 전송 시, privateChat 이벤트로 서버에 전달

    요청

    • 상대방의 userId, message내용과 함께 privateChat 이벤트 emit.
    {
    		targetUserId: "싱대방 userId",
    		message: "메시지 내용"
    }
    
    

    응답

    • 상대방의 메시지 내용이 전달됩니다.
    { // 해당 유저의 id, 닉네임, 메시지 보낸 시간, 메시지 내용 전달
        "fromUserId": "IZI_1Wzwhqblu0A4KA_TCrtkl4mM55Qstc_FDKMv_sY",
        "nickname": "연어초밥",
        "timestamp": 1669820748590,
        "message": "개인 메시지 입니다.."
    }
    
    

🤙 전화 관련

전화 관련된 이벤트들이 아래에 담겨 있습니다.

프론트가 보낼 수 있는 이벤트

  • callRequested
  • callEntered
  • callLeaved
  • callCanceled
  • callRejected

프론트가 감지하고 있어야할 이벤트

  • callingRoomUserStateChanged
  • callEntered
  • callRejected
  • callCanceled
  • callRequested

callRequested 이벤트

  • 상대방에게 통화 시 callRequested 이벤트 서버에 전달

  • 나와 상대방의 상태는 Busy 가 됩니다.

  • 내 통화룸에서의 상대방의 상태는 callRequesting이 됩니다.

  • 현재 해당 방에서 통화중인 다른 유저들 정보도 전달됩니다.

    요청

    • 전화 받는 상대방의 userId와 uuid로 생성한 callingRoomcallRequested 이벤트로 emit.
    • 이미 통화중이라면 새로 생성할 것 없이 기존의 callingRoom 을 보냅니다.
    {
    		calleeUserId: "전화 받는 상대 userId",
    		callingRoom : "uuid로 생성된 roomName" | "현재 통화중인 roomName"
    }
    
    

    응답

    • 상대방에겐 다음과 같은 callRequested 이벤트가 전달됩니다.
    • 현재 해당 방에서 통화중인 다른 유저들 정보도 전달됩니다.
    {
        "callerUserId": "Z-NVwpPpbw7oOjHEn-CYEZ8V9nU3P9IIChz_9PuuVak",
        "callerNickname": "j002",
    }
    
    

    사이드 이펙트

    • 다른 모든 유저들에게 다음과 같은 userStateChanged 이벤트가 전달됩니다.
    {
    		userIdList: [callerUserId, calleeUserId]
    		userState : 'busy'
    }
    
    
    • 해당 callingRoom에 있는 유저들에게는 다음과 같은 callingRoomUserStateChanged 이벤트가 전달됩니다.
    • 전화를 받는 쪽은 해당 이벤트로 통화중인 사람들의 리스트를 받을 수 있습니다.
    {
    		callingRoomUserData : [
    				{
    		        "id": "IZI_1Wzwhqblu0A4KA_TCrtkl4mM55Qstc_FDKMv_sY",
    		        "social": "naver",
    		        "nickname": "연어초밥",
    		        "characterName": "nohair",
    		        "iat": 1669789117,
    		        "exp": 1669875517,
    		        "x": -25,
    		        "y": 400,
    		        "direction": "right",
    		        "state": "wait",
    		        "roomName": "town",
    		        "userState":"busy",
    		        "callingRoom" : "caller가 uuid로 생성한 callingRoom 이름"
    		    },
    		    {
    		        "id": "Z-NVwpPpbw7oOjHEn-CYEZ8V9nU3P9IIChz_9PuuVak",
    		        "social": "naver",
    		        "nickname": "stouter",
    		        "characterName": "longhair",
    		        "iat": 1669782828,
    		        "exp": 1669869228,
    		        "x": -25,
    		        "y": 400,
    		        "direction": "right",
    		        "state": "wait",
    		        "roomName": "town",
    		        "userState": "callRequsting",
    		        "callingRoom" : "caller가 uuid로 생성한 callingRoom 이름"
    		    }
    		]
    }
    
    

callEntered 이벤트

  • 상대방의 통화 수락 시 callEntered 이벤트 서버에 전달

  • 나의 상태는 Busy가 됩니다.

    요청

    • 전화를 건 상대방의 userId와 함께 callEntered 이벤트 emit.
    {
    		callerUserId: "전화를 건 상대 userId",
    }
    
    

    응답

    • 전화를 건 상대방에겐 다음과 같은 callEntered 이벤트가 전달됩니다.
    {
    		calleeUserId: "전화를 수락한 사람의 userId"
    }
    
    

    사이드 이펙트

    • 해당 callingRoom에 있는 유저들에게는 다음과 같은 callingRoomUserStateChanged 이벤트가 전달됩니다.
    {
    		callingRoomUserData : [
    				{
    		        "id": "IZI_1Wzwhqblu0A4KA_TCrtkl4mM55Qstc_FDKMv_sY",
    		        "social": "naver",
    		        "nickname": "연어초밥",
    		        "characterName": "nohair",
    		        "iat": 1669789117,
    		        "exp": 1669875517,
    		        "x": -25,
    		        "y": 400,
    		        "direction": "right",
    		        "state": "wait",
    		        "roomName": "town",
    		        "userState":"busy",
    		        "callingRoom" : "caller가 uuid로 생성한 callingRoom 이름"
    		    },
    		    {
    		        "id": "Z-NVwpPpbw7oOjHEn-CYEZ8V9nU3P9IIChz_9PuuVak",
    		        "social": "naver",
    		        "nickname": "stouter",
    		        "characterName": "longhair",
    		        "iat": 1669782828,
    		        "exp": 1669869228,
    		        "x": -25,
    		        "y": 400,
    		        "direction": "right",
    		        "state": "wait",
    		        "roomName": "town",
    		        "userState": "busy", // callRequesting -> busy
    		        "callingRoom" : "caller가 uuid로 생성한 callingRoom 이름"
    		    }
    		]
    }
    
    

callCanceled 이벤트

  • 상대방에게 통화를 걸다가 취소 시 callCanceled 이벤트를 서버에 전달

  • callLeaved 이벤트와 함께 보내야만 합니다.

    요청

    • 전화 받는 상대방의 userId와 함께 callCanceled 이벤트 emit.
    {
    		calleeUserId: "전화 받는 상대 userId",
    }
    
    

    응답

    • 상대방에겐 다음과 같은 callCanceled 이벤트가 전달됩니다.
    {
    		callerUserId: "전화를 건 사람의 userId",
    		callerNickname: "전화를 건 사람의 닉네임"
    }
    
    

    유의 사항

    • 해당 이벤트는 전화 받는 상대방에게만 알려주는 이벤트로 callingRoom의 유저를 변화시키지 않습니다. 고로 사이드 이펙트가 없습니다.
    • 해당 이벤트를 감지했을 경우, 전화를 받는 쪽에선 callLeaved 이벤트를 사용하여 통화방에서 나가주세요.

callRejected 이벤트

  • 수신 중인 전화 거절 시, callRejected 이벤트 서버에 전달

    요청

    • 전화를 건 상대방의 userId와 함께 callRejected 이벤트 emit.
    {
    		callerUserId: "전화를 건 상대의 userId",
    }
    
    

    응답

    • 상대방에겐 다음과 같은 callDenied 이벤트가 전달됩니다.
    {
    		calleeUserId: "전화를 거절한 사람의 userId",
    		calleeNickname: "전화를 거절한 사람의 닉네임"
    }
    
    

    유의사항

    • 해당 이벤트는 전화를 건 상대방에게만 알려주는 이벤트로 callingRoom의 유저를 변화시키지 않습니다. 고로 사이드 이펙트가 없습니다.
    • 거절하는 측은 해당 이벤트를 보내면서 callLeaved 이벤트를 반드시 같이 쓰세요.

callLeaved 이벤트

  • 상대방과의 통화에서 나갈 경우 callLeaved 이벤트 서버에 전달

  • 나의 상태는 on이 됩니다.

    요청

    • 통화를 나가려는 나의 userId와 통화 중인 사람들의 목록과 함께 callLeaved 이벤트 emit.
    • payload 없음.
    {}
    
    

    사이드 이펙트

    • 해당 callingRoom에 있는 유저들에게는 다음과 같은 callingRoomUserStateChanged 이벤트가 전달됩니다.
    {
    		callingRoomUserData : [
    				{
    		        "id": "IZI_1Wzwhqblu0A4KA_TCrtkl4mM55Qstc_FDKMv_sY",
    		        "social": "naver",
    		        "nickname": "연어초밥",
    		        "characterName": "nohair",
    		        "iat": 1669789117,
    		        "exp": 1669875517,
    		        "x": -25,
    		        "y": 400,
    		        "direction": "right",
    		        "state": "wait",
    		        "roomName": "town",
    		        "userState":"busy",
    		        "callingRoom" : "caller가 uuid로 생성한 callingRoom 이름"
    		    },
    		]
    }
    
    
    • 다른 모든 유저들에게 다음과 같은 userStateChanged 이벤트가 전달됩니다.
    {
    		userIdList: [leavingUserId]
    		userState : 'on'
    }
    
    

    유의 사항

    • callLeaved 이벤트가 발생할 때마다, callRoom에 날라오는 callingRoomUserStateChanged를 확인하여 client 측은 본인이 혼자 통화에 있는 지를 확인하여 callLeaved 이벤트를 쏴주어야 합니다.