Overview of Message List Implementation

This section primarily introduces the basic implementation logic of the Polyv Chat Room message list.

1. Historical Chat Messages

Messages in the message list mainly come from two sources: historical messages and real-time messages. Historical messages are further divided into session historical messages and channel historical messages.

Session Historical Messages

Each live broadcast corresponds to a unique session ID (sessionId). All user messages during that live session are associated with this ID. You can use the getSessionHistory method to retrieve the historical chat messages for that session.

You can determine whether the last page has been loaded by comparing the curPage and totalPage fields in the returned data.

async function getSessionHistory() {
  const res = await chat.getSessionHistory({
    // 场次 id(非必传，默认使用实例的 sessionId)
    sessionId: '',
    // 页数
    page: 1,
    // 条数(非必传，默认10)
    size: 20,
  });
  const { curPage, totalPage, count, size, data = [] } = res;
  const isLastPage = curPage === totalPage;
  console.log('场次消息列表数据：', data);
}

Channel Historical Messages

You can use the getChannelHistory method to retrieve chat messages from all sessions within a channel. Note that each channel has a maximum number of messages it can store. When the message volume exceeds this limit, older messages are discarded first.

async function getChannelHistory() {
  let start = 0;
  let end = 9;

  const msgList = await chat.getChannelHistory({
    // 房间号(若不传，默认为实例中的房间号/频道号)
    roomId: '',
    // 开始索引
    start,
    // 结束索引
    end,
    // 是否获取全部信息。1表示获取全部(默认)，0表示过滤图片和自定义消息
    fullMessage: 1,
    // 是否仅获取特殊角色发言(讲师、助教、嘉宾)，后端默认 0(全部获取) 
    getSpecialMessage: 0,
  });

  console.log('频道消息列表数据', msgList);
  // 可根据返回的消息列表长度是否满足索引跨度，来判断当前是否加载到末尾。
  if (msgList.length < end - start) {
    console.log('已加载到消息列表末尾');
  }
}

2. Real-Time Sending and Receiving of Chat Messages

Events such as text messages from others, image sending, message deletion, and custom messages will trigger corresponding events within the SDK. You can listen to these events and process the messages that need to be displayed based on the parameters.

Receiving Messages

Below is a list of all events related to chat room messages. For detailed events, parameters, and fields, please refer to the API documentation. The following are some commonly used events:

Message Type List

To facilitate quick integration, this SDK categorizes and encapsulates some chat room events based on the current Polyv message list UI display format. Detailed type constants can be accessed via chat.msgTypes.
Some event data that needs to be displayed will contain the msgType field. You only need to insert it into the local message list and display the corresponding component/style based on this field. Historical messages also encapsulate this field. Below is a list of events corresponding to each msgType.

When listening to the above events, you can consider adding the message body to the list of messages to be displayed, and then use the corresponding component for rendering based on the specific msgType.

Sending Messages

Sending Text Messages

You can use the send method to send regular text messages.

chat.send(
  '消息内容',
  // 第二个参数为引用消息，非必传。
  // 特殊角色使用公屏回复功能时需传入(完整传入，使SDK内部可封装、触发SEND_MESSAGE事件)
  {
    id,
    // ...
  }
);