backbone.js 및 socket.io가있는 웹 앱을 구축하십시오

키 테이크 아웃

<.> backbone.js는 키-값 바인딩 및 사용자 정의 이벤트가있는 모델, 열거 가능한 기능이있는 컬렉션, 이벤트 처리가있는 뷰, 편안한 JSON 인터페이스를 통해 기존 API에 대한 연결을 제공하여 웹 응용 프로그램에 구조를 제공합니다.

socket.io는 웹 클라이언트와 서버 간의 양방향 통신을 허용하여 실시간 웹 애플리케이션을 가능하게하는 JavaScript 라이브러리입니다. 사용자의 브라우저와 서버간에 대화식 통신 세션을 만드는 데 사용됩니다. PubSub 패턴은 커플 링을 피하고 코드를보다 유연하고 확장 가능하며 유지 관리 할 수 ​​있도록하는 비동기 메시징 패러다임입니다. Backbone.js는이 이벤트 시스템을 간단하게 구현합니다 제공된 예제에서 Backbone.js 및 Socket.io는 사용자간에 데이터를 실시간으로 동기화하는 그래프 시각화 도구를 작성하는 데 사용됩니다. 코드는 다른 라이브러리 또는 데이터베이스로 쉽게 사용자 정의하고 마이그레이션 할 수 있도록 구성되어 있습니다. 예제를 로컬로 실행하면 Github 저장소 복제, 종속성 설치, 응용 프로그램 시작 및 http : // localhost : 5000으로 향하는 것이 포함됩니다.

이 기사는 Thomas Greco와 Marc Towler가 검토 한 동료였습니다. Sitepoint 콘텐츠를 최대한 활용 한 Sitepoint의 동료 검토 자 덕분에! 많은 사람들이 알고 있듯이 Backbone.js는 잘 알려진 MV* 프레임 워크입니다. 그것은 github에서 호스팅되며 IT

는 키-값 바인딩 및 사용자 정의 이벤트가있는 모델을 제공함으로써 웹 애플리케이션에 구조를 제공하고, 열거 가능한 기능의 풍부한 API, 선언적 이벤트 처리와 함께 뷰를 갖춘 컬렉션 및 기존 API에 연결합니다. 편안한 JSON 인터페이스.
이 기사에서는 커플 링을 피하기 위해 비동기 메시징 패러다임을 구현하기 위해 라는 백본의 내장 기능을 사용합니다. 아이디어는 서로에 크게 의존하는 코드 그룹을 분리하는 것입니다.
• 내가 보여줄 예제는 데이터가 아름답게 동기화 된 크로스 사용자 인 그래프 시각화 도구입니다. WebSockets를 사용하면 사용자의 브라우저와 서버간에 대화식 통신 세션을 열 수 있습니다. 목표는 예를 최대한 단순하게 유지하는 것입니다. 여기서 배운 개념은 커플 링을 줄이는 데 많은 도움이 될 것입니다. 또한 이는 확장 가능하고 유연하며 유지 관리 가능한 코드를 구축하는 데 매우 유용한 접근 방식입니다. 실험이 끝나면 다음과 같은 결과를 얻을 수 있습니다.
<..> backbone.js <.> backbone.js는 모델 ,

views ,

컨트롤러

