【AWS】Lambda ～ JavaScript / クライアントサイド編 ～

AWS

 ■ はじめに

https://dk521123.hatenablog.com/entry/2017/05/22/233340

で、Javaで AWS Lambda関数を作成したが、
それを呼び出すものも必要でJavaでも組めんこともないが、
JavaScriptでも組めるらしいので、作成してみた

なお、以下のSDKのAPI仕様を一読しておくといいかもしれない

http://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/Lambda.html#invoke-property

 ■ サンプル

 *  AWS Lambda関数は、以下の関連記事を参照のこと

https://dk521123.hatenablog.com/entry/2017/05/22/233340
 sample.html 

<!DOCTYPE html>
<html>
<head lang="jp">
  <script src="https://code.jquery.com/jquery-2.1.4.js"></script>
  <script src="https://sdk.amazonaws.com/js/aws-sdk-2.1.34.min.js"></script>
  <meta charset="UTF-8">
  <script type="text/javascript">
    <!-- ★ここは個々で変更する★ -->
    var AwsAccessKeyId = "DFRTS76SABCDEFGHIJ";
    var AwsSecretAccessKey = "DGYE748HDJDJDMkkoe88747NNIDmiekOOKEiiieiIDMEM";
    var AwsRegion = "ap-northeast-1";
  
    $(document).ready(function() {
      $("#buttonToSend").click(function(){
        executeLambda();
      });
    });
    executeLambda = function() {
      $("#buttonToSend").attr("disabled", true);
      var startTime = new Date();
      AWS.config.update({
          accessKeyId: AwsAccessKeyId,
          secretAccessKey: AwsSecretAccessKey,
          region: AwsRegion
      });

      var inputText1 = $("#input1").val();
      var inputText2 = $("#input2").val();
      var input = { "greeting":inputText1, "name":inputText2 };
      var inputData = JSON.stringify(input);
      var lambda = new AWS.Lambda();
      var params = {
        FunctionName: "HelloWorld",
        InvocationType: "RequestResponse",
        Payload: inputData
      };
      lambda.invoke(params, function(error, data) {
        var endTime = new Date();
        if(error) {
          $("#lambdaResponse").append("<b>Error</b><br>");
          console.log(error, error.stack);
        } else {
          var responseTime = endTime - startTime;
          $("#lambdaResponse").append(
             "<b>Request = </b>" + inputText1 + " " + inputText2
             + "<b>Response = </b>" + data['Payload'] 
             + ", <b>Response time = </b>" + responseTime +  "msec<br>");
        }
        $("#buttonToSend").attr("disabled", false);
      });
    };
  </script>
  <title>AWS Lambda for Client</title>
</head>
<body>
  <input type="text" id="input1" style="width: 200px;"><br />
  <input type="text" id="input2" style="width: 200px;"><br />
  <button type="button" id="buttonToSend">Click me!</button>
  <div id="lambdaResponse"></div>
</body>
</html>

 参考文献

http://qiita.com/taka4sato/items/3a3875e839403501d835
http://qiita.com/ToshiakiEnami/items/ba85ccea9813218a0b27
http://dev.classmethod.jp/cloud/aws/invoke-lambda-from-browser/

 関連記事

Lambda ～ 基礎知識編 ～
https://dk521123.hatenablog.com/entry/2017/04/05/235618
Lambda ～ Java / サーバサイド編 ～
https://dk521123.hatenablog.com/entry/2017/05/22/233340