기본 콘텐츠로 건너뛰기

socketcluster tutorial - 2. 시작하기 (Getting Started)

시작하기


SocketCluster를 시작하려면 Node.js가 설치되어 있어야 합니다. 이 지침에 따라 NodeJS를 설치할 수 있습니다. 또는 Baasil.io로 Docker 컨테이너에서 SocketCluster를 실행할 수 있습니다. - Kubernetes 환경에 앱을 배포하려는 경우 이상적입니다 - 여기를 참조하십시오.

Node가 설치되면 SocketCluster를 설치할 수 있습니다. SocketCluster를 설치하는 두 가지 방법이 있습니다. 가장 간단한 방법 프레임워크로 설치할 수 있고 보다 구체적인 요구 사항이있는 경우 클라이언트와 서버를 따로 설치할 수도 있습니다. 두 설정은 거의 동일한 API를 공유하므로 일반적으로 전환할 때 코드를 변경할 필요가 없습니다. 사실, socketcluster-server는 socketcluster (프레임 워크)의 직접적으로 종속됩니다.

SocketCluster를 독립 실행형 서버 및 클라이언트로 설치하려면 다음을 수행하십시오. 여기(서버)여기(클라이언트)의 지침을 따르십시오.

프레임워크로 설치하려면 (권장) :
npm install -g socketcluster
일단 설치되면, socketcluster create 명령은 새로운 SocketCluster 를 설치합니다. 예를 들어, socketcluster create myApp는 현재 작업 디렉토리에 myApp라는 디렉토리를 작성합니다.
socketcluster create myApp
번들된 패키지(webpack같은)에서 사용하려면
npm install --save socketcluster
npm install --save socketcluster-client
하고 서버에서
var SocketCluster = require('socketcluster').SocketCluster
그리고 클라이언트에서
var SocketCluster = require('socketcluster-client')
를 추가합니다.

SocketCluster 서버 프로그래밍


이 작업을 마치면 myApp으로 이동하여 node server.js를 사용하여 즉시 서버를 실행할 수 있습니다
node server.js
브라우저에서 http://localhost:8000/ 으로 이동하여 서버에 연결할 수 있습니다.

SocketCluster의 실시간 기능을 테스트하려면 브라우저의 개발자 콘솔을 열고 다음과 같이 입력하십시오:
// Client side
var socket = socketCluster.connect();
socket.emit('sampleClientEvent', {message: 'This is an object with a message property'});
'Sample channel message: 1' 메시지가 다시 나타납니다. - 서버는 sampleClientEvent 이벤트를 수신 한 다음 샘플 이벤트를 청취중인 모든 클라이언트에 게시합니다.

emit 및 publish 명령의 두 번째 인수로 JSON과 호환되는 거의 모든 것을 전달할 수 있습니다.

클라이언트 측의 socketCluster.connect () 메소드에 object형인 옵션을 사용할 수 있습니다. 자세한 내용은 socketCluster를 참조하십시오. 주요 SocketCluster JavaScript 클라이언트에 대한 자세한 내용을 보려면 여기를 클릭하십시오.

서버 측에서는 server.js 내의 코드를 편집하여 SocketCluster를 구성 할 수 있습니다. SocketCluster는 30가지 이상의 옵션을 제공하며 사용자의 특정 요구에 맞게 변경할 수 있습니다 (대부분 옵션은 선택 사항 입니다).

다음은 server.js 파일의 예제입니다 (주석 포함):
var SocketCluster = require('socketcluster').SocketCluster;
var socketCluster = new SocketCluster({
  workers: 1, // worker processes의 갯수
  brokers: 1, // broker processes의 갯수
  port: 8000, // 서버가 여는 포트 번호
  appName: 'myapp', // 고유한 앱 이름
  // 주요 성능 향상을 위해 wsEngine을 'ws'를 'uws'로 전환하세요
  wsEngine: 'ws',
  /* 워커/서버를 구성하는 JS 파일
   * 여기서 대부분의 백엔드 코드를 작성합니다.
   */
  workerController: __dirname + '/worker.js',
  /* 각각의 브로커들을 구성하는 JS 파일
   * 여러 시스템에서 수평으로 확장하는 데 유용합니다 (선택 사항).
   */
  brokerController: __dirname + '/broker.js',
  // 워커가 죽을 경우 재시작할지 여부 (기본값은 true)
  rebootWorkerOnCrash: true
});
SocketCluster는 여러 개의 프로세스 클러스터를 실행합니다. 각 프로세스에는 각 프로세스의 동작을 구성 할 수있는 자체 '컨트롤러'파일이 있습니다. 로드 밸런서용 컨트롤러, 워커용 컨트롤러 및 브로커 프로세스 용 컨트롤러가 있습니다. 가장 중요한 것은 (대부분의 응용 프로그램을 작성하는) workerController입니다.

그리고 그 다음


workerController (worker.js)에 있는 기존 코드를 살펴보고 만져보세요.

코드를 변경할 때 SocketCluster를 다시 시작하십시오. UNIX와 유사한 환경에서 실행중이라면 SIGUSR2 신호를 마스터 PID 순서로 보내어 새로운 소스 코드로 오직 워커들만 재시작할 수도 있습니다.

Nick Kotenberg의 비디오

이 블로그의 인기 게시물

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 - 1. vulcan-cli 설치하고 프로젝트 만들기

vulcanJS를 학습하면서 알아낸 점을 기록하는 의미의 튜토리얼을 써본다.

Telescope도 그랬지만 forum 형태의 예제에서 embedly를 사용하는 URL 요소가 글에 들어가는 점이나 일반인들에게는 익숙하지 않은 Markdown 문법 등을 걷어내고 최소형태에서부터 접근해야할 필요성을 느껴서 단순 post만 목록 열람하고 읽고 쓰는 구현을 해보기로 했다.

먼저, vulcanJS를 github를 통해 clone 하고 meteor create --package를 통해 만들수도 있지만 Vulcan-Cli(https://github.com/VulcanJS/vulcanjs-cli)가 있어서 이걸 일단 사용해보기로 한다.

대충 내용을 읽어보니 Rails 생각이 나기도 하고 재밌어 보인다.
npm install -g vulcanjs-cli 혹은 meteor 에서만 한다면
meteor npm install -g vulcanjs-cli 이런 식으로 설치하고 쓰면 된다.
npm 에 global로 설치한 첫번째 경우 기준으로 진행해보겠다.
설치하고 난 뒤 vulcan 을 실행해보면
$ vulcan
vulcan usage:
Synopsis
  vulcan <action> <object> <...>
    <action>   Operation to perform
    <object>   Asset type (contextual to action)
    <...>      Parameters. If not provided, interactively entered
Project initialisation
  vulcan create <appName>
  vulcan init <appName>
Assets creation
  vulcan (generate|g) package <packageName>
  vulcan (generate|g) model <packageName>…

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에서도 해결이 안되었군요. 해결되어 적용되면 다시 글 올리겠습니다.