Статьи

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

Февраль 28, 2019

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

Кстати, если вы хотите найти готовое решение для чата с помощью Node.js, взгляните на Yahoo! Messenger node.JS BOT на рынке Envato .

Yahoo Messenger узел JS BOT на рынке Envato
Yahoo! Messenger node.JS BOT на рынке Envato

Настройка среды

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

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

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

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

  {
     "name": "RealTimeWebChat",
     «версия»: «0.0.0»,
     "description": "Веб-чат в реальном времени",
     "зависимости": {
         "socket.io": "последний",
         "экспресс": "последний",
         "нефрит": "последний"
     },
     "автор": "разработчик"
 }

Используя консоль (в 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 («Это работает!»);
 });

 app.listen (порт);
 console.log («Прослушивание порта» + порт);

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

1
node index.js

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

  Оно работает!

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

1
2
3
4
5
6
7
8
9
!!!
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 ( "страницы");
 });

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

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

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

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

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

  app.listen (порт);

чтобы: 

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

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

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

  io.sockets.on ('соединение', функция (сокет) {
     socket.emit ('message', {message: 'welcome to chat'});
     socket.on ('send', function (data) {
         io.sockets.emit ('message', data);
     });
 });

Объект socket , который передается вашему обработчику, на самом деле является сокетом клиента. Думайте об этом как о соединении между вашим сервером и браузером пользователя. После успешного подключения мы отправляем welcome тип сообщения и, конечно, связываем другой обработчик, который будет использоваться в качестве получателя. В результате клиент должен send сообщение с именем 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 ("отправить");
     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;
         } еще {
             console.log («Есть проблема:», данные);
         }
     });

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

 }

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

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

1
2
3
4
head
   title= «Real time web chat»
   script(src=’/chat.js’)
   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 :

1
2
3
4
5
6
.controls
   |
   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 ("отправить");
     var content = document.getElementById ("content");
     var name = document.getElementById ("name");

     socket.on ('message', function (data) {
         if (data.message) {
             messages.push (данные);
             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;
         } еще {
             console.log («Есть проблема:», данные);
         }
     });

     sendButton.onclick = function () {
         if (name.value == "") {
             alert («Пожалуйста, введите ваше имя!»);
         } еще {
             var text = field.value;
             socket.emit ('send', {message: text, username: name.value});
         }
     };

 }

Чтобы подвести итоги изменений, мы:

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

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

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

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

  . $ ( "# Содержание") scrollTop ($ ( "# содержание") [0] .scrollHeight);

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

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

Последняя скучная проблема — нажатие кнопки « Отправить» каждый раз. Одним касанием jQuery мы можем слушать, когда пользователь нажимает Enter . 

  $ (документ) .ready (function () {
     $ ("# field"). keyup (function (e) {
         if (e.keyCode == 13) {
             Отправить сообщение();
         }
     });
 });

Функция sendMessage может быть зарегистрирована следующим образом: 

  sendButton.onclick = sendMessage = function () {
     ...
 };

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

Вывод

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

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

57
Share: