从JavaScript

Question

我想用一个非常人为的例子试试pubnub BLOCKS。本质上，我是从客户端发布一条简单的消息（使用javascript sdk）来查看我设置的BLOCK（或者我认为“我已经设置好”）是否正在监听...人为的例子是到目前为止失败了......

步骤

在pubnub中创建一个APP以生成凭据。
在简单的HTML文件中包含pubnub SDK，初始化的Pubnub，设置事件监听器和发布/订阅方法。将频道设置为'hello-world' 2A。使用。
发布调试控制台并将频道设置为'hello-world'，以查看来自'hello-world'频道的消息是否会被广播，而不是。
从客户端，我控制台记录了从消息返回的对象，并且该频道显示为“hello-world”..所以这让我想知道，为什么我看不到在pubnub调试控制台中注册的消息在同一个hello-world频道？

特别是，我的问题是：如何从pubnub CLIENT向pubnub BLOCK发送消息，并将消息从pubnub BLOCK发送到pubnub CLIENT？或者换句话说，使用Javascript SDK发布/使用CLIENT发布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。确保启动/部署块。
更新以下示例中的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客户端

1 个答案:

从JavaScript