FMUSER 무선 전송 비디오 및 오디오가 더 쉬워졌습니다!
es.fmuser.org
it.fmuser.org
fr.fmuser.org
de.fmuser.org
af.fmuser.org -> 아프리칸스어
sq.fmuser.org -> 알바니아어
ar.fmuser.org -> 아랍어
hy.fmuser.org -> 아르메니아어
az.fmuser.org -> 아제르바이잔 어
eu.fmuser.org -> 바스크
be.fmuser.org -> 벨로루시 어
bg.fmuser.org -> 불가리아어
ca.fmuser.org -> 카탈로니아 어
zh-CN.fmuser.org -> 중국어 (간체)
zh-TW.fmuser.org -> 중국어 (번체)
hr.fmuser.org -> 크로아티아어
cs.fmuser.org -> 체코
da.fmuser.org -> 덴마크어
nl.fmuser.org -> 네덜란드어
et.fmuser.org -> 에스토니아어
tl.fmuser.org -> 필리피노
fi.fmuser.org -> 핀란드어
fr.fmuser.org -> 프랑스어
gl.fmuser.org -> 갈리시아어
ka.fmuser.org -> 조지아 어
de.fmuser.org -> 독일어
el.fmuser.org -> 그리스
ht.fmuser.org -> 아이티 크리올
iw.fmuser.org -> 히브리어
hi.fmuser.org -> 힌디어
hu.fmuser.org 헝가리어
is.fmuser.org -> 아이슬란드 어
id.fmuser.org -> 인도네시아어
ga.fmuser.org -> 아일랜드어
it.fmuser.org -> 이탈리아어
ja.fmuser.org -> 일본어
ko.fmuser.org -> 한국어
lv.fmuser.org -> 라트비아어
lt.fmuser.org 리투아니아어
mk.fmuser.org -> 마케도니아 어
ms.fmuser.org -> 말레이어
mt.fmuser.org -> 몰타어
no.fmuser.org -> 노르웨이어
fa.fmuser.org -> 페르시아어
pl.fmuser.org -> 폴란드어
pt.fmuser.org -> 포르투갈어
ro.fmuser.org -> 루마니아어
ru.fmuser.org -> 러시아어
sr.fmuser.org -> 세르비아어
sk.fmuser.org -> 슬로바키아어
sl.fmuser.org -> 슬로베니아어
es.fmuser.org -> 스페인어
sw.fmuser.org -> 스와힐리
sv.fmuser.org -> 스웨덴어
th.fmuser.org -> 태국
tr.fmuser.org -> 터키어
uk.fmuser.org -> 우크라이나어
ur.fmuser.org -> 우르두어
vi.fmuser.org -> 베트남어
cy.fmuser.org -> 웨일스 어
yi.fmuser.org -> 이디시어
양방향 라이브 브로드캐스트에는 서버, 교사 클라이언트, iOS/Android 학생 클라이언트 및 Web/Wap 학생 클라이언트가 포함됩니다. 이 기사는 Maimai의 상호 작용 프로세스, 프런트 엔드의 Maimai 모듈 디자인, 프런트 엔드의 대화형 및 채팅 구성 요소 디자인에 중점을 둡니다. 채팅방 자체의 채팅 기능 구현을 위해 Yunxin IM SDK에 대한 액세스는 주로 Api 호출 패키지를 통해 구현되므로 자세한 설명은 생략하겠습니다.
시스템을 설계하기 전에 먼저 다음 질문을 고려해야 합니다.
• 각 종단의 요구 사항 정의 및 기능 구분, 각 종단이 상호 작용하는 방식
• 양 끝 사이의 합의
• 클라이언트는 마이크와 교사에게 수신하도록 요청합니다.
• 클라이언트가 양방향 라이브 방송실에 입장한 후 양방향 정보 동기화
위의 질문을 가지고 먼저 우리가 의지할 수 있는 서비스를 분류해 봅시다. NetEase Cloud에서 제공하는 다음 서비스는 아래 그림과 같습니다. 자체 시스템 요구 사항의 설계와 결합하여 IM 및 대화형 라이브 방송의 기능을 신속하게 통합할 수 있습니다.
• Yunxin IM 서비스는 인스턴트 메시징 및 실시간 네트워크 기능을 기업 자체 애플리케이션에 신속하게 통합할 수 있는 완전한 기본 인스턴트 메시징 기능 세트를 제공합니다.
• Yunxin의 대화식 생방송 기능은 호스트와 청중 간의 실시간 상호 작용을 지원합니다.
뼈대
우리의 기본 요구 사항은 주로 다음 세 부분입니다.
1. 학생들은 앱 클라이언트의 대화방에 입장하고 밀 요청을 시작할 수 있습니다.
2. 교사 측에서는 학생의 요청을 승인하거나 거부할 수 있습니다.
3. 교사가 학생의 요청에 동의하면 학생은 생방송 방에 입장하여 교류할 수 있습니다.
요구 사항을 결합하고 아래 그림과 같이 기본 마이크 요청, 마이크 연결 및 대화식 프로세스를 정렬합니다. 서로 다른 스타일의 데이터 흐름은 서로 다른 계약을 나타냅니다.
다음은 몇 가지 추가 개념입니다.
1. 클라이언트 Yunxin IM의 SDK, 클라이언트는 Yunxin IM을 통해 교사에게 P2P 메시지를 보냅니다.
2. 클라이언트 인터랙티브 라이브 브로드캐스트 SDK, 클라이언트가 인터랙티브 라이브 브로드캐스트에 연결
3. 교사 측의 Yunxin SDK, p2p 메시지 수락
4. 교사 측 대화형 라이브 방송 SDK, 클라이언트 측 라이브 방송과 상호 작용
5. 웹상의 Yunxin IM SDK, 메시지 송수신
6. 메시지를 커스터마이즈하고 각 끝에서 보낸 메시지의 데이터 구조
설계 및 구현
구현 이 섹션에서는 이전 섹션의 개요에서 언급한 교사 클라이언트 및 Web/Wap 학생 클라이언트의 구현을 주로 소개합니다. 주로 프로세스 개선, 교사 IM 모듈, 웹 학생 터미널 모듈, 구성, 장점 및 기존 문제와 같은 부분을 포함합니다.
프로세스 개선
먼저 교사말 구현을 소개하고, 아래 그림의 번호순으로 일부 내용을 보충 설명하도록 하겠습니다. 교사 측은 두 가지 주요 부분이 있는데, 하나는 이 글에서 교사의 네이티브라고 하는 네이티브이고 다른 하나는 이 글에서 교사 IM이라고 하는 웹 페이지입니다. 교사 네이티브와 교사 IM은 jsbridge 및 사용자 정의 메시지를 통해 통신합니다.
먼저 교사 원어민과 교사 IM 간의 jsbridge 통신을 다음과 같이 정리합니다.
-notifyQueueChange
-알림볼륨
-notifyCustomMsg
-업데이트 확인
-notifyLiveStatus
위의 순서도를 결합한 다음 프로세스에 대한 자세한 설명을 작성하십시오.
1. 클라이언트 초기화
각 끝은 서버에 요청하여 통일된 대화방 주소를 얻습니다.
2. 교사 초기화
교사 IM이 초기화된 후 서버 요청(getPresenterLiveInfo)을 통해 대화방 주소를 획득하고 대화방 싱글톤을 획득하고 교사에게 기본 대화방이 준비되었음을 알리고 대화형 라이브 방송 데이터를 획득합니다.
3. 밀을 초청하는 과정
• 클라이언트는 네이티브 교사에게 p2p 메시지를 보냅니다. 교사 네이티브는 jsbridge를 사용하여 교사 IM의 notifyCustomMsg를 호출하고 교사 IM은 유지 관리하는 Mai 요청에 대한 대기 큐를 업데이트합니다.
• 선생님의 IM은 동의 또는 거부를 클릭하고, 선생님의 원어민은 메시지를 통해 통보되며, 선생님의 원어민은 P2P를 통해 클라이언트에게 요청을 알립니다.
• 클라이언트는 대화형 라이브 방송 SDK를 사용하고 마이크를 라이브 룸에 연결하고 대화형 라이브 방송 SDK를 통해 교사 네이티브에게 메시지를 보냅니다.
• 교사 네이티브는 notifyQueueChange 메소드를 호출하여 교사 IM의 목록을 업데이트합니다.
• Teacher IM, 서버의 업로드 및 다운로드 대기열을 업데이트하고 사용자 지정 메시지(im-sdk)를 보내고 브로드캐스트하여 각 클라이언트에 알리도록 비동기식으로 요청(informServer)합니다.
교사 IM 모듈
순서도와 위의 프로세스에 대한 자세한 설명을 결합하면 다음 그림과 같이 프런트 엔드 모듈이 설계되고 분할됩니다.
여기서 LivePcChat은 Tab의 채팅 구성 요소이고 LiveInteractivePresenter는 대화형 작업을 처리하는 구성 요소이며 XXcache는 해당 데이터 계층 작업을 캡슐화하는 구성 요소입니다. 특정 구성 요소 인스턴스, 호출, 데이터 요청 및 처리 프로세스는 아래 시퀀스 다이어그램과 같습니다.
웹 학생 모듈
Web/Wap 학생단말기의 경우, Web/Wap 학생단말기 자체가 처녀 기능을 아직 개발하지 않았기 때문입니다. 여기에서는 웹 학생 단말기를 예로 들어 대화형 목록 및 채팅 상호 작용에서 Web/Wap 학생 단말기의 실현을 소개합니다. 자신의 대화방 부분과 교사 측 대화방은 대화 구성 요소를 재사용하므로 여기서도 먼저 모듈을 나눕니다. 교사 측의 구성 요소 구분을 참조하여 교사 측과 학생 측에서 재사용되는 일부 구성 요소를 비교할 수 있습니다. 다음 그림은 웹 학생 측의 분할을 보여줍니다.
아래 표의 비교를 통해 Yingmai와 관련된 처리 논리 외에도 교사 측과 웹 학생 측의 IM의 다른 기능을 재사용할 수 있음을 알 수 있습니다.
구성
인터랙티브 라이브 방송은 오리지널 라이브 방송을 기반으로 한 반복이므로 여기서는 다양한 교육 제품 라인에서 인터랙티브 라이브 방송의 구성 가능성을 보장해야 합니다. 여기에 언급된 구성은 교육 공용 구성 요소 풀의 다른 모듈 및 구성 요소 액세스 구성과 유사합니다. 또한 라이브 페이지 또는 프로젝트 단일 페이지가 로드될 때 구성에서 읽히는 교육 일반 구성 요소 캐시 기반(기관 배경) 구성, 단일 키 구성에 의존합니다.
장단점 분석
이 디자인을 사용하면 다음과 같은 이점이 있습니다.
1. 모든 서버 요청은 웹 페이지를 통해 전송되므로 교사의 유지 관리 비용이 절감됩니다.
2. 모듈의 구성 가능성. 다양한 비즈니스 라인에서 대화형 라이브 방송에 연결할지 여부를 결정하도록 구성할 수 있습니다.
3. 구성 요소가 세분화되어 있습니다. 다른 모듈에서 교사 측은 채팅 구성 요소와 대화형 구성 요소, 마이크 구성 요소에 액세스할 수 있고 학생 측은 대화형 목록 구성 요소에만 액세스할 수 있습니다.
4. 기존 Yunxin sdk에 의해 구현된 기능에 가장 많이 의존하며 비교적 짧은 시간에 요구 사항을 충족할 수 있습니다.
문제
1. Yingmai의 프로세스는 여러 끝을 포함하고 각 끝에서 디버깅하는 것은 시간 낭비이기 때문에 더 복잡합니다. 이는 이 글을 정리한 목적이기도 하다. 각 끝의 프로세스를 이해한 후 각 끝은 먼저 디버깅 중에 문제의 끝을 찾을 수 있으며 특정 링크에서 대상 방식으로 문제를 찾을 수 있습니다.
2. 원래 iteration을 기반으로 수행되기 때문에 많은 구성 요소가 교육 표준 구성 요소로 캡슐화되지 않지만 명확한 논리를 전제로 후속 iteration에서 최적화할 수 있습니다.
3. 프런트 엔드 구현 방법을 최적화합니다.
요약하면
이 기사를 통해 양방향 라이브 방송 프로세스에 대한 이해에 대한 나중에 액세스를 용이하게 하기 위해 양방향 라이브 방송의 각 끝의 논리를 정리할 것입니다. 클라이언트와 교사의 경우 프런트 엔드에서 제공하는 인터페이스 및 메시지 구현을 이해할 수 있습니다. 다른 후속 프로젝트에서 대화형 라이브 방송 모듈에 액세스해야 하는 경우 빠르게 액세스하고 디버깅할 수 있으며 동시에 위에서 제기한 기존 문제를 더욱 최적화할 수 있습니다.
|
놀라움을 얻으려면 이메일을 입력하십시오.
es.fmuser.org
it.fmuser.org
fr.fmuser.org
de.fmuser.org
af.fmuser.org -> 아프리칸스어
sq.fmuser.org -> 알바니아어
ar.fmuser.org -> 아랍어
hy.fmuser.org -> 아르메니아어
az.fmuser.org -> 아제르바이잔 어
eu.fmuser.org -> 바스크
be.fmuser.org -> 벨로루시 어
bg.fmuser.org -> 불가리아어
ca.fmuser.org -> 카탈로니아 어
zh-CN.fmuser.org -> 중국어 (간체)
zh-TW.fmuser.org -> 중국어 (번체)
hr.fmuser.org -> 크로아티아어
cs.fmuser.org -> 체코
da.fmuser.org -> 덴마크어
nl.fmuser.org -> 네덜란드어
et.fmuser.org -> 에스토니아어
tl.fmuser.org -> 필리피노
fi.fmuser.org -> 핀란드어
fr.fmuser.org -> 프랑스어
gl.fmuser.org -> 갈리시아어
ka.fmuser.org -> 조지아 어
de.fmuser.org -> 독일어
el.fmuser.org -> 그리스
ht.fmuser.org -> 아이티 크리올
iw.fmuser.org -> 히브리어
hi.fmuser.org -> 힌디어
hu.fmuser.org 헝가리어
is.fmuser.org -> 아이슬란드 어
id.fmuser.org -> 인도네시아어
ga.fmuser.org -> 아일랜드어
it.fmuser.org -> 이탈리아어
ja.fmuser.org -> 일본어
ko.fmuser.org -> 한국어
lv.fmuser.org -> 라트비아어
lt.fmuser.org 리투아니아어
mk.fmuser.org -> 마케도니아 어
ms.fmuser.org -> 말레이어
mt.fmuser.org -> 몰타어
no.fmuser.org -> 노르웨이어
fa.fmuser.org -> 페르시아어
pl.fmuser.org -> 폴란드어
pt.fmuser.org -> 포르투갈어
ro.fmuser.org -> 루마니아어
ru.fmuser.org -> 러시아어
sr.fmuser.org -> 세르비아어
sk.fmuser.org -> 슬로바키아어
sl.fmuser.org -> 슬로베니아어
es.fmuser.org -> 스페인어
sw.fmuser.org -> 스와힐리
sv.fmuser.org -> 스웨덴어
th.fmuser.org -> 태국
tr.fmuser.org -> 터키어
uk.fmuser.org -> 우크라이나어
ur.fmuser.org -> 우르두어
vi.fmuser.org -> 베트남어
cy.fmuser.org -> 웨일스 어
yi.fmuser.org -> 이디시어
FMUSER 무선 전송 비디오 및 오디오가 더 쉬워졌습니다!
상담문의
주소:
No.305 Room HuiLan Building No.273 Huanpu Road 광저우 중국 510620
카테고리
MMCC 뉴스레터