WeChatウィジェットwebSocketの使い方

6054 ワード

アプレット webSocket

ブログの紹介
このブログでは、WeChatウィジェットのwebSocketの使い方と、ローカルネットワークでwebSocket接続を確立する方法を紹介します。クライアントとサーバとの間の会話を行います。

webSocket概要

マイクロクレジットウィジェットのAPI呼び出し

サーバ端使用nodejs構成

プレゼンテーションwebsocket

webSocket概要
WebSocketは、HTML 5が提供を開始する単一のTCP接続上で全二重通信を行うプロトコルである。WebSocketは、クライアントとサーバとの間のデータ交換をより簡単にし、サービス端末がクライアントにデータを積極的に転送することを可能にする。WebSocket APIでは、ブラウザとサーバは握手を一度だけ完了する必要があり、両者の間で直接に持続的な接続を作成し、双方向のデータ伝送を行うことができる。WebSocket APIでは、ブラウザとサーバは握手の動作をするだけで、ブラウザとサーバの間に高速チャネルが形成されます。両者の間で直接にデータを転送することができます。
現在、多くのサイトでは、プッシュ技術を実現するために、Ajaxポーリングを使用しています。ポーリングは、特定の時間間隔（例えば、1秒毎）で、ブラウザからサーバにHTTP要求を送信し、サーバから最新のデータをクライアントのブラウザに返信するものである。このような従来のモードは、ブラウザがサーバに要求を継続する必要があるという明白な欠点をもたらしているが、HTTP要求は、長いヘッダを含んでいる可能性があり、その中で、本当に有効なデータは小さい部分だけかもしれない。これは明らかに多くの帯域幅などのリソースを浪費することになる。HTML 5で定義されたWebSocketプロトコルは、サーバリソースと帯域幅をよりよく節約し、よりリアルタイムに通信することができる。

WeChatアプレット端API呼び出し
WeChatアプレットの端に必要な配置は以下の通りです。

は、ローカルネットワークのアドレス

を取得する。

SocketTask wx.com SocketはWebSocket接続を作成します。

wx.onSocketOpen(function calback)傍受WebSocket接続オープンイベント

wx.sendSocketMessage（Object Object）接続でデータを送信します。

wx.onSocketMessage(function calback)ウェブソケットがサーバに受信したメッセージイベントを傍受する。

（1）ローカルネットワークのアドレスIPを取得する
ローカルネットワークのIPを取得するのは非常に簡単で、設定を開いて、ネットワークに入り、WiFi属性をクリックして、IPv 4の右側にIPアドレスが見えます。その後、IPの前にws:/末尾に3001を加えて、利用可能なIPが得られます。
たとえば:


ws://199.213.7.102:3001

（2）クライアントとサーバのリンクを確立し、メッセージを送信し、サーバからメッセージを返信する
wxmlの部分にボタンを設置し、情報を取得して親切にメッセージを送ります。
WXML:


<input type="tex" bindchange="sendMessage" class="text" placeholder="     "></input>

JS部分はクライアントとサーバのリンクを確立し、メッセージを送信し、サーバからメッセージを返信する。


//       
var wsApi = "ws://199.213.7.102:3001";
var socketOpen==false;
 sendMessage:function(e)
 {
  var msg=e.detail.value;
   if (socketOpen) {
    console.log(msg);
    //        
    wx.sendSocketMessage({
     data: msg
    })
  }
 },
 onLoad: function (options) {
  //    
   wx.connectSocket({
    url: wsApi,
    header: {
     'content-type': 'application/json'
    },
    //method:"GET",
    protocols: ['protocol1'],
    success: function () {
     console.log("       ！");
     wx.onSocketOpen(function(){
      console.log('webSocket   ！');
      socketOpen=true;
      wx.onSocketMessage(function(msg){
        console.log(msg);
      })
     })
    }
   })
 },

サーバー側でnodejsの設定を使用します。
サーバーはnodejsで構成されています。もちろん、他のバックエンド言語でも処理できます。もしあなたがすでにnodejsをインストールしたら、始めましょう。

nodejs環境

を作成します。

は、wsモジュールの構造関数を導入し、実装

.フロントエンドから送信されたメッセージを傍受する

。

回送メッセージ

（1）nodejs環境の作成

まず、フォルダーwebsocket

を新規作成します。

window+R，cmd

を入力します。

cdスペースを入力し、websocketを直接にブラックボックスにドラッグしてwebsocketフォルダ

に入ります。

は次にnpm install ws確立環境

を入力する。

回車したら、カタログの下にファイルが作成されているのが見えます。環境は作成済みです。これからサービスのコードを書きます。

（2）wsモジュールの構造関数を導入し、実用化する
websocketでファイルserver.jsを作成して、nodejsコードを作成します。まず、wsモジュールの構造関数を導入して、実用化します。

wsモジュールの構造関数を導入し、実用化する。


//  ws       
var webSocketServer=require("ws").Server;
//   
var wss=new webSocketServer({
	port:3001
});

（3）フロントエンドから送信されたメッセージを傍受する
server.jsを引き続き作成し、フロントエンドから送信されたメッセージを傍受する：

ws.on（「connection」、Fnction（ws）

ws.on（「message」、function（msg）


//  ws       
var webSocketServer=require("ws").Server;
//   
var wss=new webSocketServer({
	port:3001
});
//       
wss.on("connection",function(ws){
	console.log("         ");
	//       
	ws.on("message",function(msg){
		console.log(msg);
		ws.send("        ："+msg);
	})
});

（4）返信メッセージ
サーバがメッセージを受信した後、また返信メッセージの能力を備えて、クライアントにメッセージをフィードバックします。どんなメッセージを返すかは、ここで議論するのではなく、直接に簡単にお客様が送ったメッセージを返送すればいいです。
ws.send（「クライアントからのメッセージ:」+msg）


//  ws       
var webSocketServer=require("ws").Server;
//   
var wss=new webSocketServer({
	port:3001
});
//       
wss.on("connection",function(ws){
	console.log("         ");
	//       
	ws.on("message",function(msg){
		console.log(msg);
		ws.send("        ："+msg);
	})
});

プレゼンテーションwebsocket
最後に簡単にプレゼンテーションを行います。

cmdで入力を続けます。node server.js、server.jsコード

を実行します。

マイクロクレジット開発者ツールでコンパイルし、ウィジェット

を実行します。

メッセージを入力し、

を観察する。