Socket.io와 AngularJS 협업 보드

콘텐츠

• 01. 서버
• 02. 벌거 벗은 뼈
• 03. 의존성 선언
• 04. Socket.io 연결
• 05. 엔진 시동!
• 06. 진행하기 전에 몇 가지 솔직한 생각
• 07. 클라이언트
• 08. 벌거 벗은 뼈
• 09. 스티커 메모 만들기
• 10. 스티커 메모 표시
• 11. 스티커 메모 삭제
• 12. 스티커 메모 업데이트
• 13. 스티커 메모 이동
• 14. 보너스
• 15. 결론
• 마음에 드 셨나요? 읽어보세요!

• 필요한 지식 : 중급 JavaScript
• 요구 사항 : Node.js, NPM
• 프로젝트 시간 : 2 시간

AngularJS는 브라우저에서 풍부한 클라이언트 측 애플리케이션을 만드는 데 특히 적합하며 약간의 Socket.io를 믹스에 추가하면 정말 흥미로워집니다. 이 기사에서는 클라이언트 측 애플리케이션에 AngularJS를 사용하고 연결된 모든 클라이언트간에 상태를 공유하기 위해 Socket.io를 사용하는 실시간 협업 보드를 구축 할 것입니다.

시작하기 전에 약간의 관리에 대해 살펴 보겠습니다. 코드의 모든 부분을 다루지는 않을 것이기 때문에 HTML과 자바 스크립트에 대한 기본적인 이해가 있다고 가정하겠습니다. 예를 들어 새로운 정보가 없기 때문에 HTML 파일의 헤드에 포함 된 CSS 및 JavaScript 파일을 호출하지 않겠습니다.

또한 내 GitHub 계정에서 코드를 가져와 따라가는 것이 좋습니다. 나의 좋은 친구 인 Brian Ford는 또한 나의 독창적 인 아이디어를 기반으로 한 훌륭한 Socket.io 시드를 가지고 있습니다.

협업 게시판에서 우리가 원하는 네 가지 주요 기능은 메모 작성, 메모 읽기, 메모 업데이트, 메모 삭제, 재미로 보드에서 메모 이동 기능입니다. 예, 맞습니다. 표준 CRUD 기능에 초점을 맞추고 있습니다. 이러한 기본 기능에 초점을 맞추면 패턴이 나타날 수있는 충분한 코드를 다룰 수 있으므로 패턴을 다른 곳에 적용 할 수 있습니다.

01. 서버

Node.js 서버는 다른 모든 것을 구축 할 기반이 될 것이기 때문에 먼저 Node.js 서버부터 시작하겠습니다.

Express와 Socket.io로 Node.js 서버를 구축 할 것입니다. Express를 사용하는 이유는 Node.js 내에서 정적 자산 서버를 설정하기위한 멋진 메커니즘을 제공하기 때문입니다. Express에는 정말 멋진 기능이 많이 포함되어 있지만이 경우에는이를 사용하여 서버와 클라이언트 사이에서 애플리케이션을 깔끔하게 양분 할 것입니다.

(저는 Node.js와 NPM이 설치되어 있다는 가정하에 운영하고 있습니다. 설치하지 않은 경우 빠른 Google 검색을 통해 설치 방법을 확인할 수 있습니다.)

02. 벌거 벗은 뼈

따라서 서버의 뼈대를 구축하려면 시작하고 실행하기 위해 몇 가지 작업을 수행해야합니다.

// app.js

// A.1
var express = require ( 'express'),
앱 = express ();
서버 = require ( 'http'). createServer (app),
io = require (’socket.io’). listen (서버);

// A.2
app.configure (function () {
app.use (express.static (__ dirname +’/ public’));
});

// A.3
server.listen (1337);

A.1 애플리케이션에서 사용할 수 있도록 Node.js 모듈을 선언하고 인스턴스화합니다. Express를 선언하고 Express를 인스턴스화 한 다음 HTTP 서버를 만들고 Express 인스턴스를 여기로 보냅니다. 그리고 거기에서 Socket.io를 인스턴스화하고 서버 인스턴스를 주시하도록 지시합니다.

A.2 그런 다음 Express 앱에 공개 디렉토리를 사용하여 파일을 제공하도록 지시합니다.

A.3 서버를 시작하고 포트에서 수신하도록 지시합니다. 1337.

