Установка фреймворка Express и настройка Socket.io

Java, Ubuntu | Amber | Комментировать запись

В этой статье охвачены следующие темы:

• Установка NodeJS 0.10.16 при помощи Node Version Manager (NVM).
• Установка веб-фреймворка Express.
• Создание простого проекта Express.
• Настройка socket.io для Express.
• Отправка простых сообщений клиенту в режиме реального времени.
• Прослушивание сообщений при помощи клиентского JavaScript.

1: Установка Node.JS

Примечание: Если NodeJS уже установлен, пропустите этот раздел.

Node Version Manager (NVM) – это инструмент, позволяющий установить несколько версий NodeJS на одну машину linux. Для корректной работы NVM нужны git и curl.

Подключитесь к серверу по SSH.

Установите необходимые программы при помощи стандартного менеджера пакетов. К примеру, в Ubuntu или Debian для установки git и curl нужно запустить:

```
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. Чтобы установить 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://Ip-адрес-или -домен:3000. Если всё работает верно, на экране появится простое приветственное сообщение:

Welcome to Express

Прежде чем продолжить, нужно остановить VPS, нажав Ctrl+C.

3: Установка Socket.io в приложение Express

Socket.io – это библиотека JavaScript в реальном времени. Проще говоря, это интерфейс 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": "*"
}
}

Добавьте новое поле в раздел dependencies.

"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, чтобы установить библиотеку socket.

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 прослушивает и использует сервер Express. Запустите приложение node, и вы увидите вывод:

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: Код клиента

Перейдите в каталог 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, более простой и чистый по сравнению с HTML. Чтобы добавить клиентский скрипт и библиотеку Socket.io, нужно просто добавить эти строки под строкой link(rel=’stylesheet’, href=’/stylesheets/style.css’):

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://Ip-адрес-или –домен:3000, а затем откройте консоль инструментов разработки. В логе появится:

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

Это сообщение, которое было отправлено в режиме реального времени непосредственно с VPS на клиент.