examples/ws-demo-jwt-extractors.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>RIG-WS-Demo</title>
</head>

<body>
  <form onsubmit="sendGreeting(); return false;">
    <input type="text" id="name" placeholder="Your name here" autofocus>
    <input type="text" id="greeting" placeholder="Your greeting here" autofocus>
    <input type="submit" id="submit-button" disabled>
  </form>
  <ul id="eventList" style="list-style:none;padding-left:0">

  </ul>
  <script>
    const eventList = document.getElementById("eventList")

    function addEvent(cloudEvent) {
      const {
        eventTime,
        data
      } = cloudEvent

      const li = document.createElement("li")
      li.textContent = `[${new Date(eventTime).toLocaleTimeString()}] ${JSON.stringify(data)}`
      eventList.appendChild(li)
    }

    const baseUrl = "http://localhost:4000/_rig/v1"
    const wsUrl = "ws://localhost:4000/_rig/v1"

    function randomString() {
      return Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15)
    }

    function sendGreeting() {
      const inputGreeting = document.getElementById("greeting")
      const inputName = document.getElementById("name")
      const greeting = inputGreeting.value
      const name = inputName.value
      inputGreeting.value = ""
      inputName.value = ""
      return fetch(`${baseUrl}/events`, {
        method: "POST",
        mode: "cors",
        headers: {
          "Content-Type": "application/json; charset=utf-8"
        },
        body: JSON.stringify({
          cloudEventsVersion: "0.1",
          eventID: randomString(),
          eventType: "greeting.jwt",
          eventTime: new Date().toISOString(),
          source: "sse-demo-ui",
          contentType: "text/plain",
          data: {
            name,
            greeting
          }
        })
      })
        .then(response => response.json())
        .then(json => {
          console.log("CloudEvent sent:", json)
          return json
        })
        .catch(err => {
          console.log("Failed to send CloudEvent:", err)
        })
    }

    function createSubscription(connectionToken) {
      const eventType = "greeting.jwt"
      /**
       * JWT PAYLOAD DATA
       * {
       *   "sub": "1234567890",
       *   "fullname": "John Doe",
       *   "username": "john.doe",
       *   "iat": 4103258143,
       *   "exp": 4103258143
       * }
       */
      const jwt = "Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwiZnVsbG5hbWUiOiJKb2huIERvZSIsInVzZXJuYW1lIjoiam9obi5kb2UiLCJpYXQiOjQxMDMyNTgxNDMsImV4cCI6NDEwMzI1ODE0M30.3ziftuo1JbXed7XSFJTcrdzOewSu7Jos9Vljk9dOTYI";
      return fetch(`${baseUrl}/connection/ws/${connectionToken}/subscriptions`, {
        method: "PUT",
        mode: "cors",
        headers: {
          "Content-Type": "application/json; charset=utf-8",
          Authorization: jwt
        },
        body: JSON.stringify({
          "subscriptions": [
            {
              "eventType": eventType,
              "oneOf": [
                {
                  "name": "john"
                }
              ]
            }
          ]
        })
      })
        .then(json => {
          console.log("Subscription created:", json)
          return json
        })
        .catch(err => {
          console.log("Failed to create subscription:", err)
        })
    }

    const source = new WebSocket(`${wsUrl}/connection/ws`)

    source.onopen = (e) => console.log("open", e)
    source.onmessage = (e) => {
      console.log("message", e)
      const cloudEvent = JSON.parse(e.data)
      if (cloudEvent.type === 'rig.connection.create') {
        payload = cloudEvent.data
        connectionToken = payload["connection_token"]
        createSubscription(connectionToken)
      } else if (cloudEvent.eventType === 'greeting.jwt') {
        addEvent(cloudEvent)
      } else if (cloudEvent.type === 'rig.subscriptions_set') {
        document.getElementById("submit-button").removeAttribute("disabled");
      }
    }
    source.onerror = (e) => console.log("error", e)

  </script>
</body>

</html>