지금까지 그것은 매우 고통스럽고 빠르다. 코드가 10 줄도 채되지 않았고 이미 작동하는 Node.js 서버가 있다고 생각합니다. 앞으로!

03. 의존성 선언

// packages.json
{
"name": "각도 콜라 보 보드",
"description": "AngularJS Collaboration Board",
"버전": "0.0.1-1",
"private": 참,
"종속성": {
"익스프레스": "3.x",
"socket.io": "0.9.x"
}
}

NPM의 가장 멋진 기능 중 하나는 종속성을 packages.json 다음을 통해 자동으로 설치 npm 설치 명령 줄에서.

04. Socket.io 연결

우리는 이미 애플리케이션에서 원하는 핵심 기능을 정의 했으므로 각 작업에 대한 이벤트를 처리하기 위해 Socket.io 이벤트 리스너와 적절한 클로저를 설정해야합니다.

아래 코드에서 기본적으로 이벤트 리스너 및 콜백의 구성임을 알 수 있습니다. 첫 번째 이벤트는 연결 이 이벤트는 클로저에서 다른 이벤트를 연결하는 데 사용됩니다.

io.sockets.on ( 'connection', function (socket) {
socket.on ( 'createNote', function (data) {
socket.broadcast.emit ( 'onNoteCreated', 데이터);
});

socket.on ( 'updateNote', function (data) {
socket.broadcast.emit ( 'onNoteUpdated', 데이터);
});

socket.on ( 'deleteNote', function (data) {
socket.broadcast.emit ( 'onNoteDeleted', 데이터);
});

socket.on (’moveNote’, function (data) {
socket.broadcast.emit ( 'onNoteMoved', 데이터);
});
});

여기에서 청취자를 추가합니다. createNote, updateNote, deleteNote 과 moveNote. 그리고 콜백 함수에서 우리는 단순히 어떤 이벤트가 발생했는지 브로드 캐스팅하여 이벤트가 발생했음을 수신하는 모든 클라이언트에게 알릴 수 있습니다.

개별 이벤트 핸들러의 콜백 함수에 대해 지적 할 가치가있는 몇 가지 사항이 있습니다. 하나, 삽입 한 이벤트를 생성 한 클라이언트를 제외한 다른 모든 사람에게 이벤트를 보내려는 경우 방송 전에 방출하다 함수 호출. 둘째, 우리는 단순히 이벤트의 페이로드를 이해 당사자에게 전달하여 그들이 적합하다고 생각하는 방식으로 처리 할 수 ​​있도록합니다.

05. 엔진 시동!

이제 종속성을 정의하고 Express 및 Socket.io 기능을 사용하여 Node.js 애플리케이션을 설정 했으므로 Node.js 서버를 초기화하는 것은 매우 간단합니다.

먼저 다음과 같이 Node.js 종속성을 설치합니다.

npm 설치

그리고 다음과 같이 서버를 시작합니다.

노드 app.js

그리고! 브라우저에서이 주소로 이동합니다. Bam!

06. 진행하기 전에 몇 가지 솔직한 생각

저는 주로 프런트 엔드 개발자이며 처음에는 Node.js 서버를 내 애플리케이션에 연결하는 것이 약간 겁이났습니다. AngularJS 부분은 스냅 이었지만 서버 측 JavaScript? 공포 영화에서 소름 끼치는 음악을 대기열에 넣으십시오.

그러나 저는 단 몇 줄의 코드로 정적 웹 서버를 설정할 수 있고 몇 줄 더 Socket.io를 사용하여 브라우저 간의 모든 이벤트를 처리 할 수 ​​있다는 사실을 알게되었습니다. 그리고 그것은 여전히 ​​JavaScript였습니다! 적시성을 위해 몇 가지 기능 만 다루고 있지만 기사 끝까지 수영하기 쉽고 수영장의 깊은 끝이 그렇게 무섭지 않다는 것을 알게되기를 바랍니다.

07. 클라이언트

이제 서버와 함께 견고한 기반을 마련 했으므로 제가 가장 좋아하는 부분 인 클라이언트로 넘어가겠습니다! 드래그 가능한 부분에는 AngularJS, jQueryUI를, 스타일 기반에는 Twitter Bootstrap을 사용할 것입니다.

08. 벌거 벗은 뼈

