Как установить Express, платформу Node.js и настроить Socket.io на VPS
Что вы узнаете из этой статьи
- Как установить NodeJS 0.10.16 с помощью Node Version Manager (NVM)
- Как установить платформу веб-приложений Express для NodeJS
- Как настроить простой проект Express
- Как настроить socket.io в Express
- Отправка простых сообщений клиенту в режиме реального времени
- Как прослушивать сообщения с помощью JavaScript на стороне клиента
Шаг 1: Настройка NodeJS
Примечание. Вы можете пропустить этот шаг, если уже знаете, что у вас установлен NodeJS v0.10.16
Node Version Manager (NVM) — это инструмент, помогающий устанавливать различные версии NodeJS на вашем Linux-компьютере. Чтобы использовать NVM, убедитесь, что у вас установлены git
и curl
.
Подключитесь к вашему VPS (дроплету) с помощью SSH.
Если они у вас не установлены, используйте диспетчер пакетов вашей системы для их установки. Например, при установке 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
Затем дождитесь завершения установки. Если установка прошла успешно, вы должны получить вывод: Теперь используется узел v0.10.16
.
Введите node -v
в терминале, чтобы убедиться, что вы используете указанную версию. Вы должны получить вывод: v0.10.16
Шаг 2: Настройка Экспресс
Express — это фреймворк веб-приложений для Node. Он минимален и гибок. Чтобы начать использовать Express, вам нужно использовать NPM для установки модуля. Простой тип:
npm install -g express
Это установит инструмент командной строки Express, который поможет в создании базового веб-приложения. После установки Express выполните следующие действия, чтобы создать пустой проект Express:
mkdir socketio-test
cd socketio-test
express
npm install
Эти команды создадут пустой проект Express в только что созданном каталоге socketio-test
. Затем мы запускаем npm install
, чтобы получить все зависимости, необходимые для запуска приложения. Чтобы протестировать пустое приложение, запустите node app
, а затем перейдите в браузере по адресу http://yourDropletIp-or-domainName:3000. Вы должны получить простое приветственное сообщение: «Добро пожаловать в Express».
Если вы видите приветственное сообщение, значит, у вас готово и запущено базовое экспресс-приложение!
Обязательно отключите свой VPS с помощью клавиатурной команды Ctrl+C, прежде чем продолжить.
Шаг 3: Установка Socket.io в ваше экспресс-приложение
Во-первых, краткое изложение того, что Socket.io представляет собой библиотеку JavaScript в реальном времени. Короче говоря, это API WebSocket, который определяет правильный тип подключения в зависимости от возможностей браузера, будь то AJAX Long Polling, Flash или даже обычные WebSockets.
Так как же начать с этого? Сначала вам нужен сервер 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: Серверный код
Теперь, когда у нас настроены все зависимости, мы можем начать код! Откройте файл app.js
в папке приложения Express. Внутри вы найдете кучу автоматически сгенерированного кода, удалите его весь и вместо этого используйте следующий пример:
/**
* 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 запущен
.
Как теперь передать сообщение пользователю?
Добавьте следующие строки в свой 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: Клиентский код
Перейдите в папку public/javascripts
внутри приложения Express, добавьте новый файл с именем 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. Теперь нам просто нужно включить скрипты на нашу главную страницу.
Перейдите в папку views
в приложении Express и откройте layout.jade
. Express не использует простой HTML для отображения своих страниц. Он использует шаблонизатор под названием 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
Сохраните файл макета и снова запустите приложение Express, используя: node app
.
Часть 6: Тестирование
Теперь снова перейдите в браузере по адресу http://yourDropletIp-or-domainName:3000 и откройте консоль инструментов разработчика. Вы должны увидеть что-то вроде этого в журнале:
Object {msg: "The world is round, there is no up or down."}
Это сообщение, отправляемое непосредственно с VPS клиенту в режиме реального времени.