Если вы только сейчас настраиваетесь, обязательно прочтите Часть 1, Часть 2 и Часть 3. Не стесняйтесь просматривать полный исходный код и играть в игру!
Если вы прочитали первые несколько частей этой серии, теперь вы должны иметь твердое представление о шагах, необходимых для создания приложения с отслеживанием состояния и реагирования с использованием Vue и Vuex. У вас также должен быть сервер Flask с поддержкой веб-сокетов, готовый начать общение с клиентом в режиме реального времени с помощью Flask-SocketIO. Нам просто не хватает одного элемента - ткани, с помощью которой можно подключить Vue к нашему серверу.
Настроить SocketIO-клиент так же просто, как инициализировать соединение, настроить прослушиватель и создать событие. Для начала приема сообщений не требуется генерировать событие - потребитель может просто подключиться и прослушать, чтобы начать использовать веб-сокет, пока сервер генерирует события. Однако для нашего клиента типично отправлять сообщения на наш сервер, и именно здесь в игру вступает передача событий. Если мы попытаемся сравнить это с моделью RESTful, генерируемое событие будет похоже на GET или POST, а событие, потребляемое слушателем, может быть похоже на наш ответ. Конечно, эти две системы нельзя сравнивать напрямую, поскольку веб-сокеты позволяют нашему серверу отправлять сообщения нашему клиенту, а наш клиент может отправлять сообщение на сервер без ответа. Веб-сокеты - отличная альтернатива REST в определенных обстоятельствах, но REST по-прежнему имеет свое место в стандартной модели ресурсов.
Vue + Vuex ❤ SocketIO
Заставить Vue или Javascript в целом общаться с нашим сервером Flask-SocketIO так же просто, как импортировать клиент SocketIO JS и настроить наше соединение. В стандартном проекте Vue нам нужно будет настроить этого клиента для одного из событий жизненного цикла, такого как created, а затем настроить некоторые прослушиватели и эмиттеры. К счастью, существует плагин Vue Vue-Socket.IO, который помогает упростить этот процесс. Эта библиотека добавляет для нас хуки жизненного цикла для регистрации слушателей и поддерживает интеграцию с Vuex для передачи наших сообщений сокета прямо в наш централизованный диспетчер состояний. Для начала нам нужно установить этот пакет.
npm install vue-socket.io --save
В файле main.js импортируйте клиент Socket.IO и настройте плагин с помощью URL-адреса подключения и нашего хранилища Vuex.
В этом примере URL-адрес подключения будет использовать тот же хост, что и window. Поэтому, если мы запускаем сервер разработки на http://localhost:8080, наш клиент попытается подключиться к этому хосту. Поскольку мы передаем нашу переменную хранилища Vuex инициализатору плагина, Vue-SocketIO вонзится в наше хранилище и разрешит динамические прослушиватели на основе имен мутаций. Мы скоро рассмотрим это подробнее.
Использование в компонентах Vue
Когда мы запустили Vue.use(VueSocketio, `//${window.location.host}`, store), произошло одно важное событие - плагин расширил цепочку прототипов Vue и сделал свой объект сокета глобально доступным. Это позволяет нам легко генерировать события из любого места в нашем проекте Vue, вызывая this.$socket.emit. В следующем примере это демонстрируется с помощью кнопки, которая отправляет сообщение.
Как видите, для отправки сообщения нашему серверу потребовалась только одна дополнительная строка благодаря экземпляру глобального сокета.
Получение сообщений
Теперь, когда наш клиент может разговаривать с нашим сервером, мы также хотим, чтобы он прослушивал входящие сообщения. Как и в нашем стандартном примере веб-сокета, нам просто нужно настроить прослушиватель с нашим клиентом SocketIO. Давайте возьмем за основу приведенный выше пример и послушаем ответ сервера на том же канале.
Во-первых, мы должны инициализировать слушателя - это делается в ловушке жизненного цикла created, поэтому, как только наш компонент будет создан, он начнет прослушивание. Затем мы нажимаем на объекте this.$options.sockets функцию обратного вызова. Этот sockets объект отслеживает всех наших слушателей. Под капотом Vue-SocketIO считывает все значения в этом объекте и регистрирует слушателей. Точно так же, когда слушатель удаляется, он отменяет регистрацию слушателя.
Добавление Vuex в микс
Такая настройка слушателей отлично подходит для простого проекта или разовых слушателей. Однако что, если мы хотим использовать эти данные в нескольких компонентах? Типичный ответ - «Использовать Vuex», но чтобы использовать Vuex, нам нужно настроить слушателей и использовать мутации и действия для хранения данных, верно? Неправильный. Vue-SocketIO упрощает интеграцию ответов сокетов с центральным состоянием.
Поскольку мы передали нашу переменную хранилища инициализатору плагина, Vue-SocketIO легко обрабатывает события сокетов и может автоматизировать хранение данных во Vuex.
Зарегистрировать слушателя с помощью Vuex так же просто, как добавить мутацию с префиксом SOCKET_. Текст после этого префикса - это название нашего канала, который мы хотим слушать. Чтобы преобразовать слушателя из нашего предыдущего примера, который слушал канал hello_world, мы просто создаем мутацию с именем SOCKET_HELLO_WORLD. Ответ нашего сервера на наше сообщение теперь может быть передан другим нашим компонентам!
Заключение
Любое приложение, которое требует обмена данными между клиентом и сервером в реальном времени, может быть повышено с помощью веб-сокетов. SocketIO упрощает этот процесс и предоставляет дополнительные функции по сравнению с необработанными веб-сокетами. Интеграция его в приложение Vue может показаться сложной и обескураживающей, но она упрощена благодаря Vue-SocketIO, который позволяет нам легко подключить наш сервер к нашему хранилищу Vuex всего с помощью пары строк кода.
Спасибо, что прочитали, и, надеюсь, вы сможете применить эту серию к своим собственным проектам и создать приложение в реальном времени с помощью Vue!
