Skip to content

Websocket Protocol Specification

Jump to bottom
Rhee Jung In edited this page Dec 9, 2021 · 15 revisions

LiveClass는 실시간 통신을 위해 대부분의 IO를 Websocket을 이용해서 처리합니다.

웹소켓 프로토콜을 위해서 room 기능과 broadcasting 기능을 제공하는 socket.io 라이브러리를 사용하였습니다.

이 문서는 다음과 같이 구성되어 있습니다.

  • 이벤트 이름
  • 이벤트가 Client -> Server로 emit될 때 필요한 data type
  • 서버 상태 변화
  • 이벤트가 Server -> Client로 emit될 때 지니는 data type

Class Protocols

Class에 접속할 때와, 접속한 이후로 사용되는 이벤트들입니다.

JoinClass

Classroom에 입장하는 프로토콜입니다.

Client -> Server

  • Data
{
  classUuid: string
}
  • Server State Change

classUuid에 해당하는 Class 소켓 룸으로 입장합니다.

Server -> Client

  • Data
{
  classUuid: string;
  instructor: // instructor information
  {
    userId: number;
    userName: string;
    memberType: MemberType.INSTRUCTOR;
  },
  status: number
}

GetLectures

해당 Class의 Lecture들을 요청한 Client에게 보내줍니다.

Client -> Server

  • Data
{
  classUuid: string
}
  • Server State
No Change

Server -> Client

  • Data
{
  lectures: Lecture[]; // server/src/data/lecture.ts
  status: number 
}

CreateLecture

Client -> Server

  • Data
{
  classUuid: string;
  lectureDate: Date;
  lectureName: string;
  playlist: string;
}
  • Server State
  1. Save lecture in DB with given data type
  2. Broadcast created lecture to class socket room
  3. Send Back created lecture to client

Server -> Client

  • Data
{
  lecture: Lecture; // server/src/data/lecture.ts 
  status: number;
}

GetClassMembers

Client -> Server

  • Data
{
  classUuid: string;
}
  • Server State
No Change

Server -> Client

  • Data
{
  members: Member[]; // server/src/data/member.ts
  status: number;
}

Lecture Protocols

JoinLecture

Client -> Server

  • Data { classUuid: string; lectureId: number; }

  • Server State

  1. Check if user is in lecture. 2-1. If he or she is in the lecture, do nothing. 2-2. If he is not in the lecture, join user into lecture socket room and broadcast that user joined to lecture room.
  2. Send back user and lecture information to requested user (in both above cases)

Server -> Client

  • Data
{
  user: UserEntity; // server/src/entity/userEntity.ts
  lecture: Lecture; // server/src/data/lecture.ts
  status: number;
}

ExitLecture

Client -> Server

  • Data
{ 
  classUuid:string;
  lectureId:number;
}
  • Server State
  1. Exit lecture socket room
  2. If user it instructor and lecture was on live, stop live end broadcast live stop event
  3. Broadcast changed active lecture member to lecture socket room
  4. Broadcast lecture information to class socket room

Server -> Client

  • Data
This Event shouldn't be emitted to client

GetActiveLectureMember

Client -> Server

  • Data
{
  classUuid: string;
  lectureId: number;
}
  • Server State
No Change

Server -> Client

  • Data
{
  members: Member[]; // array of lecture participants
  status: number;
}

SetLectureLiveStatus

Client -> Server

  • Data
{
  classUuid: string;
  lectureId: number;
  status: boolean;
}
  • Server State
  1. Set lecture live status to given status
  2. Broadcast live status to user, lecture room
  3. Broadcast lecture information to class socket room

Server -> Client

  • Data
{
  liveStatus: boolean;
  status: number;
}

Youtube Protocols

InstructorTimeChange

Client -> Server

  • Data
{
  classUuid: string;
  lectureId: number;
  newtime: number;
}
  • Server State

Server -> Client

  • Data

InstructorPlay

Client -> Server

  • Data
{
  classUuid: string;
  lectureId: number;
}
  • Server State
No Change

Server -> Client

  • Data
undefined // No data, Just event

InstructorPause

Client -> Server

  • Data
{
  classUuid: string;
  lectureId: number;
}
  • Server State
No Change

Server -> Client

  • Data
undefined // No data, Just event

SelectVideo

Client -> Server

  • Data
{
  classUuid: string;
  lectureId: number;
  selectedVideoIdx: number;
}
  • Server State Set video index of lecture to given index

Server -> Client

  • Data
{
  selectedVideoIdx: number;
  status: number;
}

Chat Protocols

LiveChatTextMessage

Client -> Server

  • Data
{
  classUuid: string;
  lectureId: number;
  text: string;
}
  • Server State
  1. Try translating in both Korean & English
  2. Create Message (server/src/types/index.ts:18)
  3. Store message to lecture
  4. Broadcast message to lecture room

Server -> Client

  • Data
{
  message: Message;
  status: number;
}

LiveChatAudioMessage

Client -> Server

  • Data
{ 
  classUuid: string;
  lectureId: number;
  arrayBuffer: ArrayBuffer;
}
  • Server State Broadcast audio message to lecture room

Server -> Client

  • Data
{
  senderId: number;
  arrayBuffer: ArrayBuffer;
}

Marker Protocols

CreateMarker

Client -> Server

  • Data
{
  classUuid: string;
  lectureId: number;
  marker: // MarkerRequest
  {
    markerType: MarkerType;
    videoIndex: number;
    time: number;
  }
}
  • Server State
  1. Save marker information in DB using given MarkerRequest data
  2. Add marker into lecture
  3. Broadcast marker info to lecture room

Server -> Client

  • Data
{
  marker: Marker; // server/src/data/marker.ts
  status: number;
}

MarkerTextMessage

Client -> Server

  • Data
{
  classUuid: string;
  lectureId: number;
  markerTextMessage: 
  {
    markerId: number;
    message: string;
  }
}
  • Server State
  1. Try to translate
  2. Save marker message into DB
  3. Create message that has Message & { messageId: number } type
  4. Broadcast it to lecture room

Server -> Client

  • Data
{
  markerId: number;
  savedMessage: Message & { messageId: number };
  status: number;
}

GetMarkerMessages

Client -> Server

  • Data
{
  markerId: number;
}
  • Server State
No Change

Server -> Client

  • Data
{
  textMessages: (Message & { messageId: number })[];
  status: number;
}

GetMarkers

Client -> Server

  • Data
{
  classUuid: string;
  lectureId: number;
  videoIndex: number;
}
  • Server State
No Change

Server -> Client

  • Data
{
  markers: Marker[]; // markers of given video index
  status: number;
}

Clone this wiki locally