@mvcro/mvs-sync-cro

mvs-sync-cro

12/11일 수정, v1.0.4

• SyncManager에서 동기화를 관리
• syncManager.sendPacket() 으로 패킷을 보냄
• syncManager.on{METHOD_NAME}() 으로 응답을 받음

코드 위치 및 사용

@mv/mvs-sync-cro

http://192.168.158.61:32080/TF/healthcare2-operations/mvs-sync-cro

Demo Client

http://192.168.158.61:32080/TF/healthcare2-operations/mvs-sync-demo

지원 기능

1. 룸
   • 동기화중인 리스트 반환
   • 입장 및 생성
2. 그룹
   • 그룹 입장
   • 현재는 하나의 룸 안에 1그룹 1채널을 사용, 확장가능성을 고려해 그룹을 동기화의 단위로 사용
3. 로그인
   • 룸 입장 시 CRO BE로 입장 토큰을 보내 유저 ID와 이름을 사용
   • mvs의 playerId 요청 시 CRO BE에서 받아온 유저 UUID를 반환
4. 동기화
   • 강의 진행사항
   • 퀴즈
   • 참여중인 유저
5. 채팅
   • 채팅 보내면 그룹에 속한 인원들에게 broadcast

연결 시나리오

1. 룸 입장
2. 그룹 입장
3. playerId 발급
4. 동기화 시작 -> 강의 진행정보, 퀴즈, 채팅정보 교환
5. 다른 클라이언트 입장, 또는 퇴장
6. 진행 도중에 입장 시 그룹 입장 패킷에 들어있는 진행 정보로부터 렌더링 시작

API 사용

연결

npm set registry http://192.168.153.214:4873

npm i @mv/mvs-sync-cro

import {SyncManager} from "@mv/mvs-sync/dist/utils/SyncManager";

export const syncManager = SyncManager.getInstance(MVS_URL)

Packet

/lib/utils/bufferProtocol 경로의 *.proto 파일에 패킷 정의

1. Protocol.proto
   • C_PACKET 은 클라이언트에서 MVS로 보내는 요청 패킷
   • S_PACKET 은 MVS에서 클라이언트로 보내는 응답 패킷
2. Struct.proto
   • Protocol.proto 의 패킷 스키마에서 사용할 primitive 타입이 아닌 커스텀 오브젝트를 정의
3. Enum.proto
   • error response 를 정의

sendPacket()

• MVS로 패킷을 보내 작업요청을 보낸다

import {MessageId} from "@mv/mvs-sync-cro/dist/interfaces/MessageId";
import {MessageStruct} from "@mv/mvs-sync-cro/dist/utils/bufferProtocol/MessageStruct";

// 룸 리스트 요청
syncManager.sendPacket(
    MessageId.PKT_C_TEST_ROOM_LIST,
    MessageStruct.getRoomListInstance()
)

// 룸 입장 요청
syncManager.sendPacket(
    MessageId.PKT_C_ROOM_JOIN_OR_CREATE,
    MessageStruct.getRoomJoinInstance(
        `Bearer ${accessToken}`,
        OWNERID /** Room Owner*/,
        ROOMID, /** Room UUID, 현재 데모에서는 unique하게 식별하기 위해 userId를 사용한다 */
        ROOMNAME /** RoomName*/)
)

// 그룹 입장 요청
syncManager.sendPacket(
    MessageId.PKT_C_GROUP_JOIN,
    MessageStruct.getGroupJoinInstance(1, 1) /** 고정된 그룹과 채널 사용 */
)

// PlayerId 요청
syncManager.sendPacket(
    MessageId.PKT_C_PLAYER_ID,
    MessageStruct.getPlayerIdInstance()
)

// 채팅 보내기
syncManager.sendPacket(
    MessageId.PKT_C_CHAT,
    MessageStruct.getChatInstance(CHATTING_MESSAGE)
)

// 진행사항 갱신
syncManager.sendPacket(
    MessageId.PKT_C_JUMP_TO_PROGRESS,
    MessageStruct.getJumpToProgressInstance(nextValue)
)

// 퀴즈 완료 요청(대응중)
syncManager.sendPacket(
    MessageId.PKT_C_SUMMIT_QUIZ,
    MessageStruct.getSummitQuizInstance()
)

onMethod()

• MVS에서 도착한 응답의 처리를 정의한다

// 룸 입장 요청에 대한 응답
syncManager.onRoomJoinOrCreate = (message: any) => {

    message.getUserid();
    message.getWaplroomid();
    message.getName();
    message.getResult();
};

// 룸 목록 응답
syncManager.onTestRoomList = (message: any) => {

    const RoomList = message.getRoominfosList();
    const RoomInfo = message.getRoominfosList()[INDEX];
    RoomInfo.getAppid();
    RoomInfo.getRoomid();
    RoomInfo.getName();
    RoomInfo.getPlayerinfosList();

    const Player = RoomInfo.getPlayerinfosList()[INDEX]
    Player.getPlayerid();
    Player.getName();
    Player.getIslecturer();

    message.getResult();
};

// 해당 인증정보의 UserID 반환
syncManager.onPlayerId = (message: any) => {
    message.getPlayerid();
    message.getResult();
};

// 그룹 입장 후 해당 그룹의 정보와 참여자 반환
syncManager.onGroupJoin = (message: any) => {

    const GroupInfo = message.getGroupinfo();
    GroupInfo.getProgress();
    GroupInfo.getPlayerinfosList();

    const GroupID = GroupInfo.getGroupid();
    GroupID.getScenenumber();
    GroupID.getChannelid();

    const PlayerInfo = message.getPlayerinfosList()[INDEX];
    PlayerInfo.getPlayerid();
    PlayerInfo.getName();
    PlayerInfo.getIslecturer();

    message.getResult();
};

// 다른 이용자가 접속 했을 때 사용자 정보 반환
syncManager.onOtherClientJoined = (message: any) => {

    const Player = message.getPlayerinfo();
    Player.getPlayerid();
    Player.getName();
    Player.getIslecturer();

    const GroupId = message.getGroupid();
    GroupID.getScenenumber();
    GroupID.getChannelid();
};

// 강의 진행사항 변경 정보 반환
syncManager.onJumpToProgress = (message: any) => {

    message.getProgress();
    message.getResult();
};
 // 퀴즈 정보 반환
syncManager.onSummitQuiz = (message: any) => {

    message.getQuizInfo();
    message.getResult();
};

// 사용자 퇴장 시 반환
syncManager.onPlayerRemove = (message: any) => {

    const Player = message.getPlayerinfo();
    Player.getPlayerid();
    Player.getName();
    Player.getIslecturer();
};

syncManager.onRejoin = (message: any) => {
    
    message.getResult();
};

// 채팅정보 반환
syncManager.onChat = (message: any) => {

    const Player = message.getPlayerinfo();
    Player.getPlayerid();
    Player.getName();
    Player.getIslecturer();
    
    message.getMsg();
    message.getResult();
};

import {ResultCode, ResultCodeMap} from "@mv/mvs-sync-cro/dist/interfaces/ResultCode";

ResultCodeMap.get(ResultCode.SUCCESS) // ResultCode를 문자열로 표현