Начните с Meteor, создавая приложение чата

Вступление

Meteorjs – это потрясающая структура, построенная для разработки веб-приложений в реальном времени. Meteor позволяет разработчикам сосредоточиться на их применении и забыть о том, чтобы облицовать сложность при разработке приложений в режиме реального времени (например, приложения, которые должны синхронизировать и немедленно обновлять данные всем пользователям).

В этом руководстве мы будем:

Скачать и настроить METEOR.
Пройти основные особенности метеора
Запустите приложение для образца
Понять структуру папки Meteor.
Разработать простое приложение чата.

Вы можете скачать образец кода здесь Отказ

Загрузка и настройка Meteor

Перейти к Официальный сайт Meteor и загрузить приложение. Пользователи Windows могут следовать за мастером установки, чтобы установить его.

Пользователи Mac и Linux могут запустить следующую команду, чтобы установить его прямо в ваш компьютер:

curl https://install.meteor.com/ | sh

После установки Meteor запустите следующую команду для доступа к Meteor через командную строку.

meteor

Особенности метеора

1: Full-Stack JavaScript. METEOR использует JavaScript в качестве языка внедрения для его внешнего интерфейса, заднего конца и базы данных. В терминах UI он использует свою собственную систему шаблонов. Бэкэнда написана на Node.js и использует MongoDB в качестве программного обеспечения для базы данных, что, в свою очередь, работает на формате данных JavaScript.

2: полная реактивность. Это где метеор становится интересным. Если вы разработали веб-приложение в режиме реального времени, такие как приложение в чате, то вы можете знать, насколько трудно поддерживать функцию реактивности (например, если один узел внес некоторые изменения, другие должны быть проинформированы и обновлены немедленно).

Ну, не больше. Meteorjs делает это очень легко для нас поддерживать реактивную особенность. Все, что вам нужно сделать, это создать веб-приложение, и он будет полностью реагирует по всем подключенным пользователям.

3: перекрестная платформа. Какое бы веб-приложение, которое вы используете, используя Meteor, могут быть успешно преобразованы в мобильное приложение Android или iOS, используя простую команду. Meteor будет управлять вашим видом на порт и видимость экрана.

Запуск приложения образца

Во-первых, давайте запустим следующую команду.

meteor create myFirstApp

Это создаст папку с именем MyFirstapp И создайте исходные файлы в нем. Переключитесь в этот каталог и выполните следующую команду.

meteor

Посетить localhost: 3000 Для просмотра приложения.

Понимание структуры папки METEOR.

/клиент – хранит весь код, который работает на клиенте здесь

/Сервер – где логика, которая работает на сервере, должна идти

/публики – Поместите все статические файлы здесь.

Таким образом, вам не нужно предоставлять точку входа программы, так как Meteor найдет и запустит соответствующий код.

Вы даже можете поставить код в тот же файл клиента и сервера.

if (Meteor.isClient) {
  // code here will only be run on the client
}

if (Meteor.isServer) {
  // code here will only be run on the server
}

Разработка простого приложения чата

Давайте сначала создадим наше приложение.

meteor create chatApp

Это создаст файлы по умолчанию, но нам не нужны их, так что удалите эти файлы.

rm -rf *

Теперь давайте создадим папку клиента.

mkdir client

Мы поместим наш клиентский край код в этом каталоге.

Прежде чем двигаться вперед, нам нужно создать коллекцию MongoDB. Если мы создадим файл с именем models.js Meteor будет иметь к нему доступ к файлу базы данных. Внутри мы создадим новую коллекцию Mongo.

Вы можете задаться вопросом, где мы создаем базу данных MongoDB? Мы не. METEOR делает базу данных для вашего приложения автоматически, как только ваше создание нового приложения Meteor.

/**
* Create new collection if not present.
*/
Messages = new Meteor.Collection('messages');

Внутри клиента давайте создадим три файла, названные как Client.html , Client.csss и Client.js Отказ