개인적 선호도에 따라 새로운 AngularJS 응용 프로그램을 시작할 때 시작해야 할 최소한의 최소값을 빠르게 정의하고 가능한 한 빨리 반복을 시작하고 싶습니다.

모든 AngularJS 애플리케이션은 하나 이상의 컨트롤러가있는 부트 스트랩이 필요하므로 일반적으로 여기에서 항상 시작합니다.

애플리케이션을 자동으로 부트 스트랩하려면 다음을 추가하기 만하면됩니다. ng-app 응용 프로그램을 사용할 HTML 노드에 추가합니다. 대부분의 경우 HTML 태그에 추가하는 것은 완벽하게 허용됩니다. 또한 속성을 추가했습니다. ng-app 내가 사용하고 싶다고 앱 잠시 후에 정의하겠습니다.

// public / index.html
html ng-app = "app">

적어도 하나의 컨트롤러가 필요하다는 것을 알고 있으므로 ng 컨트롤러 속성을 할당합니다. MainCtrl.

body ng-controller = "MainCtrl"> / body>

이제 우리는 앱 이름이 지정된 컨트롤러 MainCtrl. 지금 바로 만들어 보겠습니다.

모듈을 만드는 것은 매우 간단합니다. 호출하여 정의합니다. angular.module 이름을 부여합니다. 나중에 참조 할 수 있도록 빈 배열의 두 번째 매개 변수는 애플리케이션에서 사용할 하위 모듈을 삽입 할 수있는 곳입니다. 이 자습서의 범위를 벗어나지 만 응용 프로그램의 복잡성과 요구 사항이 증가하기 시작할 때 유용합니다.

// public / js / collab.js
var app = angular.module ( 'app', []);

몇 개의 빈 자리 표시자를 앱 로 시작하는 모듈 MainCtrl 이하.우리는이 모든 것을 나중에 채울 것이지만 처음부터 기본 구조를 설명하고 싶었습니다.

app.controller ( 'MainCtrl', function ($ scope) {});

또한 Socket.io 기능을 소켓 객체를 캡슐화하고 전역 네임 스페이스에 떠 다니지 않도록 할 수 있습니다.

app.factory (’socket’, function ($ rootScope) {});

그리고 그 동안에 우리는 다음과 같은 지시문을 선언 할 것입니다. 끈적 끈적한 스티커 메모 기능을 캡슐화하는 데 사용할 것입니다.

app.directive (’stickyNote’, function (socket) {});

지금까지 우리가 한 일을 검토해 보겠습니다. 우리는 ng-app HTML에서 애플리케이션 컨트롤러를 선언했습니다. 또한 애플리케이션 모듈을 정의하고 MainCtrl 컨트롤러, 소켓 서비스 및 끈적 끈적한 지령.

09. 스티커 메모 만들기

이제 AngularJS 애플리케이션의 골격이 준비되었으므로 생성 기능을 구축하기 시작합니다.

