실시간 데이터베이스
Parse Server 라이브 쿼리 사용 방법
소개
라이브 쿼리는 실시간 반응형 애플리케이션에서 사용되도록 설계되었으며, 전통적인 쿼리 패러다임을 사용하는 것만으로는 응답 시간 증가 및 높은 네트워크와 서버 사용량과 같은 여러 문제를 일으킬 수 있습니다. 라이브 쿼리는 데이터베이스에서 오는 최신 데이터로 페이지를 지속적으로 업데이트해야 하는 경우에 사용해야 하며, 이는 종종 (하지만 이에 국한되지 않음) 온라인 게임, 메시징 클라이언트 및 공유 할 일 목록에서 발생합니다.
이 섹션에서는 Back4App을 통해 JavaScript 환경에서 Back4App의 라이브 쿼리를 사용하는 방법을 설명합니다.
이 튜토리얼에서는 예제로 Todo 온라인 목록을 라이브 쿼리를 사용하여 구축할 것입니다. 아래와 같이:
전체 Todo Online List 프로젝트를 보려면 실시간 쿼리 Todo List 프로젝트.
Parse SDK에 대한 자세한 내용은 JavaScript SDK API 참조 및 Parse 오픈 소스 문서(JavaScript SDK용).
필수 조건
이 튜토리얼을 완료하려면 다음이 필요합니다:
1 - 실시간 쿼리 활성화
코딩을 시작하기 전에, 라이브 쿼리를 활성화하기 위해 데이터베이스에 클래스를 만들어야 합니다. 그렇게 하려면, Back4App 웹사이트,에서 앱을 찾아 대시보드 > 클래스 만들기, 아래와 같이 클릭하세요:
참고: 여기서 이 클래스는 메시지라고 불릴 것입니다.
이제 라이브 쿼리 기능을 활성화하려면, Back4App 웹사이트,에서 계정에 로그인하고, 앱을 찾아 앱 설정 > 서버 설정. “서버 URL 및 라이브 쿼리” 블록을 찾아 설정. “서버 URL 및 라이브 쿼리” 블록은 다음과 같습니다:
그런 다음 아래와 같은 페이지에 도착하게 됩니다. 이 페이지에서는 Back4App 서브도메인 활성화 옵션, 라이브 쿼리 활성화 옵션 및 라이브 쿼리를 활성화할 모든 클래스를 선택해야 합니다. 아래와 같이:
라이브 쿼리를 사용하려면 서브도메인을 활성화해야 합니다. 이는 라이브 서버로 작동할 것입니다.
2 - 쿼리 구독하기
라이브 쿼리를 사용하려면 먼저 LiveQueryClient를 생성해야 합니다. 이 클라이언트는 웹소켓 연결을 관리합니다. 이를 위해 애플리케이션 ID, 검증을 위한 JavaScript 키, 그리고 이전 단계에서 설정한 도메인인 서버 URL을 제공해야 합니다.
다음은 LiveQueryClient:
1 var client = new Parse.LiveQueryClient({
2 applicationId: 'Your app Id here',
3 serverURL: 'wss://' + 'Your domain here', // Example: 'wss://livequerytutorial.back4app.io'
4 javascriptKey: 'Your JavaScript key here'
5 });
6 client.open();위에서 언급한 단계를 따르면, 구독하고자 하는 객체 유형에 대한 쿼리를 생성해야 합니다. 구독은 이벤트 발신기로, 쿼리를 만족하는 객체에 변화가 생길 때 이벤트를 발생시킵니다. 이 예제에서는 기본 쿼리를 만들고 Todo 객체에 대한 모든 변경 사항을 구독할 것입니다.
쿼리에 대한 자세한 내용은 Parse 공식 쿼리 문서를 참조하세요.
다음은 querySubscribe:
1 var query = new Parse.Query('Todo');
2 query.ascending('createdAt').limit(5);
3 var subscription = client.subscribe(query);3 - 이벤트 수신
설정이 완료되면, 이벤트가 발생할 때 앱이 수행할 작업을 코딩해야 합니다. 이 부분에서는 이러한 이벤트를 실제 예제로 수신하는 방법을 보여줄 것입니다.
이 Todo 온라인 목록 예제는 사용된 보일러플레이트 코드가 거의 없기 때문에 프로젝트의 지침으로 활용될 것입니다.
여기서 사용할 두 가지 주요 이벤트는 create 이벤트와 delete 이벤트입니다. 이벤트의 전체 목록은 여기에서 확인할 수 있습니다.
3.1 - 생성 이벤트
이 createEvent는 ParseObject가 생성되고 당신이 삽입한 쿼리 제약 조건을 충족할 때마다 발생합니다. 이 이벤트는 생성된 객체를 반환합니다. Todo 온라인 목록 예제에서 활동 배열은 this.todos 변수에 저장되며, 생성 이벤트가 발생할 때 데이터베이스의 새로운 객체를 이 배열에 추가할 것입니다.
다음은 createEvent에 대한 코드입니다:
1 subscription.on('create', todo => {
2 this.todos.add(todo);
3 console.log('On create event');
4 });3.2 - 삭제 이벤트
기존의 ParseObject가 데이터베이스에서 삭제될 때마다 이 이벤트가 발생하며, 삭제된 객체를 반환합니다. Todo 온라인 목록 예제에서는 데이터베이스에서 삭제될 때마다 목록에서 객체를 삭제해야 합니다. 삭제된 객체를 식별하기 위해 서버와 코드 간의 일치하는 ID를 찾아보세요.
다음은 deleteEvent에 대한 코드입니다:
1 subscription.on('delete', todo => {
2 this.todos.forEach(t => {
3 if (t.id === todo.id) {
4 console.log('On delete event');
5 this.todos.delete(t);
6 }
7 });
8 });완료되었습니다!
이 시점에서, 당신은 실시간 반응형 애플리케이션을 만들기 위해 라이브 쿼리를 사용하는 방법을 알고 있습니다. 또한 Back4App을 사용하여 올바른 라이브 쿼리 설정을 수행하는 방법을 알고 있으며, 이를 앱에 구현하기 시작할 수 있습니다.