Platform
실시간 데이터베이스
11 분
parse server 라이브 쿼리 사용 방법 소개 라이브 쿼리는 실시간 반응형 애플리케이션 에서 사용되도록 설계되었으며, 전통적인 쿼리 패러다임을 사용하는 것만으로는 응답 시간 증가 및 높은 네트워크와 서버 사용량과 같은 여러 문제를 일으킬 수 있습니다 라이브 쿼리는 데이터베이스에서 오는 최신 데이터로 페이지를 지속적으로 업데이트해야 하는 경우에 사용해야 하며, 이는 종종 (하지만 이에 국한되지 않음) 온라인 게임, 메시징 클라이언트 및 공유 할 일 목록에서 발생합니다 이 섹션에서는 back4app을 통해 javascript 환경에서 back4app의 라이브 쿼리를 사용하는 방법을 설명합니다 이 튜토리얼에서는 예제로 todo 온라인 목록 을 라이브 쿼리를 사용하여 구축할 것입니다 아래와 같이 전체 todo online list 프로젝트를 보려면 실시간 쿼리 todo list 프로젝트 parse sdk에 대한 자세한 내용은 javascript sdk api 참조 및 parse 오픈 소스 문서(javascript sdk용) 필수 조건 이 튜토리얼을 완료하려면 다음이 필요합니다 back4app에 연결된 기본 javascript 앱 또는 실시간 쿼리 todo list 프로젝트 참고 우리의 javascript 설치 parse sdk 튜토리얼에서 만든 앱을 사용하거나 실시간 쿼리 todo list 프로젝트 충분한 javascript parse 쿼리에 대한 지식 (필수는 아님) 1 실시간 쿼리 활성화 코딩을 시작하기 전에, 라이브 쿼리를 활성화하기 위해 데이터베이스에 클래스를 만들어야 합니다 그렇게 하려면, back4app 웹사이트 ,에서 앱을 찾아 대시보드 대시보드 > 클래스 만들기 클래스 만들기 , 아래와 같이 클릭하세요 참고 여기서 이 클래스는 메시지 메시지 라고 불릴 것입니다 이제 라이브 쿼리 기능을 활성화하려면, back4app 웹사이트 ,에서 계정에 로그인하고, 앱을 찾아 앱 설정 앱 설정 > 서버 설정 서버 설정 “서버 url 및 라이브 쿼리” 블록을 찾아 설정 설정 “서버 url 및 라이브 쿼리” 블록은 다음과 같습니다 그런 다음 아래와 같은 페이지에 도착하게 됩니다 이 페이지에서는 back4app 서브도메인 활성화 back4app 서브도메인 활성화 옵션, 라이브 쿼리 활성화 라이브 쿼리 활성화 옵션 및 라이브 쿼리를 활성화할 모든 클래스를 선택해야 합니다 아래와 같이 라이브 쿼리를 사용하려면 서브도메인을 활성화해야 합니다 이는 라이브 서버로 작동할 것입니다 2 쿼리 구독하기 라이브 쿼리를 사용하려면 먼저 livequeryclient livequeryclient 를 생성해야 합니다 이 클라이언트는 웹소켓 연결을 관리합니다 이를 위해 애플리케이션 id, 검증을 위한 javascript 키, 그리고 이전 단계에서 설정한 도메인인 서버 url을 제공해야 합니다 다음은 livequeryclient livequeryclient livequeryclient js 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 todo 객체에 대한 모든 변경 사항을 구독할 것입니다 쿼리에 대한 자세한 내용은 parse 공식 쿼리 문서 를 참조하세요 다음은 querysubscribe querysubscribe querysubscribe js 1 var query = new parse query('todo'); 2 query ascending('createdat') limit(5); 3 var subscription = client subscribe(query); 3 이벤트 수신 설정이 완료되면, 이벤트가 발생할 때 앱이 수행할 작업을 코딩해야 합니다 이 부분에서는 이러한 이벤트를 실제 예제로 수신하는 방법을 보여줄 것입니다 이 todo 온라인 목록 예제는 사용된 보일러플레이트 코드가 거의 없기 때문에 프로젝트의 지침으로 활용될 것입니다 여기서 사용할 두 가지 주요 이벤트는 create create 이벤트와 delete delete 이벤트입니다 이벤트의 전체 목록은 여기 에서 확인할 수 있습니다 3 1 생성 이벤트 이 createevent createevent 는 parseobject parseobject 가 생성되고 당신이 삽입한 쿼리 제약 조건을 충족할 때마다 발생합니다 이 이벤트는 생성된 객체를 반환합니다 todo 온라인 목록 예제에서 활동 배열은 this todos this todos 변수에 저장되며, 생성 이벤트가 발생할 때 데이터베이스의 새로운 객체를 이 배열에 추가할 것입니다 다음은 createevent createevent 에 대한 코드입니다 createevent js 1 subscription on('create', todo => { 2 this todos add(todo); 3 console log('on create event'); 4 }); 3 2 삭제 이벤트 기존의 parseobject parseobject 가 데이터베이스에서 삭제될 때마다 이 이벤트가 발생하며, 삭제된 객체를 반환합니다 todo 온라인 목록 예제에서는 데이터베이스에서 삭제될 때마다 목록에서 객체를 삭제해야 합니다 삭제된 객체를 식별하기 위해 서버와 코드 간의 일치하는 id를 찾아보세요 다음은 deleteevent deleteevent 에 대한 코드입니다 deleteevent js 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을 사용하여 올바른 라이브 쿼리 설정을 수행하는 방법을 알고 있으며, 이를 앱에 구현하기 시작할 수 있습니다