Создайте многопользовательское приложение с помощью Socket.io (часть 1): легкое приложение для чата

Автор оригинала: Codementor Team.

Вступление

Я так долго строит что-то построить что-то, что казалось из моей глубины, но я чувствую, что могу построить его достаточно мотивации. Чтобы начать свое путешествие, я хотел бы создать систему Matchmaking для соединения пользователей вместе с WebSockets. В некоторых уважении вы можете сделать сложный клон, используя механизмы, изложенные сегодня. Для моих конкретных обстоятельств я планирую сделать систему, которая будет интегрирована в игру позже.

Если вы знакомы с любыми многопользовательскими стрелками первого лица (например, Halo!), Вы уже использовали систему совпадения. На самом деле, Multi-Plays Games, которые, как правило, связаны с сетью, обычно имеют лобби, рейтинг, список карт и средство для присоединения или посмотреть, а оставить вечеринки и комнаты.

Примечание редактора: автор включил дополнительную информацию и подробную информацию о проекте. Новички рекомендуются прочитать заметки.

Что мы будем строить

Для сегодняшних упражнений мы будем строить простой игровой двигатель в Socket.io Чат демонстрация. Этот двигатель создаст игровые объекты для подключенных пользователей и выделяют их другим пользователям.

Область и ограничения

Конечная цель – разработать систему Matchmaking, где пользователи могут «подключиться» к игровому лобби. Это лобби, которое я предлагаю, покажет прокручиваемый список игр для присоединения, чата (для удовольствия, потому что нет), кнопка для создания игры и другой кнопки, чтобы присоединиться к игре. Мы осуществим этот игровой сервер, используя Node.js (и друзья). Это ни в коем случае не является минимальным жизнеспособным продуктом самостоятельно, но он может обеспечить большую мощность при правильном использовании. Если вы заинтересованы в следующем, я упаковал свой код в маленький Github Repo Таким образом, вы можете играть в доме самостоятельно! (Имейте в виду, что предварительное условие на вашем устройстве установлено Node.js).

Определение

Чтобы действительно понять, что происходит, давайте определим, что мы хотим:

Мы хотим иметь эффективный способ надежно делиться данными между пользователями и сервером.

Эта функциональность может произойти через различные механизмы, хотя преобладающий метод, который я знаю, это через WebSockets. WebSockets используются для отправки пакетов данных в свой сервер и с вашего сервера и являются совместимым, совместимым, ориентированным на браузер для отправки и получения данных, как между пользователями, так и между серверами. Он может быть реализован рядом с легкостью, используя Node.js с помощью Socket.io. Должны ли вы желать добавить веб-сайты в ваш Apache Cordova, iOS или Android-проекты, они тоже там были покрыты.

Создание нашего проекта

Давайте получим задачу с пути:

mkdir mmserver && cd mmserver
npm init
npm install express  - -  save
npm install socket.io - - save

Боковая заметка № 1: Отсюда я обнаружил, что лучший подход должен был начать с существующего шаблона в качестве основы и работать на пути. Первоначально я собирался использовать Socket.IO Базовый пример чата В качестве руководства, но обнаружил, что его примеры реализации будут слишком минимальными для моего уровня желания и симпатии для расшифровки. Выкл в Github! В моменты, я нашел это Github repo. Разъем Socket.io Чат более подходит – я особенно понравился, что он дал пример «х … набрал» пример, который по сути, в реальном времени связи между сервером и клиентом (ыми).

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

• А GameCollection «Основной объект», который содержит все данные игровых сеансов
• Средство для создания объекта игры и добавить его в мастер-коллекцию
• И средство, чтобы позволить пользователям взаимодействовать друг с другом и игровым объектом

Как только все это сделано, мы вместе наша система совместной работы, которую мы сделаем по: Создание состояния «Открытое/закрытое» для игрового объекта (Когда пользователь хочет присоединиться к этой игре, мы либо допустим их или нет).

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

