docs: examples

examples/pusher/nuxt.config.js

@@ -0,0 +1,15 @@
+export default {
+  buildModules: [
+    '@nuxtjs/laravel-echo'
+  ],
+
+  serverMiddleware: [
+    { path: '/pusher', handler: '~/server-middleware/pusher.js' }
+  ],
+
+  echo: {
+    broadcaster: 'pusher',
+    key: process.env.PUSHER_KEY,
+    cluster: process.env.PUSHER_CLUSTER
+  }
+}

examples/pusher/package.json

@@ -0,0 +1,9 @@
+{
+  "devDependencies": {
+    "@nuxtjs/laravel-echo": "^2.0.0-alpha.2",
+    "express": "^4.17.1",
+    "nuxt": "^2.15.4",
+    "pusher": "^5.0.0",
+    "pusher-js": "^7.0.3"
+  }
+}

examples/pusher/pages/index.vue

@@ -0,0 +1,82 @@
+<template>
+  <div>
+    <h1>Pusher Example</h1>
+    <p><a target="_blank" href="https://laravel-echo.nuxtjs.org">Laravel Echo for Nuxt.js</a></p>
+    <p><a target="_blank" href="https://pusher.com/docs/channels/getting_started/javascript">Pusher Docs</a></p>
+    <div style="display:flex;">
+      <div style="margin: 10px;">
+        <h2>Subscribe to events on the client</h2>
+        Channel:<br><input v-model="subscribe.channel"><br><br>
+        Event:<br><input v-model="subscribe.event"><br><br>
+        <textarea v-model="subscribe.data" disabled rows="8" cols="60" /><br><br>
+        <button v-if="!channel" type="button" @click="startListen">
+          Start Listen
+        </button>
+        <button v-else type="button" @click="stopListen">
+          Stop Listen
+        </button>
+      </div>
+      <div style="margin: 10px;">
+        <h2>Publish events from the server</h2>
+        Channel:<br><input v-model="publish.channel"><br><br>
+        Event:<br><input v-model="publish.event"><br><br>
+        <textarea v-model="publish.message" rows="8" cols="60" /><br><br>
+        <button type="button" @click="publishMessage">
+          Publish Message
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      channel: null,
+      subscribe: {
+        channel: 'channel',
+        event: '.event',
+        data: ''
+      },
+      publish: {
+        channel: 'channel',
+        event: 'event',
+        message: 'Hello world'
+      }
+    }
+  },
+
+  mounted () {
+    this.startListen()
+  },
+
+  methods: {
+    startListen () {
+      this.channel = this.$echo.listen(this.subscribe.channel, this.subscribe.event, (data) => {
+        this.subscribe.data += JSON.stringify(data) + '\r\n'
+      })
+    },
+
+    stopListen () {
+      this.channel.stopListening(this.subscribe.event)
+      this.channel = null
+    },
+
+    publishMessage () {
+      fetch('/pusher', {
+        method: 'POST',
+        headers: {
+          Accept: 'application/json',
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({
+          channel: this.publish.channel,
+          event: this.publish.event,
+          message: this.publish.message
+        })
+      })
+    }
+  }
+}
+</script>

examples/pusher/server-middleware/pusher.js

@@ -0,0 +1,22 @@
+const Pusher = require('pusher')
+const express = require('express')
+const app = express()
+
+app.use(express.json())
+app.all('/', (req, res) => {
+  const pusher = new Pusher({
+    appId: process.env.PUSHER_APP_ID,
+    key: process.env.PUSHER_KEY,
+    secret: process.env.PUSHER_SECRET,
+    cluster: process.env.PUSHER_CLUSTER,
+    useTLS: true
+  })
+
+  pusher.trigger(req.body.channel || 'channel', req.body.event || 'event', {
+    message: req.body.message || 'hello world'
+  })
+
+  res.sendStatus(200)
+})
+
+module.exports = app