Создайте приложение для чата в реальном времени с помощью Pusher и Vue.js

 async changeRoom({ commit }, roomId) { try { const { id, name } = await chatkit.subscribeToRoom(roomId); commit('setActiveRoom', { id, name }); } catch (error) { handleError(commit, error) } }, 

Затем перейдите в src/componenents/RoomList.vue и обновите раздел скрипта следующим образом:

 import { mapState, mapActions } from 'vuex' //... export default { //... methods: { ...mapActions([ 'changeRoom' ]), onChange(room) { this.changeRoom(room.id) } } } 

Если вы помните, мы уже определили @click="onChange(room)" в элементе b-list-group-item . Давайте протестируем эту новую функцию, щелкнув элементы в компоненте RoomList .

Ваш пользовательский интерфейс должен обновляться с каждым щелчком комнаты. Компоненты MessageList и UserList должны отображать правильную информацию для выбранной комнаты. В следующем разделе мы реализуем несколько функций одновременно.

Повторное подключение пользователя после обновления страницы

Возможно, вы заметили, что когда вы store/index.js некоторые изменения в store/index.js или обновляете страницу, вы получаете следующую ошибку: Cannot read property 'subscribeToRoom' of null . Это происходит потому, что состояние вашего приложения сбрасывается. К счастью, пакет vuex-persist поддерживает наше состояние Vuex между перезагрузками страницы, сохраняя его в локальном хранилище браузера.

К сожалению, ссылки, которые связывают наше приложение с сервером ChatKit, возвращаются к нулю. Чтобы это исправить, нам нужно выполнить операцию повторного подключения. Нам также нужен способ сообщить нашему приложению, что перезагрузка страницы только что произошла и что наше приложение должно повторно подключиться, чтобы продолжить нормальную работу. Мы реализуем этот код в src/components/ChatNavbar.vue . Обновите раздел сценария следующим образом:

 <script> import { mapState, mapActions, mapMutations } from 'vuex' export default { name: 'ChatNavBar', computed: { ...mapState([ 'user', 'reconnect' ]) }, methods: { ...mapActions([ 'logout', 'login' ]), ...mapMutations([ 'setReconnect' ]), onLogout() { this.$router.push({ path: '/' }); this.logout(); }, unload() { if(this.user.username) { // User hasn't logged out this.setReconnect(true); } } }, mounted() { window.addEventListener('beforeunload', this.unload); if(this.reconnect) { this.login(this.user.username); } } } </script> 

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

1. unload Когда происходит обновление страницы, вызывается этот метод. Сначала он проверяет состояние user.username . Если это так, это означает, что пользователь не вышел из системы. Состояние reconnect установлено в значение true.
2. mounted Этот метод ChatNavbar.vue каждый раз, когда ChatNavbar.vue только что закончил рендеринг. Сначала он назначает обработчик для прослушивателя событий, который вызывается непосредственно перед выгрузкой страницы. Он также выполняет проверку, если для state.reconnect установлено значение true. Если так, то процедура входа в систему выполняется, таким образом, повторно подключая наше приложение чата к нашей службе ChatKit.

Я также добавил функцию Logout из Logout , которую мы рассмотрим позже.

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

Отправка сообщений, обнаружение ввода пользователя и выхода из системы

Давайте начнем с реализации этих функций в src/chatkit.js , добавив следующий код:

 //... async function sendMessage(text) { const messageId = await currentUser.sendMessage({ text, roomId: activeRoom.id }); return messageId; } export function isTyping(roomId) { currentUser.isTypingIn({ roomId }); } function disconnectUser() { currentUser.disconnect(); } export default { connectUser, subscribeToRoom, sendMessage, disconnectUser } 

Хотя функции sendMessage и disconnectUser будут включены в экспорт модуля isTyping функция isTyping будет экспортироваться отдельно. Это позволяет MessageForm напрямую отправлять события ввода без использования хранилища Vuex.

Для sendMessage и disconnectUser нам нужно обновить хранилище, чтобы обрабатывать такие вещи, как обработка ошибок и уведомления о загрузке. Перейдите в src/store/actions.js и вставьте следующий код сразу после функции changeRoom :

 async sendMessage({ commit }, message) { try { commit('setError', ''); commit('setSending', true); const messageId = await chatkit.sendMessage(message); return messageId; } catch (error) { handleError(commit, error) } finally { commit('setSending', false); } }, async logout({ commit }) { commit('reset'); chatkit.disconnectUser(); window.localStorage.clear(); } 

Для функции logout из logout мы вызываем commit('reset') чтобы вернуть наше хранилище в исходное состояние. Это базовая функция безопасности для удаления информации пользователя и сообщений из кэша браузера.

Давайте начнем с обновления входных данных формы в src/components/MessageForm.vue для @input событий ввода, добавив директиву @input :

 <b-form-input id="message-input" type="text" v-model="message" @input="isTyping" placeholder="Enter Message" autocomplete="off" required> </b-form-input> 

Теперь давайте обновим раздел скрипта для src/components/MessageForm.vue чтобы обрабатывать отправку сообщений и отправку событий ввода. Обновите следующим образом:

 <script> import { mapActions, mapState, mapGetters } from 'vuex' import { isTyping } from '../chatkit.js' export default { name: 'message-form', data() { return { message: '' } }, computed: { ...mapState([ 'user', 'sending', 'error', 'activeRoom' ]), ...mapGetters([ 'hasError' ]) }, methods: { ...mapActions([ 'sendMessage', ]), async onSubmit() { const result = await this.sendMessage(this.message); if(result) { this.message = ''; } }, async isTyping() { await isTyping(this.activeRoom.id); } } } </script> 

И в src/MessageList.vue :

 import { mapState } from 'vuex' export default { name: 'message-list', computed: { ...mapState([ 'messages', 'userTyping' ]) } } 

Функция отправки сообщения теперь должна работать. Чтобы отобразить уведомление о том, что другой пользователь печатает, нам нужно добавить элемент для отображения этой информации. Добавьте следующий фрагмент в раздел шаблона src/components/MessageList.vue сразу после div message-group :

 <div class="user-typing"> <small class="text-muted" v-if="userTyping">@{{ userTyping }} is typing....</small> </div> 

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

Давайте закончим этот урок, реализовав последнюю функцию, logout . В нашем магазине Vuex уже есть необходимый код для обработки процесса выхода из системы. Нам просто нужно обновить src/components/ChatNavBar.vue . Просто свяжите кнопку Logout с обработчиком функции onLogout который мы указали ранее:

  <b-nav-item href="#" @click="onLogout" active>Logout</b-nav-item> 

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

Резюме

Теперь мы подошли к концу урока. API ChatKit позволил нам быстро создать приложение для чата за короткое время. Если бы мы создавали подобное приложение с нуля, это заняло бы у нас несколько недель, так как нам пришлось бы также детализировать серверную часть. Самое замечательное в этом решении то, что нам не нужно заниматься хостингом, управлением базами данных и другими проблемами инфраструктуры. Мы можем просто создавать и развертывать интерфейсный код на клиентских устройствах на веб-платформах, платформах Android и IOS.

Пожалуйста, ознакомьтесь с документацией, так как есть множество серверных функций, которые я не смог показать вам в этом уроке. Со временем вы можете легко создать полнофункциональное приложение для чата, которое может конкурировать с популярными продуктами чата, такими как Slack и Discord.