nuxt-community / laravel-echo-module

Laravel Echo for Nuxt 2
MIT License
86 stars 31 forks source link

require('pusher-js/with-encryption') #41

Open tjaydk opened 3 years ago

tjaydk commented 3 years ago

Im currently working with nuxt/laravel-echo. I want to use encrypted channels and can see that it is not included in the basic pusher.js and you have to explicitly implement Pusher with it. Where can I change which library is used ? Here is my nuxt.config.js

echo: {
    broadcaster: 'pusher',
    key: process.env.MIX_PUSHER_APP_KEY,
    cluster: process.env.MIX_PUSHER_APP_CLUSTER,
    forceTLS: process.env.NODE_ENV === 'production',
    authModule: true,
    authEndpoint: `${process.env.API_URL}/broadcasting/auth`,
    connectOnLogin: true,
    disconnectOnLogout: true,
    encrypted: true,
    encryptionMasterKeyBase64: process.env.MIX_PUSHER_ENC_MASTER_KEY,
    auth: {
      headers: {
        'X-AUTH-TOKEN': process.env.API_AUTH_TOKEN
      }
    }
  },

And in my component:

this.channel = this.$echo.encryptedPrivate(`chat.${this.chat.id}`)
        .listen('chat.message.new', ({ chatMessage }) => {
          this.localMessages.push(chatMessage)
        })
        .listen('chat.message.update', ({ chatMessage }) => {
          this.updateArray(chatMessage)
        })
        .listen('chat.message.delete', ({ chatMessage }) => {
          this.updateArray(chatMessage)
        })

But i get the following exception: Tried to subscribe to a private-encrypted- channel but no nacl implementation available

By changing this in echo.js fixes it.

import Echo from 'laravel-echo'

//window.Pusher = require('pusher-js')
window.Pusher = require('pusher-js/with-encryption')

function getHeaders ({ app }) {
  const headers = {}

  if (app.$auth) {
    const strategy = app.$auth.strategy
    const tokenName = strategy.options.tokenName || 'Authorization'
    const token = app.$auth.getToken(strategy.name)

    if (token) {
      headers[tokenName] = token
    }
  }

  return headers
}

This should of course take into account the encrypted bool in the config

tjaydk commented 3 years ago

I just tried to add a pull request - but im getting a 403 so i will just add the code snippit here to fix the issue:

plugins.js

<% if (options.broadcaster === 'pusher' && !options.encrypted) { %>
window.Pusher = require('pusher-js')
<% } else if (options.broadcaster === 'pusher' && options.encrypted) { %>
window.Pusher = require('pusher-js/with-encryption')
<% } else if (options.broadcaster === 'socket.io') { %>
window.io = require('socket.io-client')
<% } %>
ricardogobbosouza commented 3 years ago

Hi @tjaydk Added support on version 2.0.0-alpha.1 https://github.com/nuxt-community/laravel-echo-module/blob/main/src/runtime/plugin.js#L15

PS: I need to update docs

ricardogobbosouza commented 3 years ago

47

tjaydk commented 3 years ago

Hi @ricardogobbosouza Thank you - will you notify me on this thread once it is released ?

ricardogobbosouza commented 3 years ago

Sure