, > 컬렉션을 제공하여 단일 페이지 응용 프로그램을 구축하는 프레임 워크입니다. 커스텀 이벤트 . 그 구조는 사용자 인터페이스를 비즈니스 로직과 분리하는 데 도움이됩니다. 이 기사에서는 이러한 요소 중 일부에 대해서만 소개하겠습니다. 그러나보다 심층적 인 가이드를 원한다면“backbone.js 기본 사항 : 모델, 뷰, 컬렉션 및 템플릿”을 읽어 보는 것이 좋습니다. <.> 모델은 데이터를 나타내며 백본을 확장하여 생성 할 수 있습니다. view는 사용자 인터페이스를 모델로 뒷받침하는 논리적보기로 구성하는 방법입니다. 여기에는 HTML 마크 업이 포함되어 있지 않지만 모델의 데이터를 사용자에게 제시 한 논리 만 포함합니다. 보기를 만들려면 다음과 같이 백본을 확장해야합니다. 이벤트는 모든 객체에 혼합 될 수있는 모듈로, 객체의 이름이 지정된 이벤트를 바인딩하고 트리거 할 수있는 기능을 제공합니다. model 및 view 모두이 모듈 이벤트 를 갖습니다. 이는 이벤트가 모델 또는 view 에 바인딩 할 수 있습니다. 일반적인 패턴은 모델의 변화를 듣는 뷰를 만드는 것입니다. 이 기술은 일반적으로 기본 데이터가 변경 될 때 뷰가 스스로 자동으로 다시 렌더링되도록합니다. 이러한 요소가 함께 작동하는 방식에 대한 예를 들어 Codepen에서 데모를 만들었습니다. Codepen에서 sitepoint (@sitepoint)의 xxpwmq 펜을 참조하십시오 우리가 입력 를 변경할 때마다 view 는 모델 를 변경합니다. OK 버튼을 누르면보기는 새 ID 값을 렌더링합니다. 서버와 클라이언트 간의 실시간 통신 WebSockets는 사용자의 브라우저와 서버간에 대화식 통신 세션을 열 수있는 고급 방법입니다. 이 API를 사용하면 사용자가 서버로 메시지를 보내고 회신을 위해 서버를 투표 할 필요없이 이벤트 중심 응답을받을 수 있습니다. 이 계약은 규칙과 예상 행동을 설명하고 양측의 행동을 수반하는 계약입니다. 이 두 조각이 API를 통해 연결되면 서버와 클라이언트를 통합하기위한 접착제 역할을합니다. 다리 비유에서, 한 번 제자리에 데이터와 지침은 다리를 건너 갈 수 있습니다. 예를 들어, 서버는 명령어를 받고 작업을 수행하며 명령을 처리 한 후 정보를 웹 응용 프로그램으로 되돌립니다. 당사자들 사이의 기부금. 이 추상화 계층 (API)을 사용하면 복잡한 웹 서비스를 숨기고 서버가 작업을 수행 한 방법에 대한 자세한 내용을 이해할 필요가 없습니다.

. socket.io는 실시간 웹 애플리케이션을위한 JavaScript 라이브러리입니다. 웹 클라이언트와 서버 간의 양방향 통신을 가능하게합니다. 양쪽은 API 동일한 API를 가지며 Node.js와 같은 이벤트 중심입니다. 브라우저와 서버 간에이 대화식 통신 세션을 열려면 실시간 통신을 가능하게하기 위해 HTTP 서버를 만들어야합니다. 그것은 우리가 메시지를 방출하고받을 수있게 해줄 것입니다. 소켓은 웹 클라이언트와 서버 간에이 통신을 처리하는 객체입니다. 아래 코드는 Socket.io를 사용하여 Express Framework를 사용하여 해당 서버를 만듭니다.

해당 서버를 작성한 후에는 소켓을 매개 변수로 취하는 콜백을 설정할 수있는 IO 클래스가 있습니다. 이 소켓 객체를 사용하면 사용자의 브라우저와 서버 간의 연결을 생성 할 수 있습니다.

브라우저에서 클라이언트는 연결을 위해 소켓을 반환하는 IO 함수를 호출하는 서버에 연결합니다.

는 데이터와 지침이 다리를 건너는 간단한 의사 소통을 만들어 봅시다.

.

<span>var MyModel = Backbone.<span>Model</span>.extend({
</span>  <span>initialize: function () {
</span>    <span>console.log('model initialized');
</span>  <span>}
</span><span>})</span>

이 코드를 사용하여 다음 데모를 구축 할 수 있습니다. Codepen에서 sitepoint (@sitepoint)의 펜 mvrymw를 참조하십시오 Socket.io 및 Express에 대해 더 많이 배우고 싶다면 다음 기사를 제안합니다.

평균 스택에 대한 소개 Express 4

로 편안한 API 생성 Node.js- 힘 채팅실 웹 앱 : 노드, MongoDB 및 소켓 var MyView = Backbone.View.extend({ el: 'div#my-view-container', initialize: function (options) { this.model = new MyModel() console.log('view initialized') } }) 빌드 socket.io를 사용한 채팅 애플리케이션

socket.io가있는 <.> backbone.js 이 섹션에서는 backbone.js를 사용하여 socket.io를 사용하는 방법의 예를 보여줄 것입니다.

그리고 이것이 결과입니다 : Codepen에서 sitepoint (@sitepoint)의 펜 Qydxwo를 참조하십시오 backbone.js

