3_5-云课堂场景-聊天室

• 1 Feature Overview
• 2 Usage Demo
• 3 Implementation Details
  • 3.1 PLVLCChatFragment
  • 3.2 PLVLCChatLandscapeLayout
  • 3.3 PLVLCQuizFragment

1 Feature Overview

The chat room module includes features such as posting messages, asking questions, liking, viewing history, and welcome messages. Compared to other modules, the chat room module is more complex and extensive in terms of UI, interaction, and functionality. Therefore, designing, building, and maintaining a chat room can be time-consuming and labor-intensive. We recommend directly using the chat room module encapsulated by Polyv. This part of the code is fully open-source, supporting direct use and secondary development.

2 Usage Demo

The UI layout of the chat room module in the cloud classroom scenario consists of three parts. The page menu includes a chat tab and a question tab, while the landscape player area also includes a chat layout. The following example demonstrates adding a chat tab to the page menu, with the code as follows:

//聊天室mvp-presenter
private IPLVChatroomContract.IChatroomPresenter chatroomPresenter;

private void addChatTab(PolyvLiveClassDetailVO.DataBean.ChannelMenusBean channelMenusBean) {
    //页面菜单添加聊天tab的标题
    pageMenuTabTitleList.add(channelMenusBean.getName());
    //聊天fragment
    chatFragment = new PLVLCChatFragment();
    //初始化聊天列表
    chatFragment.init(chatCommonMessageList);
    //配置聊天页面所需的数据
    chatFragment.setIsLiveType(liveRoomDataManager.getConfig().isLive());
    //配置聊天页面的UI交互监听器
    chatFragment.setOnViewActionListener(new PLVLCChatFragment.OnViewActionListener() {
        @Override
        public void onShowBulletinAction() {
            //...
        }
    });
    //聊天室mvp-presenter注册聊天室mvp-view
    chatroomPresenter.registerView(chatFragment.getChatroomView());
    //页面菜单添加聊天tab
    pageMenuTabFragmentList.add(chatFragment);
}

3 Implementation Details

3.1 PLVLCChatFragment

The interactive chat tab page in the cloud classroom scenario includes elements such as a chat message list, message input box, emoji layout, like layout, welcome messages, and announcements. This class communicates with the chat room MVP-presenter through the chat room MVP-view defined within it. When the registerView method of the chat room MVP-presenter is called, the chat room MVP-presenter can notify the chat room MVP-view of updates, and the chat room MVP-view can also call methods of the chat room MVP-presenter. Example code for defining the chat room MVP-view:

//聊天室mvp-presenter
private IPLVChatroomContract.IChatroomPresenter chatroomPresenter;

//聊天室mvp-view
private IPLVChatroomContract.IChatroomView chatroomView = new PLVAbsChatroomView() {
    @Override
    public void setPresenter(@NonNull IPLVChatroomContract.IChatroomPresenter presenter) {
        super.setPresenter(presenter);
        chatroomPresenter = presenter;
    }

    @Override
    public void onSpeakEvent(@NonNull PLVSpeakEvent speakEvent) {
        super.onSpeakEvent(speakEvent);
    }

    @Override
    public void onImgEvent(@NonNull PLVChatImgEvent chatImgEvent) {
        super.onImgEvent(chatImgEvent);
    }

    @Override
    public void onLikesEvent(@NonNull PLVLikesEvent likesEvent) {
        super.onLikesEvent(likesEvent);
    }

    @Override
    public void onLoginEvent(@NonNull PLVLoginEvent loginEvent) {
        super.onLoginEvent(loginEvent);
    }

    @Override
    public void onLogoutEvent(@NonNull PLVLogoutEvent logoutEvent) {
        super.onLogoutEvent(logoutEvent);
    }

    @Override
    public void onBulletinEvent(@NonNull PolyvBulletinVO bulletinVO) {
        super.onBulletinEvent(bulletinVO);
    }

    @Override
    public void onRemoveBulletinEvent() {
        super.onRemoveBulletinEvent();
    }

    @Override
    public void onCloseRoomEvent(@NonNull final PLVCloseRoomEvent closeRoomEvent) {
        super.onCloseRoomEvent(closeRoomEvent);
    }

    @Override
    public void onRemoveMessageEvent(@Nullable String id, boolean isRemoveAll) {
        super.onRemoveMessageEvent(id, isRemoveAll);
    }

    @Override
    public void onCustomGiftEvent(@NonNull PolyvCustomEvent.UserBean userBean, @NonNull PLVCustomGiftBean customGiftBean) {
        super.onCustomGiftEvent(userBean, customGiftBean);
    }

    @Override
    public void onLocalSpeakMessage(@Nullable PolyvLocalMessage localMessage) {
        super.onLocalSpeakMessage(localMessage);
    }

    @Override
    public void onLocalImageMessage(@Nullable PolyvSendLocalImgEvent localImgEvent) {
        super.onLocalImageMessage(localImgEvent);
    }

    @Override
    public void onSpeakImgDataList(List<PLVBaseViewData> chatMessageDataList) {
        super.onSpeakImgDataList(chatMessageDataList);
    }

    @Override
    public void onHistoryDataList(List<PLVBaseViewData<PLVBaseEvent>> chatMessageDataList, int requestSuccessTime, boolean isNoMoreHistory, int viewIndex) {
        super.onHistoryDataList(chatMessageDataList, requestSuccessTime, isNoMoreHistory, viewIndex);
    }

    @Override
    public void onHistoryRequestFailed(String errorMsg, Throwable t, int viewIndex) {
        super.onHistoryRequestFailed(errorMsg, t, viewIndex);
    }
};

3.2 PLVLCChatLandscapeLayout

The landscape chat layout in the cloud classroom scenario, similar to PLVLCChatFragment, can display the chat message list and load history records. It is a chat area displayed in landscape mode. This class also defines a chat room MVP-view responsible for communication with the chat room MVP-presenter.

3.3 PLVLCQuizFragment

The consultation and question tab page in the cloud classroom scenario is primarily used for asking questions to the instructor. Messages sent from this page are only visible to the instructor. This class also defines a chat room MVP-view responsible for communication with the chat room MVP-presenter.