2
私は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のindex.html
// 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
}
})();
<!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>
これで私はreceiです私のアプリのダッシュボード上のヴィングエラーログは私のAPIキーが 
右が、私のコンソールにエラーを受信していることを意味し