Автор оригинала: Yomi Eluwande.
Как разработчики, развертывание приложений и веб-сайтов иногда могут быть точкой боли, и мы, как правило, предпочитаем решения, которые легко и масштабируются.
Хостинг решения, которые требуют Sshing и необходимости создавать конфигурации и миллион вещей, прежде чем развертывать Can (и Will), во время некоторого времени. Это где хостинг Firebase приходит.
Мы построим статический веб-сайт и разверните его в Интернет, используя хостинг FireBase. Мы собираемся построить многопользовательскую игру в реальном времени, игра собирается работать как популярная многопользовательская игра Quizup Отказ
Вот как игра собирается работать. Вопросы будут получены из лирики от Гамильтон: американский музыкальный И пользователи должны правильно ответить на имя персонажа в мюзикле, который пел эту линию. Игра тестирует знание пользователя Hamilton и пользователей могут играть так долго, как им нравится. Увидеть демонстрацию ниже.
Наша игра будет построена с Vue.js и будет использовать Pusher События клиента и Наличие каналов Чтобы убедиться, что шаг пользователя показан в реальном времени.
Что такое каналы присутствия?
Каналы присутствия Pusher выставляют дополнительную особенность осведомленности о том, кто подписывается на этот канал. Это дает разработчикам возможность создавать такие функции, как чаты, сотрудники по документу и многопользовательские игры.
Все каналы присутствия должны быть подписаны с префиксом Присутствие- И, как и в частных каналах HTTP-запрос на конфигурируемый URL аутентификации, чтобы определить, есть ли текущий пользователь разрешений для доступа к каналу.
Что такое клиентские события?
Клиентские события – это просто способ, которым события могут быть вызваны непосредственно с сторон клиента в отличие от срабатывания с сервера Backend. Клиентские события используются в случаях, когда некоторые действия могут не понадобиться валидации или настойчивости и могут перейти непосредственно через разъем для всех других клиентов, подключенных к каналу.
В нашем случае мы используем клиентские события для обновления пользователя в текущей оценке другого пользователя, воспроизводя игру.
События клиентов имеют ряд насильственных ограничений, чтобы убедиться, что пользователь подписывается на канал, является аутентифицированным пользователем:
- Клиентские события должны быть включены для приложения. Вы можете сделать это в Настройки Вкладка для вашего приложения в панели инструментов Pusher.
- Пользователь должен быть подписан на канал, на котором происходит событие.
- Клиентские события могут быть вызваны только на Частный и Присутствие каналы, потому что им требуется аутентификация.
- Клиентские события должны быть префиксированы
клиент-Отказ События с любым другим префиксом будут отклонены сервером Pusher, поскольку будут отправлены события на каналы, на которые клиент не подписан.
Вы можете прочитать больше на события клиента, пройдя через Документация Отказ
Настройка толкателя
Войдите в свой Приборная панель (или Создать Free аккаунт Если у вас его еще нет) и создайте новое приложение. Скопируйте свой app_id , ключ , Секрет и кластер и хранить их где-то, как мы будем нуждаться в них позже. Еще кое-что. В вашей приборной панели перейдите на вкладку «Настройки приложений» и убедитесь, что Включить клиентские события Флажок проверен. Это позволяет клиентам общаться напрямую друг с другом.
Инициализация приложения Vue.js
Vue.js – это предпочтительная структура JavaScript для создания игры из-за своей популярности и низкого барьера для начала работы. Есть некоторые учебные пособия Vue.js на Pusher, который вы можете прочитать здесь , здесь и здесь Отказ
Мы собираемся использовать Vue-Cli Проект лесов Vue.js. Vue-Cli это простое CLI для проектов лесов Vue.js. Он отправляется с множеством шаблонов, таких как WebPack , Брасифицировать , PWA и простой Отказ Мы установим Vue-Cli И затем используйте его для загрузки приложения, используя шаблон WebPack, со следующими командами:
npm install -g vue-cli vue init webpack hamiltonlyrics
Это создает приложение Vue.js внутри папки с названием гамильтонрики Отказ Перейдите в папку и запустите команду NPM запустить dev Чтобы увидеть приложение Vue.js.
Настройка сервера Node.js
Как объяснено выше, клиентские события требуют аутентификации, чтобы убедиться, что пользователь подписан на канал. Поэтому мы собираемся создать сервер Node.js, чтобы клиентские события могли иметь маршрут аутентификации.
Давайте установим модули, которые нам понадобится для сервера Node.js.
npm i express body-parser pusher
В корте каталога проекта создайте файл с именем server.js и введите следующий код:
// server.js
const express = require('express')
const path = require('path')
const bodyParser = require('body-parser')
const app = express()
const Pusher = require('pusher')
const crypto = require('crypto')
//initialize Pusher with your appId, key and secret
const pusher = new Pusher({
appId: 'APP_ID',
key: 'APP_KEY',
secret: 'APP_SECRET',
cluster: 'YOUR_CLUSTER',
encrypted: true
})
// Body parser middleware
app.use(bodyParser.json())
app.use(bodyParser.urlencoded({ extended: false }))
// The code below helps to fix any potential CORS issue.
app.use((req, res, next) => {
// Website you wish to allow to connect
res.setHeader('Access-Control-Allow-Origin', '*')
// Request methods you wish to allow
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE')
// Request headers you wish to allow
res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type')
// Set to true if you need the website to include cookies in the requests sent
// to the API (e.g. in case you use sessions)
res.setHeader('Access-Control-Allow-Credentials', true)
// Pass to next layer of middleware
next()
})
// Index API route for the Express app
app.get('/', (req, res) => {
res.send('Welcome')
})
// API route used by Pusher as a way of authenticating users
app.post('/pusher/auth', (req, res) => {
let socketId = req.body.socket_id
let channel = req.body.channel_name
// Generate a random string and use as presence channel user_id
let presenceData = {
user_id: crypto.randomBytes(16).toString('hex')
}
let auth = pusher.authenticate(socketId, channel, presenceData)
res.send(auth)
})
// Set port to be used by Node.js
app.set('port', (5000))
app.listen(app.get('port'), () => {
console.log('Node app is running on port', app.get('port'))
})
В блоке кода выше толкатель инициализируется с помощью учетных данных приборных устройств. /pusher/auth Маршрут также создан.
Теперь мы можем просто запустить Node Server.js И приложение Node.js должно быть вставать и работает. Прежде чем мы продолжим, давайте добавим команду выше к существующему Сценарии объект в Package.json Файл, поэтому нам не нужно вводить команду каждый раз. Откройте Package.json Файл и редактировать dev линия внутри Сценарии объект с тем ниже.
"dev": "nodemon server.js & node build/dev-server.js"
Строить игру
Давайте начнем на создание игры. Мы будем работать с двумя файлами на протяжении всего курса этого учебника, а Home.vue Файл и A Channeldetails.vue файл.
Перейдите к Компоненты папка внутри SRC Папка и создать новый файл под названием Channeldetails.vue Отказ Это будет содержать код JavaScript, который устанавливает соединение с толчкой от сторон клиента. Откройте файл и введите следующий код:
Если вы используете ESLINT, вы должны получать предупреждение о том, что библиотека Pusher JS не была установлена. Это можно установить, запустив эту команду NPM I PUSHER-JS Отказ Так что там происходит там?
Во-первых, толкатель импортируется, и соединение устанавливается с использованием учетных данных, таких как App_key, и кластер. AuthencePoint добавляется в экземпляр пушки. AuthencePoint – это толкатель конечной точки, использует для аутентификации пользователей.
Во-вторых, существуют две функции выше, которые экспортируются. Первая функция GetPresenceId () Проверяет адресную строку браузера для параметров URL, а затем добавления Присутствие к результату. Это сделано так, чтобы имя канала всегда будет иметь префикс Присутствие- Так как мы используем Наличие каналов Отказ
Вторая функция использует результат GetPresenceId () Функция и использует его, чтобы подписаться на канал (канал присутствия, чтобы быть конкретным).
Следующее, что нужно сделать, это начать писать код для самой игры. Откройте App.vue Файл внутри SRC Папка и убедитесь, что его контент похож на код ниже:
Перейдите к SRC/Компоненты каталог, и вы должны увидеть Hello.vue файл. Вы можете либо удалить этот файл или переименовать на Home.vue Как нам нужно, чтобы Home.vue Файл внутри папки компонентов. Откройте файл и введите/замените код ниже:
В блоке кода выше мы создали основу для игры и как она собирается работать. Внутри <СТИЛЬ> Тег и внутри