app.controller ( 'MainCtrl', function ($ scope, socket) {// B.1
$ scope.notes = []; // B.2

// 수신
socket.on ( 'onNoteCreated', function (data) {// B.3
$ scope.notes.push (data);
});

// 발신
$ scope.createNote = function () {// B.4
var note = {
id : new Date (). getTime (),
제목 :’New Note’,
본문 :’보류 중’
};

$ scope.notes.push (note);
socket.emit ( 'createNote', note);
};

B.1 AngularJS에는 의존성 주입 기능이 내장되어 있으므로 $ 범위 개체와 소켓 서비스. 그만큼 $ 범위 객체는 ViewModel 역할을하며 기본적으로 양방향 데이터 바인딩을 활성화하기 위해 일부 이벤트가 베이킹 된 JavaScript 객체입니다.

B.2 뷰를 바인딩하는 데 사용할 배열을 선언합니다.

B.3 우리는 onNoteCreated 이벤트 소켓 서비스하고 이벤트 페이로드를 $ scope.notes 정렬.

B.4 우리는 createNote 기본값을 만드는 방법 노트 개체로 밀어 넣습니다. $ scope.notes 정렬. 또한 소켓 방출하는 서비스 createNote 이벤트 및 전달 새 메모 함께 반대합니다.

이제 메모를 생성하는 방법이 생겼으니 어떻게 호출할까요? 좋은 질문입니다! HTML 파일에서 내장 AngularJS 지시문을 추가합니다. ng- 클릭 버튼에 추가 한 다음 createNote 속성 값으로 메서드 호출.

button id = "createButton"ng-click = "createNote ()"> 노트 / 버튼 생성>

지금까지 우리가 한 일을 간단히 검토 할 시간입니다. 어레이를 추가했습니다. $ 범위 의 개체 MainCtrl 응용 프로그램에 대한 모든 메모가 포함됩니다. 우리는 또한 createNote 에 방법 $ 범위 개체를 사용하여 새 로컬 메모를 만든 다음 해당 메모를 소켓 서비스. 또한 이벤트 리스너를 소켓 다른 고객이 메모를 생성 한시기를 알 수 있도록 서비스를 제공하여 컬렉션에 추가 할 수 있습니다.

10. 스티커 메모 표시

이제 노트 개체를 만들고 브라우저간에 공유 할 수 있지만 실제로 어떻게 표시합니까? 이것이 지시문이 들어오는 곳입니다.

지시문과 그 복잡성은 방대한 주제이지만 짧은 버전은 사용자 정의 기능으로 요소와 속성을 확장하는 방법을 제공한다는 것입니다. 지시어는 AngularJS에 대해 제가 가장 좋아하는 부분입니다. 기본적으로 HTML로 애플리케이션 주위에 전체 DSL (Domain Specific Language)을 만들 수 있기 때문입니다.

공동 작업 게시판을위한 스티커 메모를 만들 예정이므로 당연히 끈적 끈적한 지령. 지시문은 선언하려는 모듈에서 지시문 메서드를 호출하고 지시문 정의 개체를 반환하는 이름과 함수를 전달하여 정의됩니다. 지시어 정의 객체에는 정의 할 수있는 많은 속성이 있지만 여기서는 몇 가지만 사용하겠습니다.

AngularJS 문서를 확인하여 디렉티브 정의 객체에서 정의 할 수있는 전체 속성 목록을 확인하는 것이 좋습니다.

app.directive (’stickyNote’, function (socket) {
var 링커 = function (scope, element, attrs) {};

var controller = function ($ scope) {};

return {
제한 :’A’, // C.1
링크 : 링커, // C.2
컨트롤러 : 컨트롤러, // C.3
범위 : {// C.4
참고 :’=’,
ondelete :’&’
}
};
});

C.1 지시문을 특정 유형의 HTML 요소로 제한 할 수 있습니다. 가장 일반적인 두 가지는 요소 또는 속성입니다. 이자형 과 ㅏ 각기. CSS 클래스 나 주석으로 제한 할 수도 있지만 일반적이지 않습니다.

C.2 링크 함수는 모든 DOM 조작 코드를 넣는 곳입니다. 내가 찾은 몇 가지 예외가 있지만 이것은 항상 사실입니다 (최소 99 %). 이것이 AngularJS의 기본 원칙이며 제가 강조한 이유입니다.

C.3 컨트롤러 기능은 애플리케이션에 대해 정의한 메인 컨트롤러처럼 작동하지만 $ 범위 전달하는 객체는 지시문이있는 DOM 요소에 따라 다릅니다.

C.4 AngularJS에는 격리 된 범위의 개념이있어 지시문의 범위가 외부 세계와 통신하는 방법을 명시 적으로 정의 할 수 있습니다. 범위를 선언하지 않았다면 지시문은 부모-자식 관계로 부모 범위에서 암시 적으로 상속되었을 것입니다. 많은 경우 이것이 최적이 아닙니다. 범위를 분리함으로써 외부 세계가 귀하의 지침 상태에 부주의하고 악영향을 미칠 수있는 가능성을 줄입니다.

양방향 데이터 바인딩을 선언했습니다. 노트 와 더불어 = 기호 및 표현에 바인딩 ondelete 와 더불어 & 상징. 격리 된 범위에 대한 전체 설명은 프레임 워크에서 더 복잡한 주제 중 하나이므로 AngularJS 문서를 읽어보십시오.

그래서 실제로 DOM에 스티커 메모를 추가해 보겠습니다.

다른 좋은 프레임 워크와 마찬가지로 AngularJS는 매우 훌륭한 기능을 즉시 제공합니다. 가장 편리한 기능 중 하나는 반복. 이 AngularJS 지시어를 사용하면 객체 배열을 전달할 수 있으며 배열에 항목이있는만큼 태그가있는 태그를 복제합니다. 아래의 경우, 우리는 메모 배열 및 복제 div 길이에 대한 요소 및 하위 메모 정렬.

div sticky-note ng-repeat = "note in notes"note = "note"ondelete = "deleteNote (id)">
버튼 유형 = "버튼"ng-click = "deleteNote (note.id)"> × / 버튼>
input ng-model = "note.title"ng-change = "updateNote (note)"type = "text">
textarea ng-model = "note.body"ng-change = "updateNote (note)"
> {{note.body}} / textarea>
/ div>

의 아름다움 반복 전달하는 모든 배열에 바인딩되며 배열에 항목을 추가하면 DOM 요소가 자동으로 업데이트됩니다. 한 단계 더 나아가 표준 DOM 요소뿐만 아니라 다른 사용자 지정 지시문도 반복 할 수 있습니다. 그게 당신이 보는 이유입니다 스티커 메모 요소의 속성으로.

명확히해야 할 두 가지 다른 사용자 지정 코드가 있습니다. 우리는 범위를 스티커 메모 두 속성에 대한 지시문. 첫 번째는 바인딩 정의 된 격리 된 범위입니다. 노트 특성. 즉, 부모 범위에서 노트 개체가 변경 될 때마다 지시문의 해당 노트 개체가 자동으로 업데이트되며 그 반대의 경우도 마찬가지입니다. 정의 된 다른 격리 된 범위는 ondelete 속성. 이것이 의미하는 바는 ondelete 지시문에서 호출되면 모든 표현식이 ondelete 지시문을 인스턴스화하는 DOM 요소의 속성.

지시문이 인스턴스화되면 DOM에 추가되고 링크 함수가 호출됩니다. 이것은 요소에 기본 DOM 속성을 설정할 수있는 완벽한 기회입니다. 우리가 전달하는 요소 매개 변수는 실제로 jQuery 객체이므로 jQuery 작업을 수행 할 수 있습니다.

(AngularJS에는 실제로 jQuery의 하위 집합이 내장되어 있지만 이미 전체 버전의 jQuery를 포함했다면 AngularJS는이를 따릅니다.)

app.directive (’stickyNote’, function (socket) {
var 링커 = function (scope, element, attrs) {
// 멋지게 만들기위한 DOM 시작
element.css (’left’,’10px’);
element.css (’top’,’50px’);
element.hide (). fadeIn ();
};
});

위의 코드에서 우리는 단순히 스테이지에 스티커 메모를 배치하고 페이드 인합니다.

11. 스티커 메모 삭제

이제 스티커 메모를 추가하고 표시 할 수 있으므로 스티커 메모를 삭제할 차례입니다. 스티커 메모의 생성 및 삭제는 메모가 바인딩 된 배열에서 항목을 추가하고 삭제하는 문제입니다. 이는 해당 배열을 유지하는 부모 범위의 책임이며, 이것이 우리가 지시문 내에서 삭제 요청을 시작했지만 부모 범위가 실제 무거운 작업을 수행하도록하는 이유입니다.

이것이 우리가 지시문에서 표현식 정의 격리 된 범위를 만드는 모든 문제를 겪은 이유입니다. 지시문은 내부적으로 삭제 이벤트를 수신하고 처리를 위해 부모에게 전달할 수 있습니다.

지시문 내부의 HTML을 확인하십시오.

버튼 유형 = "버튼"ng-click = "deleteNote (note.id)"> × / 버튼>

제가 다음으로 말할 것은 먼 길처럼 보일지 모르지만 우리는 같은 편이라는 것을 기억하십시오. 내가 자세히 설명하면 이해가 될 것입니다. 스티커 메모의 오른쪽 상단 모서리에있는 버튼을 클릭하면 deleteNote 지시문의 컨트롤러에 전달하고 note.id 값. 그런 다음 컨트롤러는 ondelete, 그런 다음 우리가 연결 한 표현식을 실행합니다. 여태까지는 그런대로 잘됐다? 컨트롤러에서 로컬 메서드를 호출 한 다음 격리 된 범위에 정의 된 표현식을 호출하여 전달합니다. 부모에게 호출되는 표현식은 우연히 호출됩니다. deleteNote 게다가.

app.directive (’stickyNote’, function (socket) {
var controller = function ($ scope) {
$ scope.deleteNote = function (id) {
$ scope.ondelete ({
id : id
});
};
};

return {
제한 :’A’,
링크 : 링커,
컨트롤러 : 컨트롤러,
범위 : {
참고 :’=’,
ondelete :’&’
}
};
});

(표현식으로 정의 된 격리 된 범위를 사용하는 경우 매개 변수가 개체 맵으로 전송됩니다.)

부모 범위에서 deleteNote 호출되고 angular.forEach 노트 배열을 반복하는 유틸리티 함수. 기능이 지역 비즈니스를 처리하면 전 세계가 그에 따라 대응할 수 있도록 이벤트를 내 보냅니다.

app.controller ( 'MainCtrl', function ($ scope, socket) {
$ scope.notes = [];

// 수신
socket.on ( 'onNoteDeleted', function (data) {
$ scope.deleteNote (data.id);
});

// 발신
$ scope.deleteNote = function (id) {
var oldNotes = $ scope.notes,
newNotes = [];

angular.forEach (oldNotes, function (note) {
if (note.id! == id) newNotes.push (note);
});

$ scope.notes = newNotes;
socket.emit ( 'deleteNote', {id : id});
};
});

12. 스티커 메모 업데이트

우리는 환상적인 진전을 이루고 있습니다! 지금 쯤이면 이번 회오리 바람 투어에서 몇 가지 패턴이 나타나기를 바랍니다. 목록의 다음 항목은 업데이트 기능입니다.

실제 DOM 요소에서 시작하여 서버에 이르기까지 계속해서 클라이언트로 돌아갈 것입니다. 먼저 스티커 메모의 제목이나 본문이 언제 변경되는지 알아야합니다. AngularJS는 양식 요소를 데이터 모델의 일부로 취급하므로 양방향 데이터 바인딩을 스냅으로 연결할 수 있습니다. 이렇게하려면 ng 모델 지시문을 입력하고 바인딩하려는 속성을 입력하십시오. 이 경우 우리는 note.title 과 note.body 각기.

이러한 속성 중 하나가 변경되면 해당 정보를 캡처하여 전달할 수 있습니다. 우리는 ng-change 지시문을 사용하여 updateNote 노트 객체 자체를 전달합니다. AngularJS는 값이 무엇인지 감지하기 위해 매우 영리한 더러운 검사를 수행합니다. ng 모델 변경된 다음에있는 표현식을 실행합니다. ng-change.

input ng-model = "note.title"ng-change = "updateNote (note)"type = "text">
textarea ng-model = "note.body"ng-change = "updateNote (note)"> {{note.body}} / textarea>

사용의 장점 ng-change 로컬 변환이 이미 발생했으며 메시지 전달 만 담당한다는 것입니다. 컨트롤러에서 updateNote 호출되고 거기에서 우리는 updateNote 서버가 다른 클라이언트에게 브로드 캐스트하는 이벤트입니다.

app.directive (’stickyNote’, function (socket) {
var controller = function ($ scope) {
$ scope.updateNote = function (note) {
socket.emit ( 'updateNote', note);
};
};
});

그리고 디렉티브 컨트롤러에서 우리는 onNoteUpdated 로컬 버전을 업데이트 할 수 있도록 다른 클라이언트의 노트가 업데이트되었는지 알 수있는 이벤트입니다.

var controller = function ($ scope) {
// 수신
socket.on ( 'onNoteUpdated', function (data) {
// 동일한 메모 인 경우 업데이트
if (data.id == $ scope.note.id) {

$ scope.note.title = data.title;
$ scope.note.body = data.body;
}
});
};

13. 스티커 메모 이동

이 시점에서 우리는 기본적으로 CRUD 아동용 수영장을 한 바퀴 돌았으며 인생은 좋습니다! 친구에게 깊은 인상을주기 위해 팔러 트릭을 위해 화면에서 메모를 이동하고 실시간으로 좌표를 업데이트하는 기능을 추가 할 예정입니다. 당황하지 마십시오. 코드 몇 줄만 더 있으면됩니다. 이 모든 노력이 성과를 거둘 것입니다. 약속 해요!

우리는 특별한 게스트 인 jQueryUI를 파티에 초대했고, 드래그 가능한 모든 것을했습니다. 메모를 로컬로 드래그하는 기능을 추가하면 코드 한 줄만 필요합니다. 추가하면 element.draggable (); 링커 기능을 사용하면 이제 노트를 드래그 할 수 있으므로 Survivor의 'Eye of the Tiger'를들을 수 있습니다.

드래그가 중지 된시기를 알고 통과 할 새 좌표를 캡처하고 싶습니다. jQueryUI는 매우 똑똑한 사람들이 만들었으므로 드래그가 중지되면 중지 이벤트에 대한 콜백 함수를 정의하기 만하면됩니다. 우리는 잡아 note.id 범위 개체와 왼쪽 및 상단 CSS 값에서 UI 목적. 그 지식으로 우리는 계속해서 해왔 던 일을합니다 : 방출!

app.directive (’stickyNote’, function (socket) {
var 링커 = function (scope, element, attrs) {
element.draggable ({
중지 : function (event, ui) {
socket.emit (’moveNote’, {
id : scope.note.id,
x : ui.position.left,
y : ui.position.top
});
}
});

socket.on ( 'onNoteMoved', function (data) {
// 동일한 메모 인 경우 업데이트
if (data.id == scope.note.id) {
element.animate ({
왼쪽 : data.x,
상단 : data.y
});
}
});
};
});

이 시점에서 우리가 소켓 서비스에서 이동 관련 이벤트를 수신하고 있다는 것은 놀라운 일이 아닙니다. 이 경우에는 onNoteMoved 이벤트와 노트가 일치하면 왼쪽 및 상단 CSS 속성을 업데이트합니다. Bam! 끝난!

14. 보너스

10 분 이내에 달성 할 수 있다는 확신이 없다면 포함하지 않을 보너스 섹션입니다. 우리는 라이브 서버에 배포 할 예정입니다 (이 작업이 얼마나 쉬운 지 여전히 놀랍습니다).

먼저 무료 Nodejitsu 평가판에 등록해야합니다. 평가판은 30 일 동안 무료로 제공되며 발을 적시는 데 적합합니다.

계정을 만든 후에는 jitsu 패키지를 설치해야합니다. 명령 줄에서 다음을 통해 수행 할 수 있습니다. $ npm 설치 jitsu -g.

그런 다음 명령 줄에서 다음을 통해 로그인해야합니다. $ jitsu 로그인 자격 증명을 입력하십시오.

앱에 직접 들어가 있는지 확인하고 $ jitsu 배포 질문을 단계별로 진행합니다. 나는 일반적으로 가능한 한 기본값으로 남겨두기 때문에 애플리케이션에 이름을 지정하지만 하위 도메인 등은 지정하지 않습니다.

그리고 사랑하는 친구 여러분, 그게 전부입니다! 배포가 완료되고 준비가 완료되면 서버의 출력에서 ​​애플리케이션에 대한 URL을 얻을 수 있습니다.

15. 결론

이 기사에서 AngularJS를 많이 다루었으며 그 과정에서 많은 즐거움을 누리 셨기를 바랍니다. 약 200 줄의 코드로 AngularJS와 Socket.io로 수행 할 수있는 작업이 정말 훌륭하다고 생각합니다.

요점에 초점을 맞추기 위해 다루지 않은 몇 가지 사항이 있었지만 소스를 아래로 내리고 응용 프로그램을 사용하는 것이 좋습니다. 우리는 강력한 기반을 구축했지만 여전히 추가 할 수있는 많은 기능이 있습니다. 해킹하세요!

Lukas Ruebbelke는 기술 애호가이며 Manning Publications의 AngularJS in Action을 공동 집필하고 있습니다. 그가 가장 좋아하는 일은 사람들이 자신만큼이나 신기술에 흥미를 갖게하는 것입니다. 그는 Phoenix Web Application User Group을 운영하고 있으며 범죄에 관련된 동료 파트너와 함께 여러 해커 톤을 주최했습니다.

마음에 드 셨나요? 읽어보세요!

• 앱을 만드는 방법
• 우리가 가장 좋아하는 웹 글꼴-비용이 들지 않습니다.
• 증강 현실의 다음 단계 알아보기
• 무료 텍스처 다운로드 : 고해상도 및 지금 바로 사용 가능