배달/읽음 영수증

누군가 보낸 메시지를 몇 명이 읽었는지 배달 받았는지 시간을 통해 알아낼 수 있습니다.

STEP 1

배달/읽음은 무엇인가?

읽음(group:channel_message_read_event)이벤트와 배달(group:channel_message_delivered_event) 이벤트는 독자적으로 하나씩 오기도 하고 메시지가 전송될 때 함께 오기도 합니다.

배달/읽음 메시지는 다음의 두 경우에 콜백됩니다.

1. 메시지가 올때 : "group:message_send" 이벤트가 발생될 때 "group:channel_message_read_event" 와 "group:channel_message_delivered_event" 이벤트도 함께 콜백 됩니다.

2. 읽음 처리 또는 배달 처리 : "group:channel_message_read_event" 또는 "group:channel_message_delivered_event"가 독자적으로 콜백 됩니다.

'group:channel_message_read_event'에서 반환되는 JSON

{
    channel_id: "channel_1",
    created_at: 1660026585675,
    freeze: false,
    name: "channel_1",
    profile_url: "channel_1.png",
    /* 읽음 영수증 */
    read_receipt: { 
      user_1: 1660198302998,
      user_2: 1660198301941
    },
    total_file_count: 10,
    total_message_count: 22,
    type: "group",
    updated_at: 1660198322936
}

'group:channel_message_delivered_event'에서 반환되는 JSON

{
    channel_id: "channel_1",
    created_at: 1660026585675,
    freeze: false,
    name: "channel_1",
    profile_url: "channel_1.png",
    /* 배달 영수증 */
    delivery_receipt: {
      user_1: 1660198302998,
      user_2: 1660198301941
    },
    total_file_count: 10,
    total_message_count: 22,
    type: "group",
    updated_at: 1660198322936
}

STEP 2

타임스탬프 계산하기

Step1 있는 json값들은 'read_receipt'와 'delivered_receipt' 프로퍼티만 다르고 형태가 같습니다.
read_receipt엔 사용자별 읽은 시간 delivery_receipt 메시지를 받은 시간이 기록됩니다. (타임 스탬프 형식)
메시지 생성 시간과 읽은 시간(또는 배달 받은 시간)을 비교해여 상태를 나타낼 수 있습니다. (n명이 읽음, n명이 배달 받음)

STEP 3

CODE

사용자(user_1)가 'channel_1' 채널에 있을 때 다음의 메시지 데이터가 있다고 가정하고 '읽었음', '받았음' 값을 구해보도록 하겠습니다. channel_message_read_event와 channel_message_delivered_event가 동일한 타입이므로 channel_message_read_event로 예제를 구성했습니다.

    var myMessage = []; // 현재 메시지가 담겨있는 배열 변수로 가정

    // 채널 메시지 읽음 이벤트 channel변수 안에 채널 정보와 read_reciept정보가 함께 담겨옵니다.
    gitplelive.on('group:channel_message_read_event', (channel) => {

        /**
         * channel.read_receipt 안에는 아래와 같은 key:value 형식으로
         * 참가한 회원의 수 많큼 pair로 구성됩니다.

             read_receipt: {
                user_1: 1660198302998,
                user_2: 1660198301941,
                user_3: 1660198201741
             }
         */

        for (var i = 0; i < myMessage.length; i++) {
            let cntUnread: number = Object.keys(channel.read_receipt).length;

            for (var userID in channel.read_receipt) {
                if (myMessage[i].created_at <= channel.read_receipt[userID]) {
                    cntUnread--;
                }
            }

            myMessage[i]['cntUnread'] = cntUnread; // 읽지 않은 사용자의 수
        }        
    });

STEP 4

메시지가 전송 됐을 때 배달/읽음 API호출 하기

메시지를 전송 받을 때 (받은 쪽에서도) 받음/읽음 API를 호출해서 다른 유저들에게도 전달해야합니다.

function sendReadReciept() {
    const url = "https://{API_HOST}/v1/group/channels/{channel_id}/messages/read";

    // user_1 아이디 사용자가 현재 채널을 읽었다고 호출
    fetch(url, {
        method: "PUT",
        headers: {
            "APP_ID": app_id,
            "APP_API_KEY": app_key
        },
        body: {
            "member": "user_1"
        }
    })
        .then((response) => response.json())
        .then((data) => console.log(data));
}

배달/읽음 API는 배달/읽음 메뉴를 참조해주세요.

배달/읽음 영수증

배달/읽음 영수증

results matching ""

No results matching ""