웹사이트 검색

Node.js 프레임워크인 Express를 설치하고 VPS에 Socket.io를 설정하는 방법


이 기사에서 배울 내용

  • 노드 버전 관리자(NVM)를 사용하여 NodeJS 0.10.16을 설치하는 방법
  • NodeJS용 Express 웹 애플리케이션 프레임워크 설치 방법
  • 간단한 Express 프로젝트 설정 방법
  • Express에서 socket.io를 설정하는 방법
  • 클라이언트에게 실시간으로 간단한 메시지 전송
  • 클라이언트 측 자바스크립트를 사용하여 메시지를 수신하는 방법

1단계: NodeJS 설정

참고: NodeJS v0.10.16이 설치되어 있다는 것을 이미 알고 있다면 이 단계를 건너뛸 수 있습니다

NVM(노드 버전 관리자)은 Linux 시스템에 다양한 버전의 NodeJS를 설치하는 데 도움이 되는 도구입니다. NVM을 사용하려면 gitcurl이 설치되어 있어야 합니다.

SSH를 사용하여 VPS(드롭릿)에 연결합니다.

설치되어 있지 않은 경우 시스템의 패키지 관리자를 사용하여 설치하십시오. 예를 들어 Ubuntu 또는 Debian 설치에서 다음을 실행합니다.

```
sudo apt-get install curl git
```

이제 NVM 설치 스크립트를 실행해야 합니다.

curl https://raw.github.com/creationix/nvm/master/install.sh | sh

중요: 이제 상자에서 로그아웃하고 SSH를 사용하여 다시 연결해야 합니다.

터미널에 nvm을 입력하여 nvm 명령이 작동하는지 테스트합니다. command not found 오류가 발생하지 않으면 NVM을 올바르게 설정한 것입니다.

Node의 최신 버전(이 기사 작성 당시 0.10.16)을 설치하려면 다음을 입력하십시오.

nvm install 0.10.16

그런 다음 설치가 완료될 때까지 기다리십시오. 설치에 성공하면 다음과 같은 출력이 표시됩니다. Now using node v0.10.16.

지정된 버전을 사용하고 있는지 확인하려면 터미널에 node -v를 입력하십시오. 출력을 얻어야 합니다: v0.10.16

2단계: Express 설정

Express는 Node.js용 웹 애플리케이션 프레임워크입니다. 최소화되고 유연합니다. Express 사용을 시작하려면 NPM을 사용하여 모듈을 설치해야 합니다. 간단한 유형:

npm install -g express

이렇게 하면 기본 웹 응용 프로그램을 만드는 데 도움이 되는 Express 명령줄 도구가 설치됩니다. Express를 설치했으면 다음 단계에 따라 빈 Express 프로젝트를 만듭니다.

mkdir socketio-test

cd socketio-test

express

npm install

이 명령은 방금 생성한 socketio-test 디렉토리에 빈 Express 프로젝트를 생성합니다. 그런 다음 npm install을 실행하여 앱을 실행하는 데 필요한 모든 종속성을 가져옵니다. 빈 애플리케이션을 테스트하려면 node app을 실행한 다음 브라우저에서 http://yourDropletIp-or-domainName:3000으로 이동합니다. "Welcome to Express\라는 간단한 환영 메시지가 나타납니다.

환영 메시지가 표시되면 기본 익스프레스 애플리케이션이 준비되어 실행 중인 것입니다!

계속 진행하기 전에 Ctrl+C 키보드 명령으로 VPS를 종료하십시오.

3단계: Express 애플리케이션에 Socket.io 설치

먼저, Socket.io가 실시간 JavaScript 라이브러리인지에 대한 간략한 요약입니다. 즉, AJAX Long Polling, Flash 또는 일반 WebSocket 등 브라우저의 기능에 따라 올바른 연결 유형을 결정하는 WebSocket API입니다.

어떻게 시작합니까? 먼저 Socket.io 서버가 필요합니다. 우리는 이미 Express 서버를 준비하고 기다리고 있으므로 소켓 라이브러리에 추가하기만 하면 됩니다. 그렇게 하려면 package.json 파일에 추가해야 합니다.

초기 파일은 다음과 같을 수 있습니다.