Развертывая, найденное выше, у меня есть быстрое и грязное и грязное регистрационное имя пользователя и система чата, которая может быть изменена по мере необходимости (мы, возможно, Refactor и удалите код до конца).

После того, как у вас установлен базовый сервер, давайте начнем строить несколько новых структур, в частности, объект стартера игры. Если вы не представляете, что происходит в том порядке … пришло время сделать обзор в любом случае.

Давайте сделаем несколько шагов назад

Это приложение использует Node.js, который в термине Mayman означает JavaScript, множество JavaScript-зависимых библиотек и процессы сборки и т. Д., И т. Д.

Независимо от того, какая бы настройка вы используете для редактирования вашего кода – используйте этот совет и сэкономьте некоторое время:

npm install nodemon -g -- save

Теперь создайте отдельный файл с именем GuardFile и заполните его следующим в соответствии с указаниями Кевин Викрей :

guard 'livereload' do
  # We watch the client.
  watch(%r{dev/client/.+\.(css|js|ejs|html)})

  # We watch the server. Path to customize for your case.
  watch(%r{dev/server/start.log})
end

Наконец, добавьте следующие строки в Index.js к вершине в начальных объявлениях VAR:

var fs = require('fs');  

Кроме того, добавьте это на сервер.листен (ближняя строка 10):

fs.writeFile(__dirname + '/start.log', 'started'); 

Включите эту строку, чтобы ваш сервер.листен должен выглядеть как:

server.listen(port, function () {
  console.log('Server listening at port %d', port);
  fs.writeFile(__dirname + '/start.log', 'started'); 
});

Теперь просто запустите odemon index.js. Это сделает сервер перезагрузить каждый раз, когда вы редактируете файлы, которые удобны вместо того, чтобы перезагрузить и перезапустить каждый пропуск.

Требуемые файлы

Есть три основных файла, которые сделают наш проект все работать вместе.

1. index.js.

У нас есть файл с именем index.js – это код сервера. Этот файл – это место, где вы удерживаете свои данные сервера, «маршруты», различные события сокета, которые будут запускают и выделять или широковещать данные вам и/или другим пользователям.

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

2. Main.js.

Как мы находимся на теме клиентской логики, давайте перейдем к этому следующему файлу: main.js.

Я не согласен с запутанным выбором имени, но по сути, это код, обращенный к клиенту, который выставляется в нижней части тега разметки тела в файле Index.html

Боковая заметка № 2: Я считал, что я принимал игру сейчас на месте, но вместо этого будет строить эту игру с вами через серию, чтобы мы могли применить основополагающее обучение и действительно иметь что-то показать на усилия, которые вы проводите и реализуете, что Мы обсуждаем здесь.

3. HTML

Наконец, третий файл – файл разметки, мы с любовью ссылаемся как HTML. Файл HTML содержит структуры RAW Markup, которые мы добавляем данные.

Добавление элементов

Давайте начнем с нескольких мелких деталей.

Откройте файл index.html и добавьте в Геймбуттоны Элемент div и пару кнопок! Убедитесь, что на пару классы Пока вы на этом, так что у нас есть некоторые точки крючка для этих кнопок, которые будут обрабатываться нашей клиентской стороне JavaScript. Удалите CSS, и вы можете увидеть фактическую разметку, которая простой

    

       Create Game
    

Представьте, что эти три файла, которые я упоминаю выше, играют в игру в телефоне – сервер создает сообщение, которое передается клиентскому коду, который затем получает вывод, используя этот файл разметки HTML. Итак, теперь мы хотим поговорить с сервером, мы используем эти файлы Markup, чтобы отправить сообщение с интерфейсом клиента, этот клиентский интерфейс (через простоту WebSockets и Socket.io) сохраняет открытое соединение с нашим сервером, чтобы сообщения о данных можно передавать взад и вперед.

Давайте начнем делать немного работы на клиенте -ide код, открыть main.js. Прямо вокруг верхней, ближней строки 18, продолжайте и добавьте в объекты селектора jQuery для этих кнопок, которые мы создали:

  var $createGame = $('.createGame'); 
  var $joinGame = $('.joinGame'); 

