Slack과 같은 데스크톱 채팅 애플리케이션을 만들고 싶지만 어디서부터 시작해야 할지 잘 모르겠습니다. Slack은 매우 개방적으로 Github의 전자 데스크톱 버전의 소프트웨어를 구축하기 위한 플랫폼입니다. 즉, Slack은 웹 기술을 사용하여 개발되었습니다.
Slack만큼 기능이 풍부하지는 않지만 실시간 채팅 데스크톱 애플리케이션을 만드는 방법을 살펴보고, 이를 확장하는 방법에 대한 관점을 얻을 수 있을 것입니다.
전제 조건
많은 것을 요구하지는 않지만, 다음 작업을 성공적으로 수행하기 위해 필요한 몇 가지 사항이 있습니다:
- 카우치베이스 서버 4+
- 노드 패키지 관리자(NPM)
모든 채팅 메시지가 전송된 후 데이터베이스에 캐시되기 때문에 Couchbase Server가 필요합니다. 이를 통해 채팅방에 참여하는 모든 사람들이 이전 메시지를 볼 수 있습니다. 이는 사람들이 다른 사람들보다 늦게 채팅에 참여할 수 있고 그들이 어떤 것도 놓치는 것을 원하지 않기 때문에 중요합니다. 노드 패키지 관리자(NPM)는 Angular 2와 Electron을 설치하는 데 사용할 것이므로 필요합니다. 다음을 설치하여 사용할 수 있습니다. Node.js.
이제 프로젝트 디자인을 시작해 보겠습니다.
Socket.io 서버 복제
아시다시피, CEAN 스택을 사용한 실시간 채팅을 주제로 제가 작성한 튜토리얼은 이번이 처음이 아닙니다. 사실 다른 튜토리얼도 두 개나 썼습니다:
시간을 절약하기 위해 Ionic 2 튜토리얼이 아닌 첫 번째 CEAN 스택 튜토리얼에서 개발한 서버 측 코드를 사용하겠습니다. 아직 읽어보지 않으셨다면 읽어보시는 것을 추천합니다. 하지만 소스 코드는 다음 링크를 통해 얻을 수 있습니다. 다운로드하기 를 다운로드하거나 터미널(Mac 및 Linux) 또는 명령 프롬프트(Windows)에서 다음을 실행하여 다운로드할 수 있습니다:
|
1 2 3 |
git 복제 https://github.com/couchbaselabs/ ocean-web-chat |
서버 측 코드를 다운로드한 후 명령 프롬프트 또는 터미널을 사용하여 프로젝트로 이동하고 모든 종속 요소를 실행하여 설치합니다:
|
1 2 3 |
npm 설치 |
이제 채팅 서버 코드가 준비되었습니다!
Couchbase 구성
카우치베이스는 Node.js 애플리케이션과 함께 사용되므로 N1QL 쿼리를 사용할 수 있도록 구성되고 허용된 버킷이 필요합니다. 이 모든 것은 첫 번째 CEAN 스택 채팅 튜토리얼에 대해 설명했지만 다시 한 번 정리해 보겠습니다.
카우치베이스 서버 4의 복사본을 설치하고 다음과 같은 버킷을 만듭니다. 웹 채팅 쿼리 서비스가 활성화되어 있습니다. N1QL 쿼리를 사용할 것이므로 기본 인덱스를 만들어야 합니다. 이 작업은 Couchbase 쿼리(CBQ) 클라이언트를 사용하여 수행할 수 있습니다. Mac의 경우 터미널에서 다음을 실행합니다:
|
1 2 3 |
./애플리케이션/카우치베이스 서버.앱/콘텐츠/리소스/카우치베이스-핵심/bin/cbq |
Windows에서도 명령 프롬프트를 사용하여 다음과 같이 동일한 작업을 수행할 수 있습니다:
|
1 2 3 |
C:/프로그램 파일/카우치베이스/서버/bin/cbq.exe |
CBQ를 연 상태에서 다음을 실행하여 인덱스를 생성합니다:
|
1 2 3 |
만들기 기본 INDEX 켜기 `웹-채팅` 사용 GSI; |
이제 카우치베이스 서버를 사용할 준비가 되었습니다!
전자 프로젝트 만들기
일렉트론 프로젝트는 코드와 관련하여 많은 부분을 잘라내어 붙여넣어야 할 것입니다. 일렉트론은 거의 모든 웹 애플리케이션을 수용하기 때문입니다. Socket.io 서버 프로젝트에 매우 적합한 웹 애플리케이션이 번들로 제공된다는 점을 기억하세요.
데스크톱에 새 디렉터리를 만들고 다음과 같이 호출합니다. 데스크톱 채팅 또는 가장 적절하다고 생각되는 이름으로 변경합니다. 터미널 또는 명령 프롬프트를 사용하여 프로젝트로 이동한 후 다음을 실행합니다:
|
1 2 3 |
npm init -y |
이렇게 하면 매우 기본적인 NPM이 생성됩니다. package.json 파일을 프로젝트에 추가합니다. 이제 모든 데스크톱 애플리케이션 종속성을 설치해야 합니다. 다음을 실행합니다:
|
1 2 3 4 |
npm 설치 angular2@2.0.0-베타.0 systemjs 타입스크립트 --저장 npm 설치 전자-사전 구축 --저장-dev |
처음 설치하면 모든 Angular 2 종속 요소가 설치됩니다. 서버 측 프로젝트에서 클라이언트용 UI는 모두 Angular 2와 TypeScript로 만들었습니다. 여기에서도 똑같이 할 것입니다. 두 번째 설치는 Electron 바이너리를 가져옵니다.
이제 package.json 파일을 프로젝트의 루트에 있는 스크립트 와 함께합니다:
|
1 2 3 4 5 |
"스크립트": { "시작": "electron main.js" }, |
곧 그 의미를 살펴 보겠지만 먼저 main.js 파일을 프로젝트 루트에 추가합니다. 이 파일에는 다음 코드가 포함되어야 합니다:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
var 앱 = require('app'); // 애플리케이션 수명을 제어하는 모듈입니다. var 브라우저 창 = require('브라우저-창'); // 기본 브라우저 창을 생성하는 모듈입니다. // 창 객체의 전역 참조를 유지하지 않으면 창은 다음과 같습니다. // 자바스크립트 객체가 가비지 수집되면 자동으로 닫힙니다. var 메인 윈도우 = null; // 모든 창이 닫히면 종료합니다. 앱.on('window-all-closed', 함수() { // OS X에서는 응용 프로그램과 해당 메뉴 표시줄이 일반적입니다. // 사용자가 Cmd + Q로 명시적으로 종료할 때까지 활성 상태를 유지합니다. 만약 (프로세스.플랫폼 != 'darwin') { 앱.종료(); } }); // 이 메서드는 Electron이 완료되면 호출됩니다. // 초기화하여 브라우저 창을 만들 준비가 되었습니다. 앱.on('ready', 함수() { // 브라우저 창을 만듭니다. 메인 윈도우 = new 브라우저 창({너비: 800, 높이: 600}); //로 이동하여 앱의 index.html을 로드합니다. 메인 윈도우.loadURL('file://' + __dirname + '/public/index.html'); // 창이 닫힐 때 발생합니다. 메인 윈도우.on('closed', 함수() { // 창 객체를 참조 해제하면 일반적으로 창을 저장합니다. // 앱이 다중 창을 지원하는 경우 배열에 다음을 입력합니다. // 해당 요소를 삭제해야 하는 경우. 메인 윈도우 = null; }); }); |
위의 내용은 두 가지 이유로 익숙해 보일 수 있습니다. 하나는 이전 게시물 두 번째는 일렉트론 문서에서 거의 그대로 가져온 것입니다. 하지만 중요한 대목은 이것입니다:
|
1 2 3 |
메인 윈도우.loadURL('file://' + __dirname + '/public/index.html'); |
즉, 모든 Angular 2 코드가 public 디렉토리로 시작하는 index.html 파일을 만듭니다.
복사 public 디렉터리에서 CEAN-웹-채팅 프로젝트를 복제한 후 Electron 프로젝트의 루트에 배치합니다. 이미 index.html 파일이 있지만 몇 가지를 변경해야 합니다. 파일을 열고 스크립트 경로로 이동합니다:
|
1 2 3 4 5 6 7 8 |
라이브러리 경로가 서버 측 애플리케이션에서와 같은 위치에 있지 않기 때문에 이렇게 했습니다.
실제로 사용하기 전에 해야 할 일이 몇 가지 더 있습니다. 일렉트론 프로젝트의 public/app/default/default.ts 파일을 열고 클래스 내에 새 변수를 생성합니다:
|
1 2 3 |
소켓 호스트: 문자열; |
이 작업은 클래스 내에서 수행해야 합니다. 더 이상 서버와 같은 호스트에 있지 않으므로 데스크톱 클라이언트에 연결할 호스트를 알려줘야 합니다. 생성자 내에서 소켓 호스트 호스트가 무엇이든 상관없습니다:
|
1 2 3 |
이.소켓 호스트 = "http://192.168.57.1:3000"; |
클라이언트가 서버 내에 번들로 제공되지 않기 때문에 생성자의 HTTP 요청이 더 이상 유효하지 않습니다. 방금 설정한 호스트를 정의해야 합니다. 다음과 같이 정의할 수 있습니다:
|
1 2 3 |
http.get(이.소켓 호스트 + "/fetch").구독((성공) => { |
마지막으로 Socket.io 객체를 정의하는 줄을 찾습니다. 여기에도 가리킬 호스트가 필요합니다. 다음과 같이 변경합니다:
|
1 2 3 |
이.소켓 = io(이.소켓 호스트); |
이쯤 되면 잘하고 계실 겁니다!
실제로 보기
이를 위해서는 두 개의 명령 프롬프트 또는 터미널이 열려 있어야 합니다. 첫 번째 터미널은 카우치베이스 서버에 연결되는 Socket.io Node.js 서버를 실행합니다. 이를 위해 GitHub 프로젝트를 작업 디렉터리로 사용하여 다음을 실행합니다:
|
1 2 3 |
노드 앱.js |
서버가 시작되었다면 정상적으로 작동하는 것입니다. 두 번째 터미널에서 Electron 프로젝트를 작업 디렉터리로 설정하고 다음을 실행합니다:
|
1 2 3 |
npm 시작 |
우리가 만든 시작 스크립트 내에서 package.json 파일을 찾으시나요? 이것이 우리가 사용하는 방식입니다.
몇 가지 메시지를 보내보세요. 메시지가 Couchbase Server에 저장되고 다른 클라이언트를 열거나 GitHub 프로젝트에서 임베드된 채팅 클라이언트를 로드하면 채팅을 할 수 있습니다.
결론
방금 기존 웹 애플리케이션을 크로스 플랫폼 데스크톱 애플리케이션으로 변환하는 방법을 살펴보았습니다. 이 애플리케이션은 앵귤러 2, 카우치베이스, 소켓.io, 노드.js와 같은 최첨단 기술을 사용하여 실시간 채팅을 제공했습니다.
아직 읽어보지 않으셨다면 제가 이전에 작성한 Couchbase와 Socket.io에 대한 포스팅을 확인해 보시기 바랍니다. 좋은 읽을거리이며 가능성의 문을 열어줄 수 있습니다.