{
  "name": "application-name",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node app.js"
  },
  "dependencies": {
    "express": "3.3.5",
    "jade": "*"
  }
}

이제 "종속성\ 영역에 새 필드를 추가합니다.

"socket.io": "latest",

결과 파일은 다음과 같아야 합니다.

{
  "name": "application-name",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node app.js"
  },
  "dependencies": {
    "socket.io": "latest",
    "express": "3.3.5",
    "jade": "*"
  }
}

이제 npm install을 한 번 더 실행하여 소켓 라이브러리를 설치합니다.

파트 4: 서버 코드

이제 모든 종속성이 설정되었으므로 코드를 시작할 수 있습니다! Express 애플리케이션 폴더로 이동하여 app.js 파일을 엽니다. 내부에는 자동 생성된 코드가 많이 있으므로 모두 삭제하고 대신 다음 예제를 사용하십시오.

/**
 * Module dependencies.
 */
 
var express = require('express')
  , routes = require('./routes')
  , http = require('http');
 
var app = express();
var server = app.listen(3000);
var io = require('socket.io').listen(server); // this tells socket.io to use our express server
 
app.configure(function(){
  app.set('views', __dirname + '/views');
  app.set('view engine', 'jade');
  app.use(express.favicon());
  app.use(express.logger('dev'));
  app.use(express.static(__dirname + '/public'));
  app.use(express.bodyParser());
  app.use(express.methodOverride());
  app.use(app.router);
});
 
app.configure('development', function(){
  app.use(express.errorHandler());
});
 
app.get('/', routes.index);
 
 
console.log("Express server listening on port 3000");

이 예제 파일이 수행한 모든 작업은 자동 생성 코드를 재구성하고 var io = require(socket.io).listen(server); 행을 추가하여 socket.io가 수신 대기하고 사용하도록 지시합니다. 익스프레스 서버. 노드 앱을 실행하면 info - socket.io started 출력이 표시되어야 합니다.

이제 메시지를 사용자에게 어떻게 전송합니까?

app.js의 마지막 줄 바로 아래에 다음 줄을 추가합니다.

io.sockets.on('connection', function (socket) {
    console.log('A new user connected!');
    socket.emit('info', { msg: 'The world is round, there is no up or down.' });
});

새 사용자가 서버에 연결할 때마다 새 소켓 메시지를 보냅니다. 이제 클라이언트 측에서 VPS와 상호 작용할 방법만 있으면 됩니다.

파트 5: 클라이언트측 코드

Express 애플리케이션 내의 public/javascripts 폴더로 이동하여 client.js라는 새 파일을 추가하고 이 코드를 여기에 넣습니다.

// connect to the socket server
var socket = io.connect(); 

// if we get an "info" emit from the socket server then console.log the data we recive
socket.on('info', function (data) {
    console.log(data);
});

코드는 간단하지만 Socket.io로 무엇을 할 수 있는지 보여줍니다. 이제 기본 페이지에 스크립트를 포함하기만 하면 됩니다.

Express 앱에서 views 폴더로 이동하여 layout.jade를 엽니다. Express는 일반 HTML을 사용하여 페이지를 렌더링하지 않습니다. Jade라는 템플릿 엔진을 사용합니다. (Jade에 대한 자세한 정보는 다음에서 찾을 수 있습니다.

script(type='text/javascript', src="/socket.io/socket.io.js")
script(type='text/javascript', src='javascripts/client.js')

동일한 들여쓰기 수준에 정렬되어 있는지 확인하고 탭과 공백을 혼합하지 마십시오. 이로 인해 Jade에서 오류가 발생합니다.

socketio-test 디렉토리로 다시 전환하십시오.

cd socketio-test

레이아웃 파일을 저장하고 node app을 사용하여 Express 앱을 다시 시작하십시오.

파트 6: 테스트하기

이제 브라우저를 다시 한 번 http://yourDropletIp-or-domainName:3000으로 이동하고 개발자 도구 콘솔을 엽니다. 로그에 다음과 같은 내용이 표시되어야 합니다.

Object {msg: "The world is round, there is no up or down."}

VPS에서 클라이언트에게 실시간으로 직접 보내는 메시지입니다.

제출자: Aaron Shea