<span>var express = require('express'),  
</span>    app     <span>= express(),
</span>    http    <span>= require('http').<span>Server</span>(app),
</span>    io      <span>= require('socket.io')(http);
</span>
http<span>.listen(process.env.PORT || 5000, function(){  
</span>  <span>console.log('listening on *:5000');
</span><span>});</span>

가있는 pubsub pubsub는 비동기 메시징 패러다임입니다. 커플 링을 피할 수있는 기능을 제공합니다. 커플 링은 코드 그룹이 서로에 크게 의존 할 때이므로 코드 조각이 변경되면이 코드를 사용하는 모든 것을 업데이트해야합니다. pubsub는 동기화 디커플링이있는 패턴입니다. 라디오 스테이션이 방송되는 방식과 같은 이벤트 시스템을 사용합니다. 라디오 방송국 브로드 캐스트 () 및 누구나들을 수 있습니다 ( 구독 ). 또한 다른 객체와 직접 대화하기보다는 공유 라디오 방송국에 메시지를 게시 할 수 있습니다. 이 이벤트 시스템을 사용하면 가입자가 필요로하는 값이 포함 된 인수를 전달할 수있는 이벤트를 정의 할 수 있습니다. Backbone.js는이 이벤트 시스템 구현을 매우 간단하게 만듭니다. 이런 식으로 백본을 섞어야합니다.

<span>var MyModel = Backbone.<span>Model</span>.extend({
</span>  <span>initialize: function () {
</span>    <span>console.log('model initialized');
</span>  <span>}
</span><span>})</span>

이 시점에서 표준 트리거와 메소드를 사용하여 메시지를 게시하고 구독 할 수 있습니다.

그렇게하면 이제 백본보기에서 socket.io를 제거 할 수 있습니다.

목표는 모듈 간의 종속성을 피하는 것입니다. 각 모듈은 이벤트 (게시자)를 발사하는 라디오 방송국과 같은 채널을 가질 수 있으며 다른 모듈은 알림 (가입자)을 받기를 원하는 이벤트를들을 수 있습니다. 획득 된 결과는 다음과 같습니다 Codepen에서 sitepoint (@sitepoint)의 펜 gpgnpz를 참조하십시오 그래프 시각화 예 우리의 그래프 시각화는 클라이언트 측에서 두 개의 모듈을 사용합니다. 하나는 지시 된 그래프를 그리거나 데이터를 저장하고 가져 오기 위해 다른 모듈을 사용합니다. 그래프 드로잉 모듈은 Force Editor라는 도구를 사용합니다. 코드에서 ForceView를 부르는이 모듈을 통해 그래프 노드를 2 차원 공간에 간단하고 직관적 인 방식으로 배치 할 수 있습니다. 우리가 DBAAS라고 부르는 스토리지 모듈은 Socket.io를 사용하여 웹 클라이언트와 서버 간의 실시간 양방향 통신을 가능하게합니다. 그들 중 어느 것도 forceview var MyView = Backbone.View.extend({ el: 'div#my-view-container', initialize: function (options) { this.model = new MyModel() console.log('view initialized') } }) 및

dbaas 는 다른 사람에 대해 알지 못합니다. 그들의 행동은 모두 고립되어 있습니다.

<span>var express = require('express'),  
</span>    app     <span>= express(),
</span>    http    <span>= require('http').<span>Server</span>(app),
</span>    io      <span>= require('socket.io')(http);
</span>
http<span>.listen(process.env.PORT || 5000, function(){  
</span>  <span>console.log('listening on *:5000');
</span><span>});</span>

모두 의존성을 피하기 위해 두 모듈 모두

게시/구독

스타일로 설정됩니다. 라디오 스테이션 브로드 캐스트 (게시) 및 라디오 수신기 청취 (구독)와 같은 라디오 작업과 같은 방식으로 이벤트 시스템을 사용합니다. 각 모듈은 다른 사람과 직접 대화하기보다는 자신의 채널에서 이벤트를 해고하는 공유 된 " Radio Station "에 메시지를 게시하고 다른 모듈은 이벤트에 대한 다른 채널을들을 수 있습니다. 여기서 유일한 의존성은 매우 작은 API가있는 각 라디오 채널에 있습니다. 중요한 것은 채널이 트리거되고 시스템이 이벤트에 올바르게 반응하는지 확인하는 것입니다. 그들이 이벤트를 트리거하고 올바른 것을 주면 시스템은 전체적으로 작동합니다. 아래 이미지를 살펴 보려면 각 모듈에서 어떤 이벤트가 방출되는지 확인하십시오.

