기본 콘텐츠로 건너뛰기

MongoDB를 사용하지 않는 Meteor Publish(+MQTT)

오래간만에 Meteor 문서를 보던 중 흥미로운 내용을 발견.
publish쪽을 보다 보니 이런게 있더라.
http://docs.meteor.com/#/full/publish_added

Meteor.subscribe한 컬렉션에서 observe를 해보면 added/changed/removed 를 받을 수 있는데
사실은 이게 publish에서 "만들"수 있는 것.
최초 publish 에 들어왔을 때 this.ready()를 한번 해주고 들어올때마다 publish에서 add를 해주는 식이다.
외부 API를 쓴다거나 TCP/UDP 연결해서 얻은 결과물을 Collection 형태로 받을 때 매우 유용하다.

그래서 MQTT pub/sub 연동 예제를 구현해보았다.
http://meteorpad.com/pad/uGoYkgrkWxBbkfJhh/mqttMeteor
test.mosquitto.org 를 바라보고 MQTT 메시지를 수신하고 송신할 수 있다.
구현이 얼마없는 것에 비해 매우 잘 작동하지 않는가!?

MongoDB가 아닌 외부의 비동기 호출을 통해 받은 결과를 넘겨주는 것으로 실제 publish쪽 구현은 아주 간단한데

Meteor.publish("chats", function() {
  var pub = this;

  // async function
  client.on('message', function(topic, message) {
    pub.added("chats", Random.id(), {
      message:message.toString(),
      createdAt: +new Date()
    });
  });
  this.ready();
});

이게 전부다.
subscribe쪽에 collection이 준비되었음을 알리기 위해 ready() (http://docs.meteor.com/#/full/publish_ready)를 호출하고 새로 데이터가 들어오면 added(http://docs.meteor.com/#/full/publish_added)를 사용하는 것이 전부다.
added의 인자는 collection명, 중복구분용 id, 실제저장하고자 하는 객체 이렇게 세가지만 잘 넣어주면 된다.
본 예와는 상관없지만 변경과 삭제의 경우도 마찬가지로 changed, removed를 사용한다.

만일 외부 API를 받아오고자 한다면 http package(meteor add http로 추가)를 추가한 후 client.on 부분을 HTTP.get 같은 걸로 대신하면 된다.

이 블로그의 인기 게시물

vulcanJS - 10. Posts Update/Delete

마지막으로 수정과 삭제를 구현해보면 목록 조회(List), 상세 조회, 쓰기, 수정, 삭제까지 모든 필요한 요소를 아우를 수 있을 것이다.
감이 좋은 분들은 눈치 챘을지도 모르겠지만 사실 수정이란 건 UI면에서 볼때 이미 양식이 채워져있는 신규 쓰기와 별반 다르지 않다.

먼저 해야할 것은 역시나 Component를 만드는 일이다.
$ vulcan g component
? Package name spectrum-simplebb
? Component name PostsEditComponent
? Component type Class Component
? Register component Yes
   create packages/spectrum-simplebb/lib/components/PostsEditComponent.jsx
 conflict packages/spectrum-simplebb/lib/components/index.js
? Overwrite packages/spectrum-simplebb/lib/components/index.js? overwrite
    force packages/spectrum-simplebb/lib/components/index.js PostsEditComponent를 만들었다.
route도 만들자. /posts/edit/:id 이렇게 경로를 만들면 좋겠다. 그러고보니 이전 글에서 만든 상세보기도 /posts/view/:id 형식으로 만들껄 그랬다.
$ vulcan g route
? Package name spectrum-simplebb
? Route name postsEdit
? Route path /posts/edit/:_id
? Component name PostsEditComponent
? Layout name
 conflict packages/spectrum-simplebb/lib/modules/routes.js
? Overwrite packages/spectrum-simplebb/lib/modules/routes.js? overwrite
   …

VulcanJS 특징 번역

VulcanJS 특징http://docs.vulcanjs.org/features.html 의 내용입니다. GraphQL 스키마 생성 Vulcan은 SimpleSchema JSON 스키마를 기반으로 컬렉션의 GraphQL 스키마를 자동으로 생성합니다.
이렇게하면 두 가지 형식으로 스키마를 두 번 지정할 필요가 없습니다. 이 기능은 완전히 선택적이며 필요에 따라 수동으로 스키마를 지정할 수도 있습니다.

자동 생성 폼 Vulcan은 스키마를 사용하여 클라이언트 측 폼을 생성하고 적절한 Apollo Mutation을 통해 제출을 처리합니다.
예를 들어 하나의 동영상을 편집하기위한 양식을 표시하는 방법은 다음과 같습니다.
<VulcanForm
  collection={Movies}
  documentId={props.documentId}
  queryName="moviesListQuery"
  showRemove={true}
/> queryName 옵션은 작업이 완료되면 자동으로 업데이트되는 쿼리를 VulcanForm에 통지하는 한편, showRemove 옵션은 "Delete Movie' 버튼을 폼에 추가합니다.
VulcanForm 클라이언트 저장소에 아직 로드되지 않은 경우 수정할 문서를 읽어오기도 합니다.

쉬운 데이터 적재 Vulcan에는 Apollo 데이터를 쉽게 로드할 수 있도록 데이터 로딩 헬퍼 세트로 withList (복수 문서용)와 withDocument (단일 문서용)를 제공합니다.
예를 들어, withList를 사용하여 MoviesList 구성 요소에 모든 동영상을 포함하는 결과를 prop에 전달하는 방법은 다음과 같습니다.
const listOptions = {
  collection: Movies,
  queryName: 'moviesListQuery',
  fragment: fragment,
};
export default withList(listOptions)(MoviesList); …

Troubleshooting - Meteor package가 적용이 되지 않을 때

버전 1.5 기준 package.js에서 Package.onUse 에 새 패키지를 추가했는데 인식하지 못하는 경우가 있다.
Package.onUse((api) => {
  api.use([
    'vulcan:core',
    'vulcan:forms',
    'vulcan:accounts' /* <-- 추가함! */
  ]);
...
} 내부패키지건 원격패키지건 안되는 안된다. 이럴 때 meteor add 후 meteor remove 해도 되지만 더 간단한 방법이 있다. meteor update vulcan:accounts 이렇게 update 해주는 방법이 있다. .meteor/package 파일을 건들지 않아서 좋다. 그래도 역시 좋지 않다. Meteor 스럽지 않다. https://github.com/meteor/meteor/issues/7721 현재 1.5.2에서도 해결이 안되었군요. 해결되어 적용되면 다시 글 올리겠습니다.