«Совместная работа в режиме реального времени — это будущее работы. Это позволит людям работать вместе более эффективно и продуктивно, независимо от их местонахождения. Это также поможет преодолеть разрозненность и создать более совместную рабочую среду».
~ Тим Бернерс-Ли
Vue.js, известный своим доступным и универсальным характером, за последние несколько лет неуклонно растет в популярности. Vue 3 предоставляет разработчикам еще более мощные инструменты. Одним из таких инструментов является Pinia, библиотека управления состоянием для Vue.js, которая использует Composition API Vue 3 для обеспечения более простого и безопасного интерфейса, чем Vuex.
В этом руководстве мы рассмотрим, как включить Pusher с Pinia в веб-приложение Vue 3. Pusher — это сервис для общения в режиме реального времени. Обеспечивая изменения состояния приложения в режиме реального времени, эта комбинация может предложить очень отзывчивый пользовательский интерфейс.
Зачем использовать такой сервис, как Pusher?
Существуют различные преимущества использования такой службы, как Pusher, по сравнению с добавлением WebSockets непосредственно на ваш сервер Node.js:
1. Простота. Простой API Pusher скрывает проблемы общения в реальном времени. Таким образом, программисты могут сосредоточиться на функциях программного обеспечения, а не на протоколах связи.
2. Масштабируемость. Управление несколькими соединениями WebSocket может быть проблематичным по мере роста вашей программы. Pusher упрощает управление соединениями по мере масштабирования вашей программы.
3. Кроссплатформенная поддержка: SDK Pusher поддерживают веб, iOS, Android и многое другое. Это упрощает интеграцию с платформой в режиме реального времени.
4. Механизмы отката. Без WebSockets управление откатами может оказаться сложной задачей. Pusher автоматически возвращается к методам на основе HTTP.
5. Дополнительные функции: Аутентификация, присутствие пользователя и история сообщений могут занять некоторое время, чтобы добавить их к голым веб-сокетам, но у Pusher они есть.
6. Надежность и техническое обслуживание: Pusher возлагает на третью сторону, имеющую опыт работы в этой области, ответственность за надежность, время безотказной работы и техническое обслуживание. Это снижает рабочую нагрузку и ресурсы.
Pusher и подобные сервисы стоят денег и ограничивают низкоуровневое управление, но многие разработчики считают, что преимущества скорости, масштабируемости и обслуживания перевешивают эти недостатки. Потребности и ресурсы вашего проекта решают это.
Настройка Vue 3 и Pinia
Прежде чем мы сможем начать интеграцию Pusher, нам нужно настроить приложение Vue 3 и установить Pinia. Начните с создания нового проекта Vue 3, используя
vue create my-appb
В процессе создания убедитесь, что вы выбрали Vue 3. Когда ваше приложение будет готово, перейдите в каталог проекта и установите Pinia:
cd my-app npm install pinia
После установки Pinia настройте магазин Pinia в файле main.js:
import { createPinia } from 'pinia';
import { createApp } from 'vue';
import App from './App.vue';
const app = createApp(App);
app.use(createPinia());
app.mount('#app');
Создание магазина Pinia
Теперь, когда Pinia установлена, мы можем создать хранилище для управления состоянием нашего приложения. В этом примере мы создадим простое хранилище, которое отслеживает сообщения в приложении чата.
// src/store/chat.js
import { defineStore } from 'pinia';
export const useChatStore = defineStore({
id: 'chat',
state: () => ({
messages: [],
}),
actions: {
addMessage(message) {
this.messages.push(message);
},
},
});
Настройка толкателя
Теперь, когда у нас есть приложение Vue 3 и магазин Pinia, пришло время интегрировать Pusher. Во-первых, вам нужно установить клиент Pusher JavaScript:
npm install pusher-js
Далее вам нужно инициализировать клиент Pusher. Для этого вам понадобятся учетные данные вашего приложения Pusher (идентификатор приложения, ключ и секрет), которые вы можете найти на панели инструментов Pusher.
import Pusher from 'pusher-js';
const pusher = new Pusher('YOUR_APP_KEY', {
cluster: 'YOUR_APP_CLUSTER',
encrypted: true,
});
Интеграция Pusher с Pinia
Наконец, мы можем интегрировать Pusher с нашим магазином Pinia. Мы подпишемся на канал Pusher и привяжемся к событию, которое будет обновлять наше состояние всякий раз, когда будет получено новое сообщение.
В вашем файле хранилища Pinia (src/store/chat.js) импортируйте экземпляр Pusher и используйте его внутри хука жизненного цикла created:
// src/store/chat.js
import { onCreated } from 'pinia';
import { pusher } from './pusher'; // assuming you exported the pusher instance from its file
export const useChatStore = defineStore({
id: 'chat',
state: () => ({
messages: [],
}),
actions: {
addMessage(message) {
this.messages.push(message);
},
},
created() {
const channel = pusher.subscribe('my-channel');
channel.bind('new-message', (data) => {
this.addMessage(data.message);
});
Благодаря этому нам удалось интегрировать Pusher с магазином Pinia в приложении Vue 3. Эта настройка позволяет создавать реактивные веб-приложения с обновлениями в реальном времени, обеспечивая удобный и привлекательный пользовательский интерфейс. Стоит отметить, что это всего лишь базовый пример, и вы можете изучить более сложные варианты использования, такие как обработка нескольких каналов или событий и сложные обновления состояния. Сочетание Composition API Vue 3, Pinia и Pusher предлагает мощный набор инструментов для разработки сложных веб-приложений в реальном времени. Удачного кодирования!
Какие примеры веб-приложений можно создать с помощью Vue3, Pinia и Pusher?
Vue 3, Pinia и Pusher можно использовать для создания множества веб-приложений с возможностями работы в реальном времени и эффективным управлением состоянием. Некоторые примеры:
1. Чат-приложения: самое простое использование Pusher. Создайте приложение для чата в реальном времени. Pinia управляет состоянием разговора, включая сообщения, пользователей и другие данные.
2. Инструменты для совместной работы: этот стек может создавать приложения, такие как Google Docs, где несколько человек могут одновременно обновлять документ. Vue 3 и Pinia обрабатывают пользовательский интерфейс и состояние, а Pusher обрабатывает синхронизацию данных между пользователями в реальном времени.
3. Панели мониторинга в реальном времени: Pusher может отправлять обновления клиенту, а Vue 3 с Pinia может отображать состояние и управлять им.
4. Простые многопользовательские интернет-игры выигрывают от этого стека. Vue 3 и Pinia обрабатывают пользовательский интерфейс и состояние игры, а Pusher обрабатывает действия игрока в реальном времени, чат и состояние.
5. Каналы социальных сетей в режиме реального времени: пользователи могут видеть новые сообщения, комментарии, отметки «Нравится» и делиться ими. Pusher отправляет изменения клиентам в режиме реального времени, а Vue 3 с Pinia обрабатывает пользовательский интерфейс и состояние канала.
6. Приложения для электронной коммерции. Обновления в режиме реального времени могут отображать доступность продуктов, корректировку цен, добавление новых продуктов или даже имитировать аукцион в реальном времени в приложениях для электронной коммерции. Pusher будет работать в режиме реального времени, в то время как Vue 3 и Pinia займутся пользовательским интерфейсом и управлением состоянием.
Это всего лишь несколько примеров того, что вы можете создать с помощью Vue 3, Pinia и Pusher. Комбинация этих технологий открывает широкий спектр возможностей для создания веб-приложений с отслеживанием состояния в реальном времени.
об авторе
Джеймс Кингсли провел последние 15 лет, создавая программное обеспечение для сектора электронного обучения. Ему нравится изменять программное обеспечение, веб-сайты и приложения, чтобы заставить их делать то, для чего они не предназначены. Его компания GForce Learning выпустила ряд инструментов для разработки электронного обучения. ReviewMyElearning: наиболее эффективный метод сбора отзывов от малых и средних предприятий, членов команды, клиентов и т. д. Он использует свой опыт в качестве соучредителя GForce Learning для создания решений, адаптированных для Интернета, мобильных устройств и настольных компьютеров. Помимо электронного обучения, мы предлагаем решения для различных дополнительных отраслей. Node.js, Vue, Mongo, интеграция API, xAPI, SCORM и расширение готовых инструментов.
Вы можете связаться с ним в LinkedIn.
