从 javascript 个客户端发布事件到 pubnub 块

Question

我想用一个非常人为的例子来尝试 pubnub BLOCKS。本质上，我正在从客户端（使用 javascript sdk）发布一条简单消息，以查看我设置的 BLOCK（或我设置的 "think"）是否正在监听相应的频道...人为的例子到目前为止都失败了...

步骤

在pubnub中创建一个APP来生成凭据。
在简单的 HTML 文件中包含 pubnub SDK，初始化 Pubnub，设置事件侦听器和 publish/subscribe 方法。将频道设置为 'hello-world' 2a. Published/Subscribed 使用 .
转到 pubnub 调试控制台并将频道设置为 'hello-world' 以查看来自 'hello-world' 频道的消息是否会被广播，但事实并非如此。
从客户端，我控制台记录了从消息返回的对象，并且频道显示为 'hello-world'..所以这让我想知道，为什么我没有看到在 pubnub 中注册的消息在同一个 hello-world 频道中调试控制台 ?

特别是，我的问题是：如何从 pubnub CLIENT 向 pubnub BLOCK 发送消息，以及如何从 pubnub BLOCK 向 pubnub CLIENT 发送消息？或者换句话说，pub/sub 与使用 Javascript SDK 的客户端的 BLOCK ?

hello-world 示例代码的simple.js：

(function(){
  var pubnub = new PubNub({ publishKey : 'p-key', subscribeKey : 's-key' });
  function $(id) { return document.getElementById(id); }
  var box = $('box'), input = $('input'), channel = 'hello-world';
  pubnub.addListener({
      message: function(obj) {
          box.innerHTML = (''+obj.message).replace( /[<>]/g, '' ) + '<br>' + box.innerHTML
      }});
  pubnub.subscribe({channels:[channel]});
  input.addEventListener('keyup', function(e) {
      if ((e.keyCode || e.charCode) === 13) {
        pubnub.publish({channel : channel,message : input.value,x : (input.value='')});
    }
  });
})();

Answer 1

从 JavaScript

向 PubNub BLOCKS 发布消息和事件

我在下面创建了一个向 PubNub 发送消息的示例。您可以在 hello-world 频道 register a BLOCK 上接收消息。

Register a BLOCK on PubNub。确保start/deploy块。
更新下面示例中的 publishKey 和 subscribeKey。
运行下面的例子。

(()=>{

    'use strict';
 
    // Initialize PubNub Socket SDK
    const pubnub = new PubNub({ 
        publishKey   : 'demo'
    ,   subscribeKey : 'demo'
    });

    // GUI Elements
    const box     = $('#messages')
    ,     input   = $('#message')
    ,     submit  = $('#submit')
    ,     channel = 'hello-world';

    // Open Socket to Channels
    pubnub.subscribe({ channels : [channel] });

    // When Messages Arrive
    pubnub.addListener({ message: obj => receive_chat(obj) });

    // When user sends chat
    submit.click( event => send_chat(input.val()) );
    input.keyup( event => {
        if ((event.keyCode || event.charCode) === 13)
            return send_chat(input.val());
    });

    // Draw Chat Messages on Screen
    function receive_chat(obj) {
        box.html((''+obj.message).replace( /[<>]/g, '' )+'<br>'+box.html());
    }

    // Send Chat Message
    function send_chat(message) {
        console.log(input.val());
        pubnub.publish({ channel : channel, message : message });
        input.val('');
        return false;
    }


})();

div, input { font-family: "Lucida Grande","Lucida Sans Unicode","Lucida Sans",Geneva,Arial,sans-serif; }
input { padding: 10px; margin: 10px;  }
input[type=submit] { width: 100px; line-height: 100px; font-size: 20px;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.pubnub.com/sdk/javascript/pubnub.4.4.3.min.js"></script>

<input id="message" placeholder="type your message">
<input id="submit" type="submit" value="Send">
<div id="messages"></div>

从 javascript 个客户端发布事件到 pubnub 块

publishing events to pubnub blocks from javascript client

block

pubnub

从 JavaScript