This example shows how to use STOMP inside a Next.js application. (ve…

…rcel#8511)

* This example show how to use STOMP inside a Next.js application.

* Fix useEffect

* Add _app.js implementation

* Fix lint error

* Fix lint error

* Update examples/with-stomp/README.md

Co-Authored-By: Luis Fernando Alvarez D. <[email protected]>

* withStomp removed

* The url address changed

* _app.js removed. useClient added.

* remove

* revert

* Add next.config.js

* Updated readme

examples/with-stomp/README.md

@@ -0,0 +1,44 @@
+# Stomp example
+
+## How to use
+
+### Using `create-next-app`
+
+Execute [`create-next-app`](https://github.com/segmentio/create-next-app) with [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) or [npx](https://github.com/zkat/npx#readme) to bootstrap the example:
+
+```bash
+npx create-next-app --example with-stomp with-stomp-app
+# or
+yarn create next-app --example with-stomp with-stomp-app
+```
+
+### Download manually
+
+Download the example:
+
+```bash
+curl https://codeload.github.com/zeit/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/with-stomp
+cd with-stomp
+```
+
+Install it and run:
+
+```bash
+npm install
+STOMP_SERVER=wss://some.stomp.server npm run dev
+# or
+yarn
+STOMP_SERVER=wss://some.stomp.server yarn dev
+```
+
+You'll need to provide the STOMP url of your server in `STOMP_SERVER`
+
+> If you're on Windows you may want to use [cross-env](https://www.npmjs.com/package/cross-env)
+
+## The idea behind the example
+
+This example show how to use [STOMP](http://stomp.github.io/) inside a Next.js application.
+
+STOMP is a simple text-orientated messaging protocol. It defines an interoperable wire format so that any of the available STOMP clients can communicate with any STOMP message broker.
+
+Read more about [STOMP](http://jmesnil.net/stomp-websocket/doc/) protocol.

examples/with-stomp/next.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  // Build-time configuration
+  env: {
+    STOMP_SERVER: process.env.STOMP_SERVER
+  }
+}

examples/with-stomp/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "with-stomp",
+  "version": "1.0.0",
+  "scripts": {
+    "dev": "next",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "next": "latest",
+    "react": "^16.7.0",
+    "react-dom": "^16.7.0",
+    "@stomp/stompjs": "^5.4.2"
+  }
+}

examples/with-stomp/pages/index.js

@@ -0,0 +1,22 @@
+import React from 'react'
+import useStomp from '../useStomp'
+
+/**
+ * In this example you can easily connect to an Stomp Websocket server, and subscribe to a topic by a custom Hook.
+ */
+const Index = () => {
+  // get message
+  const message = useStomp('/any/topic')
+
+  // Check inside The message
+  console.log('##### new message : ', message)
+
+  return (
+    <div>
+      <h3>New Message:</h3>
+      <p>{message.text}</p>
+    </div>
+  )
+}
+
+export default Index

examples/with-stomp/useClient.js

@@ -0,0 +1,21 @@
+import React from 'react'
+import { Stomp } from '@stomp/stompjs'
+
+let stompClient
+
+const useClient = () => {
+  const [client, setClient] = React.useState(stompClient)
+
+  React.useEffect(() => {
+    if (!stompClient) {
+      stompClient = Stomp.client(process.env.STOMP_SERVER)
+    }
+    if (!client) {
+      setClient(stompClient)
+    }
+  }, [client])
+
+  return client
+}
+
+export default useClient

examples/with-stomp/useStomp.js

@@ -0,0 +1,29 @@
+import { useState, useEffect } from 'react'
+import useClient from './useClient'
+
+const useStomp = topic => {
+  const [message, setMessage] = useState({})
+  const client = useClient()
+
+  // subscribe to a channel, then listen to the messages.
+  const subscribe = () => {
+    client.subscribe(topic, msg => {
+      const change = JSON.parse(msg.body)
+      setMessage(change)
+    })
+  }
+
+  // unsubscribe on unmount
+  const unSubscribe = () => {
+    client.unsubscribe()
+  }
+
+  useEffect(() => {
+    subscribe()
+    return unSubscribe
+  }, [])
+
+  return message
+}
+
+export default useStomp