Чат в реальном времени с NodeJS, Socket.io и ExpressJS

() translation by (you can also view the original English article)

NodeJS дает мне возможность писать код на одном из моих любимых языков: JavaScript. Это идеальная технология для создания приложений реального времени. В этом уроке я покажу вам, как создать приложение для веб-чата, используя ExpressJS и Socket.io.

Настройка окружения

Конечно, первое, что нужно сделать, - это установить NodeJS в вашей системе. Если вы являетесь пользователем Windows или Mac, вы можете посетить nodejs.org и загрузить программу установки. Если вы предпочитаете Linux, я бы предложил ссылаться на эту ссылку. Хотя я не буду вдаваться в подробности, если у вас возникнут какие-либо проблемы с установкой, я буду рад вам помочь; просто оставьте комментарий ниже этого сообщения.

После установки NodeJS вы готовы настроить необходимые инструменты.

ExpressJS - это управление сервером и ответ пользователю
Jade - шаблонный движок
Socket.io - позволяет осуществлять связь в реальном времени между фронтендом и бэкендом.

Продолжая работу в пустом каталоге, создайте файл package.json со следующим содержимым.

{
    "name": "RealTimeWebChat",
    "version": "0.0.0",
    "description": "Real time web chat",
    "dependencies": {
        "socket.io": "latest",
        "express": "latest",
        "jade": "latest"
    },
    "author": "developer"
}

Используя консоль (в командной строке Windows), перейдите в свою папку и выполните:

1	npm install

В течение нескольких секунд вы будете иметь все необходимые зависимости, загруженные в каталог node_modules.

Разработка бэкэнда

Начнем с простого сервера, который будет доставлять HTML-страницу приложения, а затем продолжим с более интересными задачи: связь в реальном времени. Создайте файл index.js со следующим кодом expressjs:

var express = require("express");
var app = express();
var port = 3700;

app.get("/", function(req, res){
    res.send("It works!");
});

app.listen(port);
console.log("Listening on port " + port);

Выше мы создали приложение и определили его порт. Затем мы зарегистрировали маршрут, который в этом случае является простым запросом GET без каких-либо параметров. На данный момент обработчик маршрута просто отправляет клиенту некоторый текст. Наконец, внизу, мы запускаем сервер. Для инициализации приложения из консоли выполните:

1	node index.js

Сервер работает, поэтому вы можете открыть http://127.0.0.1:3700/ и увидеть:

It works!

Теперь вместо «Это работает» мы должны вернуть HTML. Вместо чистого HTML может быть полезно использовать механизм шаблонов. Jade - отличный выбор, который имеет хорошую интеграцию с ExpressJS. Это то, что я обычно использую в своих проектах. Создайте каталог с именем tpl, и поместите в него следующий файл page.jade:

!!!
html
    head
        title= "Real time web chat"
    body
        #content(style='width: 500px; height: 300px; margin: 0 0 20px 0; border: solid 1px #999; overflow-y: scroll;')
        .controls
            input.field(style='width:350px;')
            input.send(type='button', value='send')

Синтаксис Jade не настолько сложный, но для полного руководства я предлагаю вам обратиться к jade-lang.com. Чтобы использовать Jade с ExpressJS, нам требуются следующие настройки.

app.set('views', __dirname + '/tpl');
app.set('view engine', "jade");
app.engine('jade', require('jade').__express);
app.get("/", function(req, res){
    res.render("page");
});

Этот код информирует Express, где находятся ваши файлы шаблонов, и какой механизм шаблонов следует использовать. Все это определяет функцию, которая будет обрабатывать код шаблона. Как только все будет установлено, мы можем использовать метод .render объекта response и просто отправить наш Jade-код пользователю.

На данный момент вывод не является чем-то особенным; не более чем элемент div (с id content), который будет использоваться как контейнер для сообщений чата и два элемента управления (поле ввода и кнопка), которые мы будем использовать для отправки сообщения.

Поскольку мы будем использовать внешний файл JavaScript, который будет содержать интерфейсную логику, нам нужно сообщить ExpressJS, где искать такие ресурсы. Создайте пустой каталог public и добавьте следующую строку перед вызовом метода .listen.

1	app.use(express.static(__dirname + '/public'));

Все идет нормально; у нас есть сервер, который успешно отвечает на запросы GET. Теперь пришло время добавить интеграцию с Socket.io. Измените эту строку:

1	app.listen(port);

на:

1	var io = require('socket.io').listen(app.listen(port));

Выше мы передали сервер ExpressJS на Socket.io. Фактически, наша связь в реальном времени все равно будет происходить в том же порту.

Двигаемся вперед, нам нужно написать код, который получит сообщение от клиента, и отправить его всем остальным. Каждое приложение Socket.io начинается с обработчика connection. У нас должен быть один:

io.sockets.on('connection', function (socket) {
    socket.emit('message', { message: 'welcome to the chat' });
    socket.on('send', function (data) {
        io.sockets.emit('message', data);
    });
});

Объект, socket, который передается вашему обработчику, на самом деле является сокетом клиента. Подумайте об этом как о соединении между вашим сервером и браузером пользователя. После успешного соединения мы отправляем сообщение типа welcome и, конечно же, связываем другой обработчик, который будет использоваться в качестве получателя. В результате клиент должен выпустить сообщение с именем, send, которое мы поймаем. После этого мы просто пересылаем данные, отправленные пользователем во все другие сокеты с помощью io.sockets.emit.

С помощью приведенного выше кода наш сервер готов принимать и отправлять сообщения клиентам. Давайте добавим код фронтенда.

Разработка Front-end

Создайте chat.js и поместите его в каталог public вашего приложения. Вставьте следующий код:

