Question

我正在尝试将我的应用与PUSHER集成，但在我的控制台上收到此错误：

 pusher.min.js:8 Pusher : Error : {"type":"WebSocketError","error":
    {"type":"PusherError","data":{"code":null,"message":"Invalid key in subscription 
    auth data: 'INSERT_YOUR_KEY_HERE'"}}}

app.js

    // IIFE keeps our variables private
// and gets executed immediately!

    (function () {
      // make doc editable and focus
      var doc = document.getElementById('doc');
      doc.contentEditable = true;
      doc.focus();

      // if this is a new doc, generate a unique identifier
      // append it as a query param
      var id = getUrlParameter('id');
      if (!id) {
        location.search = location.search
          ? '&id=' + getUniqueId() : 'id=' + getUniqueId();
        return;
      }

      return new Promise(function (resolve, reject) {
        // subscribe to the changes via Pusher
          var pusher = new Pusher('d395088cf15a24b2f297', {
              cluster: 'eu',
              encrypted: true
          });

          var channel = pusher.subscribe(id);
        channel.bind('client-text-edit', function(html) {
          // save the current position
          var currentCursorPosition = getCaretCharacterOffsetWithin(doc);
          doc.innerHTML = html;
          console.log(html)
          // set the previous cursor position
          setCaretPosition(doc, currentCursorPosition);
        });
        channel.bind('pusher:subscription_succeeded', function() {
          resolve(channel);
        });
      }).then(function (channel) {
        function triggerChange (e) {
          channel.trigger('client-text-edit', e.target.innerHTML);
            console.log(e.target.innerHTML)

        }

        doc.addEventListener('input', triggerChange);
      })

      // a unique random key generator
      function getUniqueId () {
        return 'private-' + Math.random().toString(36).substr(2, 9);
      }

      // function to get a query param's value
      function getUrlParameter(name) {
        name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
        var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
        var results = regex.exec(location.search);
        return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
      }

      function getCaretCharacterOffsetWithin(element) {
        var caretOffset = 0;
        var doc = element.ownerDocument || element.document;
        var win = doc.defaultView || doc.parentWindow;
        var sel;
        if (typeof win.getSelection != "undefined") {
          sel = win.getSelection();
          if (sel.rangeCount > 0) {
            var range = win.getSelection().getRangeAt(0);
            var preCaretRange = range.cloneRange();
            preCaretRange.selectNodeContents(element);
            preCaretRange.setEnd(range.endContainer, range.endOffset);
            caretOffset = preCaretRange.toString().length;
          }
        } else if ( (sel = doc.selection) && sel.type != "Control") {
          var textRange = sel.createRange();
          var preCaretTextRange = doc.body.createTextRange();
          preCaretTextRange.moveToElementText(element);
          preCaretTextRange.setEndPoint("EndToEnd", textRange);
          caretOffset = preCaretTextRange.text.length;
        }
        return caretOffset;
      }

      function setCaretPosition(el, pos) {
        // Loop through all child nodes
        for (var node in el.childNodes) {
          if (node.nodeType == 3) { // we have a text node
            if (node.length >= pos) {
                // finally add our range
                var range = document.createRange(),
                    sel = window.getSelection();
                range.setStart(node,pos);
                range.collapse(true);
                sel.removeAllRanges();
                sel.addRange(range);
                return -1; // we are done
            } else {
              pos -= node.length;
            }
          } else {
            pos = setCaretPosition(node,pos);

            if (pos == -1) {
                return -1; // no need to finish the for loop
            }
          }
        }
        return pos; // needed because of recursion stuff
      }
    })();

的index.html

    <!DOCTYPE>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Collaborative Text Editor</title>
    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
    <link href="/css/app.css" rel="stylesheet"></link>
  </head>
  <body>
    <header class="header">
      <h1 class="header__h1">Online Collab Edit</h1>
    </header>
    <div class="doc">
      <div class="doc__background-ribbon"></div>
      <div id="doc" class="doc__text-editor"></div>
    </div>
    <script src="https://js.pusher.com/4.0/pusher.min.js"></script>
    <script src="/js/app.js"></script>
    <script>

        (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
      })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

      ga('create', 'UA-61474244-2', 'auto');
      ga('send', 'pageview');
  </script>
  </body>
</html>

有了这个，我在我的应用仪表板上收到错误日志意味着我的API密钥是正确的

但在我的控制台中收到错误

Answer 1

这是一个重要的错误：

订阅身份验证数据中的密钥无效：＆＃39; INSERT_YOUR_KEY_HERE＆＃39;

Pusher连接必须提供键才能识别Pusher应用。您已使用文字字符串'INSERT_YOUR_KEY_HERE'复制粘贴了一个示例，该示例旨在指示您使用密钥替换字符串。

您可以在Pusher仪表板上找到此键。 Log in to your Pusher dashboard找到您的Pusher应用，然后点击＆＃34;应用密钥＆＃34;。

订阅身份验证数据中的密钥无效

1 个答案: