クラウバ-JavaScript APIテストとインスタンス(新規)

7550 ワード

一、クラウバ紹介
バックグラウンドメッセージサービスを提供するサービスプロバイダーを紹介します.個人ユーザーは普通無料で、開発者のバックグラウンドサービスプロバイダーとして利用できます.
公式サイト
リアルタイムのデータ交換が必要な製品のための完璧な解決策に焦点を当てる.携帯電話、Web、スマート機器を含むほとんどのプラットフォームをサポートします.
二、JavaScript JDKダウンロードと導入
ダウンロード
三、応用例
簡単なブラウザでクラウバメッセージを受信します.
1.bootstrapをデフォルトのスタイルプラグインとして導入する
clientを創立してbootstrapを導入します.

<!DOCTYPE html>
<html>
<head>
<title>    ---    </title>

	<!--   Bootstrap    CSS    -->
<link rel="stylesheet" href="bootstrap.min.css">

<!--    Bootstrap    （      ） -->
<!-- <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> -->

<!-- jQuery  。   bootstrap.min.js      -->
<!-- <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> -->
<script src="jquery-1.10.2.min.js"></script>

<!--     Bootstrap    JavaScript    -->
<script src="bootstrap.min.js"></script>

</div>
</body>
</html>

2.順次socket.ioとyunbaa-js-sdk.jsを導入する
注意:まずsocket.ioを導入してからyunbaa-js-sdk.jsを導入します.

<script src="socket.io-1.3.5.min.js"></script>

<script src="yunba-js-sdk.js"></script>

3.client.jsを建立し、client.を作成するUI
client.の最終コードは以下の通りです.

<!DOCTYPE html>
<html>
<head>
<title>    ---    </title>

	<!--   Bootstrap    CSS    -->
<link rel="stylesheet" href="bootstrap.min.css">

<!--    Bootstrap    （      ） -->
<!-- <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> -->

<!-- jQuery  。   bootstrap.min.js      -->
<!-- <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> -->
<script src="jquery-1.10.2.min.js"></script>

<!--     Bootstrap    JavaScript    -->
<script src="bootstrap.min.js"></script>



<script src="socket.io-1.3.5.min.js"></script>

<script src="yunba-js-sdk.js"></script>

<script src="client.js"></script>


</head>
<body>



<div class="jumbotron">
  <div class="container">
    <h1>Hello, Yunba!</h1>
  <p>          </p>
  <p><a class="btn btn-primary btn-lg" href="#" role="button">  </a></p>
  </div>
</div>

<div class="dialog">
	<h3>   </h3>
	<textarea class="form-control" rows="6" disabled="">
		
	</textarea>
</div>
</body>
</html>

4.client.js
1.new Yunba()
まず、client.jsのclient.jsにおける引用順序を確保し、下記のコードを実装してyunbaを追加します.アプリキーに自分のアプリを記入してください.

var yunba=new Yunba({server:'sock.yunba.io',port:3000,appkey:"your appkey");

2.yunba.init
yunba.initメソッドを使用してクラウバを初期化し、クラウバサーバを接続します.

yunba.init(function (success) {
    if (success) {
       $(".container").append("<p>     </p>");
        console.log('     ');
       mqtt_connect();
       
    }
}, function () {

	//    
    
});

3.yunba.co nnect_by_customid(cid、connected)
yunba.co nnectを使っていますby_customid(cid,connected)方法接続応答アプリケーション

 function mqtt_connect() {
        var cid = "8888";
        var connected = function(success, msg, sessionid) {
          if (success) {
           $(".container").append("<p>    </p>");
            console.log('    ');
          } else {
            alert(msg);
          }
        };

        if (!cid || cid.length === 0) {
          alert('      ID');
        } else {
          yunba.connect_by_customid(cid, connected);
        }
    }

4.yunba.subscribe
yunba.subscribeを使って購読チャンネルを定義します.

function Yunba_subscribe(){
//    12345  
var topic = "12345";
yunba.subscribe({'topic': topic}, 
    function (success, msg) {
        if (success) {
            console.log('        ：12345');
            $(".dialog textarea").val("        ：12345");
        } else {
            console.log(msg);
        }
    }
);

5 yunba.set_メッセージcb
yunba.set_を使うメッセージcbはリアルタイムでクラウバのニュースを傍受します.

yunba.set_message_cb(function (data) {
    console.log('Topic:' + data.topic + ',Msg:' + data.msg);
    var val = $(".dialog textarea").val();
    $(".dialog textarea").val(val+'\r
'+"    :"+data.topic+"   ："+data.msg+"");
});

6.最終client.jsコードは以下の通りで、クラウバの公式サイトのアプリケーションインターフェースで、対応するチャンネル(「12345」)を購読したウェブページにメッセージを送信し、リアルタイムで応答することができます.

var yunba = new Yunba({server: 'sock.yunba.io', port: 3000, appkey: ""});



yunba.init(function (success) {
    if (success) {
       $(".container").append("<p>     </p>");
        console.log('     ');
       mqtt_connect();
       
    }
}, function () {

	//    
    
});

 function mqtt_connect() {
        var cid = "8888";
        var connected = function(success, msg, sessionid) {
          if (success) {
           $(".container").append("<p>    </p>");
            console.log('    ');
          } else {
            alert(msg);
          }
        };

        if (!cid || cid.length === 0) {
          alert('      ID');
        } else {
          yunba.connect_by_customid(cid, connected);
        }
    }
$(document).ready(function(e){
  $(document).on("click","a",function(){
    console.log('    ');
    Yunba_subscribe();
  })
})

function Yunba_subscribe(){

var topic = "12345";
yunba.subscribe({'topic': topic}, 
    function (success, msg) {
        if (success) {
            console.log('        ：12345');
            $(".dialog textarea").val("        ：12345");
        } else {
            console.log(msg);
        }
    }
);


}




yunba.set_message_cb(function (data) {
    console.log('Topic:' + data.topic + ',Msg:' + data.msg);
    var val = $(".dialog textarea").val();
    $(".dialog textarea").val(val+'\r
'+"    :"+data.topic+"   ："+data.msg+"");
});

jsはどうやってクラス(パッケージ)を作りますか?