window.onload = function() {

    var messages = [];
    var socket = io.connect('http://localhost:3700');
    var field = document.getElementById("field");
    var sendButton = document.getElementById("send");
    var content = document.getElementById("content");

    socket.on('message', function (data) {
        if(data.message) {
            messages.push(data.message);
            var html = '';
            for(var i=0; i<messages.length; i++) {
                html += messages[i] + '<br />';
            }
            content.innerHTML = html;
        } else {
            console.log("There is a problem:", data);
        }
    });

    sendButton.onclick = function() {
        var text = field.value;
        socket.emit('send', { message: text });
    };

}

Наша логика завернута в обработчик .onload, чтобы обеспечить полную загрузку всей разметки и внешнего JavaScript. В следующих нескольких строках мы создаем массив, который будет хранить все сообщения, объект socket и несколько ярлыков для наших элементов DOM. Опять же, подобно back-end, мы связываем функцию, которая будет реагировать на активность сокета. В нашем случае это событие message. Когда такое событие происходит, мы ожидаем получить объект, данные, со свойством message. Добавьте это сообщение в наше хранилище и обновите div content. Мы также включили логику отправки сообщения. Это довольно просто, просто испуская сообщение с именем, send.

Если вы откроете http://localhost:3700, вы столкнетесь с некоторыми всплывающими ошибками. Это потому, что нам нужно обновить page.jade, чтобы он содержал необходимые файлы JavaScript.

1	head
2	title= "Real time web chat"
3	script(src='/chat.js')
4	script(src='/socket.io/socket.io.js')

Обратите внимание, что Socket.io управляет доставкой socket.io.js. Вам не нужно беспокоиться о ручной загрузке этого файла.

Мы снова можем запустить наш сервер командой node index.js в консоли и открыть http://localhost:3700. Вы должны увидеть приветственное сообщение. Конечно, если вы отправляете что-то, оно должно быть показано в div. Если вы хотите убедиться, что все работает, откройте новую вкладку (или, лучше, новый браузер) и загрузите приложение. Самое замечательное в Socket.io - это то, что он работает, даже если вы остановите NodeJS-сервер. Интерфейс будет продолжать работать. Как только сервер будет загружен снова, ваш чат тоже будет прекрасен.

В текущем состоянии наш чат не идеален и требует некоторых улучшений.

Улучшения

Первое изменение, которое нам нужно сделать, - это идентификация сообщений. В настоящее время неясно, какие сообщения отправляются и кем. Хорошо, что нам не нужно обновлять наш код NodeJS, чтобы добиться этого. Это потому, что сервер просто перенаправляет объект data. Итак, нам нужно добавить новое свойство и прочитать его позже. Прежде чем вносить поправки в chat.js, добавим новое поле input, в котором пользователь может добавить свое имя. Внутри page.jade измените div controls:

.controls
    | Name: 
    input#name(style='width:350px;')
    br
    input#field(style='width:350px;')
    input#send(type='button', value='send')

Затем в code.js:

window.onload = function() {

    var messages = [];
    var socket = io.connect('http://localhost:3700');
    var field = document.getElementById("field");
    var sendButton = document.getElementById("send");
    var content = document.getElementById("content");
    var name = document.getElementById("name");

    socket.on('message', function (data) {
        if(data.message) {
            messages.push(data);
            var html = '';
            for(var i=0; i<messages.length; i++) {
                html += '<b>' + (messages[i].username ? messages[i].username : 'Server') + ': </b>';
                html += messages[i].message + '<br />';
            }
            content.innerHTML = html;
        } else {
            console.log("There is a problem:", data);
        }
    });

    sendButton.onclick = function() {
        if(name.value == "") {
            alert("Please type your name!");
        } else {
            var text = field.value;
            socket.emit('send', { message: text, username: name.value });
        }
    };

}

Чтобы обобщить эти изменения, мы имеем:

Добавлен новый ярлык для input ввода имени пользователя
Немного обновлено представление сообщений
Добавлено новое свойство username к объекту, который отправляется на сервер

Если количество сообщений становится слишком высоким, пользователю необходимо прокрутить div:

1	content.innerHTML = html;
2	content.scrollTop = content.scrollHeight;

Имейте в виду, что вышеупомянутое решение, скорее всего, не будет работать в IE7 и ниже, но это нормально: пришло время для IE7 чтобы исчезнуть. Однако, если вы хотите обеспечить его поддержку, не стесняйтесь использовать jQuery:

1	$("#content").scrollTop($("#content")[0].scrollHeight);

Также было бы неплохо, если поле ввода очистится после отправки сообщения:

1	socket.emit('send', { message: text, username: name.value });
2	field.value = "";

Последней скучной проблемой является необходимость каждый раз нажимать кнопку send. С помощью jQuery мы можем слушать, когда пользователь нажимает клавишу Enter.

$(document).ready(function() {
    $("#field").keyup(function(e) {
        if(e.keyCode == 13) {
            sendMessage();
        }
    });
});

Функция, sendMessage, может быть зарегистрирована, например:

1	sendButton.onclick = sendMessage = function() {
2	...
3	};

Обратите внимание, что это не лучшая практика, так как она зарегистрирована как глобальная функция. Но, для нашего небольшого теста это вполне нормально.

Заключение

NodeJS - чрезвычайно полезная технология и дает нам большую силу и радость, особенно если учесть, что мы можем писать чистый JavaScript. Как вы можете видеть, всего с несколькими строками кода нам удалось написать полнофункциональное приложение чата реального времени. Довольно аккуратно!

Хотите узнать больше о создании веб-приложений с помощью ExpressJS? Мы тебя поймали!