Вы одиноки в этот День святого Валентина? Проведите его в этом году, оставаясь в духе и создав приложение для быстрых знакомств, используя PubNub SDK и его библиотеку ChatEngine. Это может просто помочь вам найти свою вторую половину, и вы также научитесь использовать PubNub для создания чата нового поколения, который объединяет людей, заинтересованных в поиске любви.

Текущие приложения для знакомств сосредоточены на процессе сопоставления с использованием профилей на основе изображений; в этом руководстве вы узнаете, как создать приложение для знакомств, которое уделяет больше внимания чату в приложениях для знакомств, чтобы имитировать опыт быстрых знакомств в реальной жизни. Это руководство построено на идее, что текущие приложения для знакомств неправильно фокусируются на поиске партнеров с помощью статических изображений - это приложение загружает сообщения. Представьте, что вас поместили в комнату наедине с незнакомцем и у вас есть 5 минут на первое свидание. Хотя такие функции, как профили на основе изображений, алгоритмы сопоставления, интерфейс прокрутки и фильтрация на основе местоположения, являются важными частями приложений для знакомств, в этом руководстве основное внимание будет уделено инфраструктуре обмена сообщениями, где использование PubNub действительно выгодно.

Технический обзор

Бэкэнд этого приложения представляет собой простую службу Node.js, работающую на сервере Express. Благодаря мощным возможностям потоковой передачи данных в реальном времени PubNub устраняет необходимость в сложной серверной части. Общедоступный чат создается с помощью библиотеки чата нового поколения PubNub, ChatEngine, с использованием rooms, к которому могут подключаться не более двух Users . После того, как приложение соединяет двух пользователей с одним и тем же пользователем с помощью простой логики сопоставления возраста и пола, пользователи отправляют сообщения, используя emit события сообщений и сообщения PubNub, на которые пользователи подписываются и на которые публикуются. Это прекрасно работает с методом on ChatEngine, который может запускать логику через обещание, когда событие запускается (или генерируется). Через 5 минут или когда пользователь отключается, пользователи отключаются от чата ChatEngine, и у них появляется возможность поговорить со своим следующим матчем.

См. Репозиторий SpeedDating на github для всего приложения: https://github.com/lovdeep7/SpeedDating/

Поток пользователей

Следующее изображение представляет собой пошаговое путешествие пользователя, которое будет использовано для создания приложения для быстрых знакомств. Он использует 5 E пути клиента, чтобы отобразить процесс как с точки зрения потребителя, так и с технической точки зрения.

Entice: пользователь обращается к приложению, и начинается сеанс клиента

В этом руководстве мы будем создавать чат поверх службы Node.js. Если вы не работали с Node.js, это среда выполнения JavaScript, которая упрощает выполнение программ JavaScript с невероятной гибкостью из всех пакетов npm. Вы можете установить Node.js и npm отсюда: https://nodejs.org/en/download/ или через менеджер пакетов.

После установки узла и инициализации приложения узла через npm init включите пакеты Express.js, PubNub и ChatEngine в свой package.json.

{
  "name": "SpeedDating",
  "version": "1.0.0",
  "main": "app.js",
  "scripts": {
    "start": "node app.js"
  },
  "author": "LS",
  "license": "MIT",
  "engines": {
    "node": "11.x"
  },
  "dependencies": {
    "chat-engine": "0.9.21",
    "express": "^4.16.4",
    "pubnub": "^4.21.7"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/lovdeep7/SpeedDating.git"
  },
  "bugs": {
    "url": "https://github.com/lovdeep7/SpeedDating/issues"
  },
  "homepage": "https://github.com/lovdeep7/SpeedDating#readme",
  "description": "Find your Valentine with PubNub's ChatEngine"
}

В этом приложении Express будет использоваться как простой сервер поверх приложения Node. Благодаря мощным возможностям потоковой передачи данных в реальном времени PubNub устраняет необходимость в сложной настройке сервера. Чтобы запустить сервер Express в app.js, после включения сервера Express и HTTP (который будет запускать наше приложение локально) добавьте любые дополнительные перенаправления и начните прослушивание порта по вашему выбору.

app.use(express.static(__dirname));
app.get('/',function(req,res){
 res.sendFile(__dirname + '/home.html');
});
app.get('/create', function(req,res){
 res.redirect('/client.html');
});
...
http.listen(PORT,function(){
 console.log('Listening on port: ',PORT);
});