Я быстро изменил линии 33-35 на что-то еще вдоль линий игрового лобби.

Далее возьмите быстрый взгляд на строку 52, это дно SetuSername Функция – посмотрите, как у него есть « Socket.emit («Добавить пользователя», имя пользователя); ? Это самый простой пример вызовов сокетов, отсюда, вы бы встроили дополнительные функции в месту этого Имя пользователя там и уменьшить соответственно.

Теперь прокрутите //Нажмите События В строке 224, к нижней части этого раздела добавьте в этот маленький фрагмент:

  $createGame.click(function () {
    sendGame();

  })

Мы принимаем наш селектор jQuery, нанесите его listerer, затем, если щелкнул, вызывая sendgame функция.

Боковая заметка № 3: что $ В передней части моей переменной не требуется использование обработчиков jQuery Click; Это просто конвенция кодирования, чтобы помочь другим кодам-рецензентам коррелировать, что указано, что VAR является зависимой jQuery.

Где sendgame функция? Давайте идти вперед и сделаем это. Прокрутите до нижней части файла и чуть выше закрытия }); и вставить в:

  socket.on('gameCreated', function (data) {
    console.log("Game Created! ID is: " + data.gameId)
    log(data.username + ' created Game: ' + data.gameId);
    //alert("Game Created! ID is: "+ JSON.stringify(data));
  });

function sendGame(){
  socket.emit('makeGame');
};

Здесь здесь много, так что давайте посмотрим на это в обратном порядке. Снизу вверх:

Мы сделали нашу функцию sendgame () И все, что он делает, это уволить небольшое излучение события на сервер. Давайте пойдем вперед и объясним, что на английском языке – Socket.io (из моих наблюдений) имеет три разных реле. Это означает, что существует только три различных способа, которые могут быть переданы сообщения:

1. Только ты и сервер ( Socket.emit )
2. Сообщение от точки для всех, кроме вас ( Socket.broadcast.emit )
3. Все получают сообщение, вы, сервер и все широковещательные пользователи ( io.emit )

Чтобы получить или слушать сообщения, как клиент, и код сервера зависят от Socket.on слушать различные излучаемые и вещательные события. sendgame По сути, «излучает» один запрос сокета на сервер с событием Макияж Что мы создали здесь на месте. Точно так же больший кусок кода выше – это код приемника для выполнения всякий раз, когда другое событие GameCreated испускается с сервера к конкретному клиенту этого пользователя.

У меня здесь есть три строки кода, с одним комментарием. Закомментированный код просто предоставит пользователю предупреждающую оповещения о школе, чтобы нажать, я положил Json.stringify Таким образом, я мог легко ссылаться на любой, возможно, излучаемые методы объекта, чтобы поймать любые проблемы при тестировании. Журнал () Функция, включенная в демоверсию (ближняя строка 75 на нашей клиентской стороне main.js) идеально подходит для нас, чтобы использовать для отображения сообщений на экран, а не просто скрыто в просмотру журнала консоли (щелкните правой кнопкой мыши элемент проверки> Console) »

Боковая заметка № 4: Кстати, как вы можете видеть, метод, с помощью которого вы цепите розетки, проходит через обертывание функции вне кода, который вы собираетесь выполнить при удаленном исходном событии.

Быстрое повторение

Чтобы просмотреть то, что мы сделали до сих пор:

• Модифицировал index.html, чтобы добавить кнопки
• Модифицировал JavaScript на стороне клиента, чтобы прослушать эти кнопки и отправлять события кода на стороне сервера, когда они делают.

Время построить игровой сервер!

Строительство игрового сервера

Откройте index.js и добавьте следующие строки вблизи верхней части файла чуть ниже маршрутизации Express вблизи линии 15:

// Entire GameCollection Object holds all games and info

var gameCollection =  new function() {

  this.totalgameCount = 0,
  this.gameList = {}

};

Потому что мы хотим иметь один единый экземпляр, который входит все игры на нашем сервере, и мы не хотим, чтобы дублировать копии этого примера, я настроил GameCollection как Объект Singleton (Так что мы не можем дублировать копии этого GameCollection Объект, который доставляет все игры, созданные на сервере). К нижней части файла, незадолго до закрытия IO.ON} Мой был вокруг линии 90, но твоя скорее всего надумай!). Добавьте следующее:

  //when the client  requests to make a Game
  socket.on('makeGame', function () {

     var gameId = (Math.random()+1).toString(36).slice(2, 18);
     console.log("Game Created by "+ socket.username + " w/ " + gameId);
     gameCollection.gameList.gameId = gameId
     gameCollection.gameList.gameId.playerOne = socket.username;
     gameCollection.gameList.gameId.open = true;
     gameCollection.totalGameCount ++;

    io.emit('gameCreated', {
      username: socket.username,
      gameId: gameId
    });

  });

Давайте объясним, что делает этот код с верхнего вниз:

• Мы слушаем любой Макияж событие испускается.
• Затем мы генерируем Имид Использование Math.random +1 (чтобы избежать редкого обстоятельства, где мы вытягиваем ноль, а идентификатор возвращается как бланк).
• Мы используем ToString (36) выбирать случайным образом от 0 до нижнего Z, то мы используем ломтик для обозначения всего после первой цифры после десятичного времени (18 на конце необязательно, я только что сделал это, чтобы иметь постоянную 16 цифр уникальный ID для Игровые объекты. Я не вижу, как я работаю в C10K C10K. Затем мы повторяемся на выходе сервера, что игра была инициирована пользователем «X» вместе с генерируемым Имид
• Отказ

Если вы зажигаете odemon index.js на терминале, чтобы загрузить свой сервер, затем просмотрите localhost: 3000 В Chrome, Safari или Firefox со своими изменениями, представленными до сих пор, у вас должен быть очень простой, все, функциональный игровой сервер с несколькими кнопками – но только один такого рода работ. Надеюсь, вы заметите проблему достаточно скоро:

Обертывание

В настоящее время можно создавать неограниченные игры, на команду, en masse. Определенно не хороший пользовательский опыт – представьте себе, что некоторые Smart Cookie построить модифицированный пока цикл для пожарных игр и убить ресурс сервера. Кроме того, у нас есть единое зрелище GameCollection Объект, но у нас нет значит взаимодействовать с ним в данный момент, кроме добавления к нему – это было бы больше ценности для нас, если бы мы могли бы сначала ограничить количество доступных игр для создания за подключенным пользователем через использование некоторых серверов -Очета. И во-вторых, если бы мы могли бы как-то увидеть глобальные GameObject данные в лобби.

Как только эти шаги будут обрабатываться, мы можем перейти к мясу проекта – создание игровых объектов, чтобы добавить в объект Master Collection, а затем с использованием генератора случайных номеров, выбирая и набирая доступную игру, позволяющую игроку два, которые будут связаны с Объект игры с игроком.

С этими критическими частями, определяемыми, мы можем настроить внешние поведения, такие как: « Что мы делаем, если пользователь отключится от игрового сервера? », « Как мы можем превратить его в фактическую систему совпадения ? “,” Как мы сохраняем сохранение данных (то есть сохраненные имена пользователей/пароли/история игры/ранга/т. Д.)?)? “

В Следующий сегмент Я обсудим, как обрабатывать проверку сервера, чтобы пользователи не могли создавать игры бесконечно, уничтожить GameObjects в команде или когда пользователь отключается, и трансляция, и как разрешить пользователям присоединиться к той же игровые объекты.

Читайте часть 2 Здесь – постройте многопользовательское приложение с помощью Socket.IO (часть 2): Создание игрового игрового сервера

Авторское био.

Frankenmint – это технофил с склонностью к биткойн, разбирается в разработке веб-сайтов и программного обеспечения.