필터 가능한 주제를 포함하는 TalkJS 채팅 받은 편지함 만들기

우리는 TalkJS Chat API를 사용하여 채팅 수신함을 만들 것입니다. 이것은 프로그래밍 방식으로 서로 다른 주제에 따라 필터를 해서 사용자에게 어떤 채팅 대화를 보여줄지 완전히 제어할 수 있도록 합니다.TalkJS에서 이러한 필터를 피드백 필터라고 합니다.

토크JS 채팅 받은 편지함이란?

TalkJS 받은 편지함은 우리의 기능이 가장 완전한 사용자 인터페이스 구성 요소이다.이것은 왼쪽에 당신이 참여한 모든 대화를 표시하고, 오른쪽에 선택한 대화를 표시합니다.Session.createInbox에서 받은 편지함을 만들고 전화mount로 표시할 수 있습니다.그것은 보통 자신의 페이지에 있는 프로그램의 메시지 센터로 설계되었다.

사료 여과기는 무엇입니까?

수신함의 왼쪽 부분을 요점이라고 한다.여러 속성에 따라 표시되는 대화를 선별할 수 있습니다.예를 들어 대화 목록을 필터링하여 읽지 않은 대화, 사용자가 쓸 수 있는 대화만 표시하거나 범주나 주제와 같은 사용자 정의 매개 변수로 대화를 필터링할 수 있습니다.
사용 가능한 모든 필터 옵션에 대해서는 ConversationPredicate를 참조하십시오.

요약 필터 객체 구조

우리의 예시에서, 우리는 필터와 사용자 정의 속성을 결합시켜 사용하기를 희망한다.옵션 사용자 정의 속성을 setFeedFilter와 함께 사용하는 규칙은 다음과 같습니다.

특정 사용자 정의 필드를 특정 값으로 설정하는 대화만 선택합니다.

각 키는 사용자가 설정한 사용자 정의 대화 데이터에 대응하는 키로 custom를 ConversationBuilder.setAttributes로 전달해야 합니다.

모든 대화에 키가 필요한 것은 아닙니다.

각 값은 다음 값 중 하나여야 합니다.

문자열, "exists" 또는 "!exists"

구조의 2원소 진열연산자 중 하나에 대한 문자열 또는 문자열 배열이어야 합니다.유효한 연산자는 [operator, operand], "==", "!=" 및 "oneOf"이다.

예를 들어, 대화에 카테고리 사용자 지정 필드를 설정한 경우

// only show conversations that have no category set:
{ custom: { category: "!exists" } }

// only show conversations of category "shoes"
{ custom: { category: ["==", "shoes"] } }

// only show conversations either category "shoes" or "sandals"
{ custom: { category: ["oneOf", ["shoes", "sandals"] ] } }

// only show conversations about shoes that are marked visible. 
// this assumes you also have a custom field called visibility 
{ custom: { category: ["==", "shoes"], visibility: ["==", "visible" ] } }

사료 여과기 사용 예

다음 방법으로 수신함의 요약 필터inbox.setFeedFilter를 설정할 수 있습니다.또는 받은 편지함을 만들 때feedFilter로 전송할 수 있습니다.
예를 들어, 읽기 대화를 숨기려면 다음을 사용합니다."!oneOf" .
모든 내용을 표시하려면(필터를 비활성화) 빈 객체를 사용합니다.inbox.setFeedFilter({ hasUnreadMessages: true }) .
사용자 정의 속성inbox.setFeedFilter({})과 category이 category인 대화만 표시하려면 다음과 같이 하십시오.shoes이벤트 처리 프로그램에서 inbox.setFeedFilter({ custom: { category: ["==", "shoes"] } }) 사용하거나 입력 값을 변경할 때 응답할 수 있습니다.이것은 동적 사용setFeedFilter을 허용하여 사용자의 조작에 직접 응답할 수 있다.예를 들면 다음과 같습니다.

const button = document.getElementById("filter-btn"):
    button.addEventListener("click", function() {
    inbox.setFeedFilter({custom: {category: ["==", "shoes"]}});
});

요약 필터에 대한 정보가 있습니다. 사용자 정의 속성에 따라 필터를 할 수 있는 수신함을 만듭니다.

응용 프로그램에 TalkJS 추가 및 대화 시작

feed 필터의 사용을 보여주기 위해서 두 개의 다른 대화를 만들 것입니다.
첫 대화는 앨리스와 존 사이에서 진행되며 랜덤 제품에 대한 일반적인 문제이다.
두 번째 대화는 앨리스와 바울 사이에서 진행된다. 대화의 주제는 신발이다. 이것은 우리가 상상하는 상점에서 매우 환영받는 제품이다.
우리의 전면적인 Getting Started guide를 사용하여 사용자와 대화 데이터를 만듭니다.우리의 장면에는 두 가지 시작 안내서에 포함되지 않은 추가 절차가 필요합니다.

추가 사용자를 만들어야 합니다.기존 사용자를 복사하여 붙여넣을 수 있습니다. 값setFeedFilter

만 변경하면 됩니다.

우리는 여기에 표시된 대화 데이터를 조정하여 우리의 사용자 정의 속성을 포함해야 한다. 이 속성은 우리의 수신함을 필터하는 데 사용될 것이다.

const conversation = session.getOrCreateConversation(Talk.oneOnOneId(me, otherGeneric));
conversation.setAttributes({subject: "Generic Question"});
conversation.setParticipant(me);
conversation.setParticipant(otherGeneric);

const shoeConversation = session.getOrCreateConversation(Talk.oneOnOneId(me, otherShoes));
shoeConversation.setAttributes({subject: "Shoes Question"});
shoeConversation.setAttributes({custom:{ category: "shoes" } });
shoeConversation.setParticipant(me);
shoeConversation.setParticipant(otherShoes);

이 예에서는 우리가 생각하는 사용자 Alice를 id, John을 me, Paul을 otherGeneric로 설정합니다.
방법setAttributes의 사용을 주의하십시오. 우리는 이 방법을 키otherShoes로 표시shoesConversation를 사용합니다.이것이 바로 우리가 서로 다른 대화의 주제를 어떻게 설정하는가이다.
현재 대화와 요약 필터와 함께 사용할 속성을 설정했습니다. 다음 단계로 넘어갈 수 있습니다.

요약 필터를 사용하는 수신함 만들기

다음 코드를 프로젝트에 추가하고 이전 예시를 계속합니다.

const inbox = session.createInbox({selected: conversation});
inbox.mount(document.getElementById("talkjs-container"));

우리는 아직 사료 여과기를 내놓지 않았다.우선, 우리는 몇 가지 텍스트로 이 두 대화를 채울 것이다.category: shoes를 사용하면 우리의 수신함을 시작하고 첫 번째 대화selected: conversation와 me(앨리스와 존) 사이의 대화를 선택합니다.만약 우리가 이렇게 하지 않았다면, 우리는 아직 아무런 대화도 시작하지 않았다는 소식을 보았을 것이다.
상기 코드를 추가하면 프로그램을 실행합니다!
메시지를 추가할 수 있어야 합니다.

이 대화에 메시지를 추가하면 코드를 되돌려줍니다.
교체otherGeneric지원const inbox = session.createInbox({selected: conversation});프로그램을 다시 실행합니다!예전과 마찬가지로, 너는 대화를 한 번 받아야 한다. 이번에는 바울과.앞과 같이 대화에 문자를 추가합니다.

우리는 지금 단독으로 진행 중인 두 개의 대화가 있다.이 작업을 보려면 코드를 반환하고 const inbox = session.createInbox({selected: shoeConversation});를 const inbox = session.createInbox({selected: shoeConversation});로 바꾸십시오.이제 두 개의 대화를 볼 수 있고, 그것들 사이를 전환할 수 있습니다.

우리는 이미 수신함을 만들고 그 안에 대화를 채웠다.필터를 만들 때가 되었습니다. 클래스 사이에서 필터를 할 수 있도록 합니다.이 예에서 우리는 신발 종류를 만들고 두 번째 대화에 추가했다는 것을 기억해라.사용자 정의 속성이 설정된 경우 다음 코드 행만 추가하면 됩니다.

inbox.setFeedFilter({ custom: { category: ["==", "shoes"] } });

따라서 최종 코드는 다음과 같습니다.

const inbox = session.createInbox();
inbox.setFeedFilter({ custom: { category: ["==", "shoes"] } });
inbox.mount(document.getElementById("talkjs-container"));

이제 받은 편지함에는 [신발] 범주가 포함된 대화만 표시됩니다.
여기 있습니다!필터가 성공적으로 적용되었습니다. 현재 특정한 테마나 분류에 따라 수신함에 표시된 대화를 필터할 수 있습니다.