После того, как этот бэкэнд будет доступен для пользователя, создайте серию HTML-страниц, которые будут целевыми страницами, которые пользователь видит при доступе к сайтам. Не стесняйтесь проявить здесь свое творчество и сходите с ума от CSS. Примеры HTML-страниц можно посмотреть в репозитории SpeedDating на github. Обязательно включите все файлы сценариев, которые вы собираетесь использовать. Теперь вы можете запустить http-server в своем терминале, чтобы получить доступ к своему приложению в браузере.

Enter: пользователь создает профиль и отправляет данные на сервер

Сначала включите в свое приложение объекты PubNub и ChatEngine.

pubnub = new PubNub({
    publishKey : 'pub-c-your-pub-key',
    subscribeKey : 'sub-c-your-sub-key'
})
ChatEngine = ChatEngineCore.create({
    subscribeKey: 'pub-c-your-pub-key',
    publishKey: 'sub-c-your-sub-key'
});
*note, the pubnub initialization is not needed if ChatEngine is initialized.

Вы можете настроить и получить ключи PubNub отсюда: https://dashboard.pubnub.com/signup?

До сих пор мы не определяли пользователя. К счастью, ChatEngine имеет объект User, который подключается к глобальному чату.

let User1 = ChatEngine.connect('user');

Эта connect() функция вызовет $.ready функцию, которая позволит вам работать с ChatEngine и настроить объект, с которым может взаимодействовать клиент.

ChatEngine.on('$.ready', (payload) => {
 let me = payload.me;
...

На стороне клиента создайте функцию setUser(), которая обрабатывает данные профиля, введенные пользователем на этом этапе пользовательского потока, и отправляет эти данные обратно на сервер для создания этого нового профиля пользователя.

Вовлечение: размещение в комнатах ChatEngine и запуск таймера

Это приложение для знакомств будет использовать несколько различных потенциальных чатов с максимальной вместимостью 2 пользователя, чтобы имитировать процесс быстрых знакомств. В ChatEngine создать чат-комнату очень просто:

chatRoom = new ChatEngine.Chat('room '+room);

Чтобы определить номер комнаты, в которую помещаются пользователи, вы можете выбрать в зависимости от возраста или пола две точки данных, которые пользователь предоставляет нам на странице профиля. Хотя наше приложение чата будет содержать некоторую простую логику, в которой вас случайным образом помещают в комнату с противоположным полом в вашей возрастной группе, она может стать более сложной с более тщательным профилем и процессом сопоставления (подумайте: Tinder, Bumble и т. Д.) .

Мы также хотим назначить таймер для каждой из этих комнат, когда количество пользователей комнаты достигнет 2.

Выход: публиковать и подписываться на сообщения PubNub в чате

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

chatRoom.emit('msg', {message: msg, name: name, room: room});

С другой стороны, чтобы подписаться на любые msg события, вы можете использовать метод on() и указать msg в качестве типа события (первый параметр).

chatRoom.on('msg', function(data){ 
      //Send message to everyone in room
      chatRoom.emit('newmsg', data);
      console.log(users);
 });

Теперь, отправив сообщение в чате, другой пользователь сможет получить его и ответить на него. Скоростное свидание началось!

Расширить: сбросить чат и войти в новый сеанс

Чат будет сброшен, когда пользователь отключится или истечет 5-минутный таймер. В первом случае будет опубликовано leftroom событие. В качестве альтернативы также можно использовать $.offline.leave event.

function disconnect(){
   ChatEngine.emit('leftRoom', {name: name, room: room}); 
   reset();   
}

После этого события чат должен быть очищен и перезагружен.

Во втором случае таймер истекает и свидание подходит к концу. Следуйте аналогичной логике, чтобы очистить чат через 5 минут (300 000 миллисекунд).

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

Вот и все! 🚀 Вы успешно создали основу для простого приложения для быстрых знакомств, которое использует ChatEngine PubNub для создания мощного чата. Теперь вы можете продолжить разработку этого приложения, чтобы добавить дополнительные функции, возможности взаимодействия в чате и расширить другие компоненты приложений для знакомств.

С Днем Святого Валентина! ❤️