2017-02-09 9 views
1

私は非常に工夫した例でpubnub BLOCKSを試したかったのです。 基本的に、(JavaScriptを使って)クライアントからの単純なメッセージを公開して、それぞれのチャンネルに設定したBLOCKが聞いているかどうかを確認しています。資格証明書を生成するpubnubでAPPを作成...これまでイベントをJavaScriptクライアントからpubnubブロックに公開する

ステップ

  1. を失敗しています。
  2. 単純なHTMLファイル、初期化Pubnub、イベントリスナーの設定、パブリッシュ/サブスクライブのメソッドにpubnub SDKが含まれています。チャネルを「hello-world」に設定してください 2a。さまざまなブラウザウィンドウからメッセージを正常に発行/購読しました。
  3. 「hello-world」チャンネルからのメッセージがブロードキャストされるかどうかを確認するために、デバッグコンソールをpubnubしてチャンネルを 'hello-world'として設定しました。
  4. クライアントからは、メッセージから返されたオブジェクトがログに記録され、チャネルは「hello-world」として表示されます。これで私は疑問に思っていましたが、なぜpubnubデバッグコンソール同じhello-worldチャンネルで?

特に私の質問は、pubnub CLIENTからpubnub BLOCKにメッセージを送信し、pubnub BLOCKからpubnub CLIENTにメッセージを送信するにはどうすればいいですか?言い換えれば、Javascript SDKを使用してCLIENTを使用しているBLOCKをpub/subにすることはできますか?

ハロー世界のコード例についてsimple.js:PubNubブロックへ

(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='')}); 
    } 
    }); 
})(); 

答えて

1

公開メッセージとイベントのJavaScript

から私はPubNubにメッセージを送信する以下の例を作成しました。 のhello-worldチャンネルでメッセージをキャッチすることができます。

  1. Register a BLOCK on PubNub。ブロックを開始/展開するようにしてください。
  2. 下記の例でpublishKeysubscribeKeyを更新してください。
  3. 以下の例を実行してください。

(()=>{ 
 

 
    '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>

+0

私はクライアントにデバッグコンソールにとハロー世界としてhello_worldとしてチャネルを設定していた領主なんてこったああ...、一致するように、チャネルスペルを更新し、完全に今取り組んでいます。..簡単なスーパー。深夜の誤ったスペルミス:/もう一度ありがとう! – frostini

+0

笑、完全に理解できる。ここでも実行可能なデモをしようとします。まもなく更新されます。 – PubNub

関連する問題