Вот Client.html Отказ



  Meteor Chat Application.


  
  Chatapp
  {{> welcome }}
  {{> input }}
  {{> messages }}

Как вы можете увидеть внутреннюю часть тела, мы определили это:

{{> welcome }}
{{> input }}
{{> messages }}

Это имена шаблонов, и каждое имя будет заменено кодом в блоке шаблона (который мы сделали в одном файле), поэтому при запуске файла HTML> Добро пожаловать, вы получите:

Let's chat.

И же идет для других шаблонов.

Шаблон Сообщения Покажет сообщения чата, введенные пользователем, и это будет выбрано из MongoDB в нашем файле JS, которое я объясню, как показано ниже.

Мы будем петли по возвращенным сообщениям Mongodb и заменить {имя}} и {{сообщений}} помощники с соответствующими данными.

В METEOR каждый шаблон получает «помощников», что в более простой термине похоже на двухстороннюю переменную связывание.

Вот наш Client.csss :

html {
  padding: 10px;
  font-family: Verdana, sans-serif;
}

.login-buttons-dropdown-align-right {
  float: right;
}

Вот наш самый важный файл: Client.js.

/**
* Templates
*/
if (Meteor.isClient) {
  Template.messages.helpers({
    messages: function() {
    return Messages.find({}, { sort: { time: -1}});
  }
  });

  Template.input.events = {
    'keydown input#message' : function (event) {
    if (event.which == 13) { // 13 is the enter key event
      if (Meteor.user())
      var name = Meteor.user().profile.name;
        else
      var name = 'Anonymous';
        var message = document.getElementById('message');
        if (message.value != '') {
      Messages.insert({
        name: name,
      message: message.value,
      time: Date.now(),
          });

          document.getElementById('message').value = '';
          message.value = '';
        }
      }
    }
  }
}

Сначала мы проверяем, если это клиент или сервер. Если это сервер, мы сначала сделаем сообщения от MongoDB и опубликуйте их на шаблон сообщения.

Итак, когда вы запускаете приложение после закрытия его, вы можете увидеть ваши старые сообщения чата, хранящиеся в MongoDB. Найти ({}) будет получать все записи из определенной коллекции MongoDB и вернуть его обратно.

Здесь мы возвращаем все сообщения от Mongodb на наш шаблон Сообщения Где мы зацикливаемся по записям, потому что это будет массив JSON и печатать два ключа, которые есть Имя и сообщение Отказ

Чтобы удалить старые данные из MongoDB и сбросить приложение, просто запустите следующую команду:

meteor reset

Теперь на событии ключей ввода в выборе текстового поля мы выбираем текстовое поле формы сообщений и нажав его в MongoDB, используя стандартные Вставить () функция.

Сообщения – это имя коллекции, определенной в models.js Отказ Вы можете заметить, что мы выбираем и храним данные в формате чистого JSON.

Запуск приложения чата

Перейдите в папку Project и запустите следующую команду:

meteor

Вы должны увидеть следующее в вашей консоли:

Теперь иди к localhost: 3000 Используя два окна браузера, используя разные профили.

Вы можете увидеть живые обновления в обоих окнах.

Окончательные слова

Meteor реализует Mini Mongo в вашем браузере для быстрой отладки, чтобы вы могли получить доступ к данным только в вашем браузере.

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

Messages._collection.findOne()

Результат:

Тем не менее, вы должны удалить эту функцию, прежде чем нажать на его производство. Сделайте это, используя следующую команду:

meteor remove autopublish

Это гарантирует, что никто не будет иметь доступ к базе данных MongoDB из своего браузера. Наконец, вы можете развернуть приложение к сайту Meteor, используя

meteor deploy youraccount.meteor.com

Заключение

Таким образом, мы узнали, как настроить и построить пример Meteor. Я надеюсь, что это хорошо начать для вас. Оставайтесь настроиться на более удивительные статьи, как это.