Laravel Echo — Pusher и React Native

Как подключить Laravel Echo к вещателю Pusher в приложении React Native?

О местной среде

Предполагая, что вы уже настроили Laravel с конфигурацией вашего веб-сокета, как описано в разделе Вещание с помощью Laravel и метод замены Pusher из BeyondCode Laravel Websockets.

Шаг 1. Установите пакеты laravel-echo и pusher-io на React-Native.

$ npm install --save laravel-echo pusher-js

Шаг 2. Добавьте эти переменные в файл конфигурации (поместите его в защищенный файл)

WS_URI: '{your-domain.test}',
WS_PORT: 6001,
WS_AUTH_ENDPOINT: '{https://your-domain.test/broadcasting/auth}',
WS_MIX_PUSHER_KEY: '{your-pusher-key}',
WS_MIX_PUSHER_APP_CLUSTER: '{your-cluster}',
WS_TLS: true,

Шаг 3. Создайте новый сервис с именем «websocket» или с другим именем в папке «services».

import Echo from 'laravel-echo'
import { Config } from '@/Config'
import { auth } from '@/Services/auth'

const token = auth.getBearerToken()

window.Pusher = require('pusher-js')
window.Pusher.logToConsole = true // just for development

export const echo = new Echo({
  wsHost: Config.WS_URI,
  wsPort: Config.WS_PORT,
  broadcaster: 'pusher',
  encrypted: false,
  key: Config.WS_MIX_PUSHER_KEY,
  cluster: Config.WS_MIX_PUSHER_APP_CLUSTER,
  authEndpoint: Config.WS_AUTH_ENDPOINT,
  enableStats: false,
  forceTLS: false,
  enabledTransports: ['ws'],
  auth: {
    headers: { Authorization: 'Bearer ' + token },
  },
})

Последний шаг:импортируйте echo в свой компонент и используйте его таким образом.

import { echo } from '@/Services/websocket'
// In your component function
echo.channel('user.' + userId)
  .listen('Websocket.UserEvent', event => {
     console.log(event, 'Websocket.UserEvent')
  })

В производственной среде

Вскоре…

Спасибо за чтение, Glade, если она вам поможет! :)