.

백본보기는 ForceView와 DBAA 사이의 중재자 역할을합니다. 이를 통해 모든 것을 사용 가능한 작은 조각으로 분해 한 다음 작은 조각을 아름답게 함께 작동시킬 수 있습니다. 이런 식으로 코드는 이해하기가 더 간단 해지고 쉽게 유지 관리 할 수 ​​있습니다.

예를 들어, 특정 취향에 맞게 약간의 사용자 정의하려면 모듈을 쉽게 집어 들고 원하는 방식으로 변경할 수 있습니다. 다른 그래프 라이브러리의 그래프 시각화를 대체 할 수 있습니다 (예 : JQPlot, Dracula, Arborjs, Sigmajs, Raphaeljs 등. 또는 FireBase, AppBase, Neo4J, Titandb 등과 같은 실시간 데이터베이스를 사용할 수 있습니다. 좋은 소식은 다른 라이브러리로 마이그레이션하려면 단일 파일을 변경하면됩니다. 아래 이미지는 백본보기 와이 두 모듈 사이의 상호 작용을 보여줍니다. 우리는 데이터베이스를 사용하지 않습니다. 데이터는 메모리에 저장되고 있습니다. 코드를 분리 한 방식은 모든 종류의 데이터베이스에 연결할 수 있습니다.

그래프 시각화 예제를 로컬로 실행합니다 전체 코드는 github에서 사용할 수 있습니다. 저장소를 복제하거나 코드를 다운로드 할 수 있습니다

그런 다음 모든 종속성을 설치하려면 콘솔에서 NPM 설치를 실행합니다. 다음, Node Server.js를 실행하여 응용 프로그램을 시작하십시오 http : // localhost : 5000으로 이동하여 브라우저를 사용하여 실행중인 응용 프로그램을 확인하십시오. 응용 프로그램을 실제로보고 싶다면 여기에서 데모를 찾을 수 있습니다.

결론

완성! 방금 Backbone의 내장 기능을 사용하여 PubSub 패턴을 구현했습니다. 또한이 패턴을 사용하여 사용자가 데이터를 아름답게 동기화 한 그래프 데이터를 실시간으로 표현하고 저장했습니다. 보시다시피, 우리는 디퍼링 된 코드 조각이 함께 작동하는 것을 볼 수있는 훌륭한 예에서 몇 가지 흥미로운 개념을 혼합했습니다. 이제 다음 단계는이를 사용자 정의하고 메모리 대신 데이터베이스에 데이터를 저장하는 것입니다. 그러나 우리는 아마 다가오는 게시물 중 하나에서 사용자 정의에 대해 논의 할 것입니다.

아래 섹션에서 귀하의 의견을 자유롭게 공유하십시오.

backbone.js 및 socket.io가있는 웹 앱 구축에 대한 자주 묻는 질문 (FAQ) 웹 앱을 구축 할 때 Backbone.js의 역할은 무엇입니까?
backbone.js는 키 값 바인딩 및 사용자 정의 이벤트, 모음으로 모델을 공급하여 웹 애플리케이션에 구조를 제공하는 가벼운 JavaScript 라이브러리입니다. 열거 가능한 기능의 풍부한 API를 사용하여 선언적 이벤트 처리가있는 뷰를 사용하여 RESTFUL JSON 인터페이스를 통해 기존 API에 모든 것을 연결합니다. 코드를 구성하는 데 도움이되고 관리가 더 쉬워집니다. 복잡한 사용자 인터페이스 및 다량의 데이터를 처리 할 때 특히 유용합니다. Socket.io는 웹 앱의 기능을 어떻게 향상 시키는가?

socket.io는 브라우저와 서버 간의 실시간, 양방향 및 이벤트 기반 통신을 가능하게하는 자바 스크립트 라이브러리입니다. 브라우저에서 실행되는 클라이언트 측 라이브러리와 Node.js의 서버 측 라이브러리의 두 부분으로 구성됩니다. 두 구성 요소 모두 동일한 API가 있습니다. Socket.io는 채팅 애플리케이션, 실시간 분석, 이진 스트리밍, 인스턴트 메시징 및 문서 공동 작업과 같은 실시간 응용 프로그램을 만드는 데 매우 유용합니다.

Backbone.js에서 이벤트를 처리하는 방법 <.> backbone.js는 사용자 정의 이벤트를 모델에 바인딩 할 수있는 이벤트 처리 시스템을 제공합니다. 'ON'방법을 사용하여 이벤트를 모델에 바인딩하고 '트리거'메소드를 바인딩하여 이벤트를 트리거 할 수 있습니다. 'OFF'방법을 사용하여 이벤트를 제거 할 수도 있습니다. 이 이벤트 시스템은 애플리케이션의 변경을보다 쉽게 ​​관리하고 사용자 인터페이스를 데이터와 동기화 할 수 있도록합니다.

express.js?

socket.io와 함께 socket.io를 어떻게 사용할 수 있습니까? Node.js의 인기있는 웹 애플리케이션 프레임 워크 인 Express.js와 쉽게 통합 할 수 있습니다. Express.js 응용 프로그램을 작성한 다음 Socket.io 서버를 첨부 할 수 있습니다. 그런 다음 socket.io를 사용하여 클라이언트와 서버 간의 실시간 통신을 처리 할 수 ​​있습니다. 이 Express.js 및 Socket.io의 조합은 매우 강력하며 복잡한 웹 애플리케이션을 만드는 데 사용될 수 있습니다.

편안한 API와 함께 Backbone.js를 어떻게 사용할 수 있습니까?

backbone.js Restful API와 함께 작동하도록 설계되었습니다. '페치'방법을 사용하여 서버에서 데이터를 검색하고 '저장'메소드를 검색하여 데이터를 서버에 저장할 수 있습니다. '파괴'방법을 사용하여 서버에서 데이터를 삭제할 수도 있습니다. backbone.js는 서버로 보낼 때 모델 데이터를 JSON 형식으로 자동 변환하고 서버에서 수신 할 때 모델 데이터로 다시 변환합니다.

Socket.io?로 바이너리 데이터를 처리하는 방법 >

socket.io는 블롭 및 어레이 버퍼와 같은 이진 데이터를 지원합니다. 클라이언트에서 서버 또는 서버에서 클라이언트로 이진 데이터를 보낼 수 있습니다. socket.io는 이진 데이터를 인코딩하고 디코딩하는 것을 자동으로 처리합니다.
backbone.js에서 오류를 처리하는 방법?
backbone.js는 사용할 수있는 '오류'이벤트를 제공합니다. 오류를 처리합니다. 'ON'메소드를 사용하여 오류 처리기를 모델에 바인딩 한 다음 '트리거'메소드를 사용하여 오류 이벤트를 트리거 할 수 있습니다. 오류 핸들러는 모델과 오류로 인수로 호출됩니다.

socket.io에서 연결 끊김을 처리하려면 어떻게해야합니까?

socket.io는 자동으로 연결이 끊기 및 재 연결을 처리합니다. 클라이언트가 연결이 끊어지면 서버에서 '분리'이벤트가 방출됩니다. 클라이언트가 다시 연결되면 클라이언트에서 '다시 연결'이벤트가 방출됩니다. 이 이벤트를 사용하여 응용 프로그램의 연결 끊기 및 재 연결을 처리 할 수 ​​있습니다. backbone.js 모델과보기를 어떻게 확장 할 수 있습니까? backbone.js를 사용하면 모델과보기를 확장하여 고유 한 사용자 정의 모델과 뷰를 만들 수 있습니다. '확장'방법을 사용하여 모델 또는 뷰의 서브 클래스를 만들 수 있습니다. 그런 다음 서브 클래스에 자신의 방법과 속성을 추가 할 수 있습니다.

Socket.io 애플리케이션을 어떻게 스케일링 할 수 있습니까?

socket.io는 여러 노드를 사용하여 수평 스케일링을 지원하고로드 밸런싱을 지원합니다. . 'socket.io-Redis'어댑터를 사용하여 여러 socket.io 노드 간의 통신을 가능하게 할 수 있습니다. 또한 '스티커 세션'모듈을 사용하여 클라이언트의 모든 요청이 항상 동일한 노드로 전송 될 수 있습니다.

위 내용은 backbone.js 및 socket.io가있는 웹 앱을 구축하십시오의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!