VSCodeでHTMLを書くその４

VSCodeでHTMLを書くその４

■　前提

　VSCodeでHTMLを書くその１～３を完了していること。

■　今回のターゲット

　①　前回のbasicの通信プログラムの説明
　②　次回以降の仕込みを少々
　③　cfコマンド表

■　サーバ通信プログラム

　　通信を行うサーバは、クライアントからのリクエストを待ち続ける宿命にあります。つまりじっとループの中にいます。
　　サーバはクライアントからリクエストを受信するとリクエストに合わせた応答を作成します。（レスポンス作成）
　　そして、クライアントへ応答を送信します。（レスポンス応答）
　　この一連の動作をまとめたのが下記図です。

![EX-72-20180306.jpg](https://qiita-image-store.s3.amazonaws.com/0/239597/94c3d0a8-27e6-5c12-3155-12882b3af6f2.jpeg)

　このイメージを頭にインプットしましょう。
　これを基に前回のプログラムをもう一度みていきましょう。

■　プログラムを解読する

　なんかわけのわからないことをいっているような・・・「解読とは？」
　頭で理解できる単位に再分割して、理解を深めるような作業を言っています。
　そこで前図に対応するようにプログラムを分割してみましょう。
　※1 ここがポイント、プログラムを分割できれば一人前田のクラッカー。

　★ 接続先設定

　サーバのIPアドレスと通信ポート番号を設定します。
　「127.0.0.1」のIPアドレスはローカルホストのIPです。
　[対応箇所]

```vb
　Const port As Integer = 1000         ' 待機ポート番号
　Const ipString As String = "127.0.0.1"  ' URL
```

　★　リスナー開始

　IPアドレスの文字列をパーズします。（コンピューターが扱えるように変換すること）
　次にリスナーオブジェクトを作成し開始します。
　SystemオブジェクトのNetメンバーの各メッソドを駆使しています。
　[対応箇所]

```vb
　Dim ipAdd As System.Net.IPAddress = System.Net.IPAddress.Parse(ipString) ' IPアドレスをパーズ
　Dim listener As New System.Net.Sockets.TcpListener(ipAdd,port)           ' リスナー
　listener.Start()
```

　★　リスナー待受け

　ターミナルにリスナーが待受け状態を示すために「接続中...」をアウトプットします。
　クライアントからの受信をひたすら待ち続けます。
　クライアントからのリクエストを受信すると待受が終了します。
　ターミナルにリスナーが待受け終了を示すために「接続完了.」をアウトプットします。
　[対応箇所]

```vb
 　Console.Write("接続中...")
 　Dim client As System.Net.Sockets.TcpClient = listener.AcceptTcpClient()
 　Console.WriteLine("接続完了.")
```

　★　リクエスト受信

　クライアントからリクエストの受信ストリームのインスタンスを作成します。
　受信バッファを1024バイトのサイズで定義します。
　受信ストリームを読み取り、ターミナルへアウトプットします。
　[対応箇所]

```vb
　Dim Clt As System.Net.Sockets.NetworkStream = client.GetStream()
　Dim Recive(1024) As Byte
　Dim ReciveSize As Integer = Clt.Read(Recive, 0, Recive.Length)
　Console.WriteLine(System.Text.Encoding.Default.GetString(Recive, 0, ReciveSize))
```

　★　レスポンス作成
　応答のhtmlをバッファに設定して、クライアントへ送信します。
　[対応箇所]

```vb
　Call ReadHtml()
　Dim Send As Byte() = System.Text.Encoding.Default.GetBytes(Buf)
　Clt.Write(Send, 0, Send.Length)
```

　いかがでしょうか、プログラムを再分割するといままで気が付かなかった意味が見えてくるような気がしませんか？
　とりあえずプログラムの説明はここまで。

■　IBM Cloudアプリ開発ファーストステップ(ずばり.NET Core)

　次回はIBM Cloudアプリ開発を始めます。
　ファーストステップは、.NET Coreを基盤としたメモアプリを作成します。
　※1 [node.jsサンプルを参考にします](https://www.ibm.com/developerworks/jp/cloud/library/j_cl-bluemix-nodejs-app/)

　MemoAppアプリを作ります。
![EX-74-20180307.jpg](https://qiita-image-store.s3.amazonaws.com/0/239597/35b7be17-9417-09e5-6f03-2a9e93654596.jpeg)

■　cfコマンド表

　下記にcf -helpをGoogle翻訳で訳したcfコマンドの一覧表を付記します。
　これから多くの機会でcfコマンドを入力しますので、参照してご利用ください。
　※2 [バイナリ:Cloud Foundry_6_32_0.xlsx](https://github.com/cxc02374/IBM-Cloud/blob/master/Cloud%20Foundry_6_32_0.xlsx)

![EX-75-20180307.jpg](https://qiita-image-store.s3.amazonaws.com/0/239597/07875e28-050d-7c14-1050-623119e1136f.jpeg)
![EX-76-20180307.jpg](https://qiita-image-store.s3.amazonaws.com/0/239597/9771fdff-adcb-3030-0d8c-2792202abf9c.jpeg)
![EX-77-20180307.jpg](https://qiita-image-store.s3.amazonaws.com/0/239597/14c8979b-71fe-6c3b-aecd-98f5d786c304.jpeg)
![EX-78-20180307.jpg](https://qiita-image-store.s3.amazonaws.com/0/239597/7ef14d91-9cc8-898f-d10a-3ba8e7aff0c8.jpeg)
![EX-79-20180307.jpg](https://qiita-image-store.s3.amazonaws.com/0/239597/f8190a78-c385-30e4-cca4-391b382db188.jpeg)
![EX-80-20180307.jpg](https://qiita-image-store.s3.amazonaws.com/0/239597/786b5f97-09c8-0c63-91a3-aef98a8f6d17.jpeg)
![EX-81-20180307.jpg](https://qiita-image-store.s3.amazonaws.com/0/239597/590c253e-670b-134c-c5b9-f92378735e1a.jpeg)
![EX-82-20180307.jpg](https://qiita-image-store.s3.amazonaws.com/0/239597/40c059f9-57e5-bcd5-7693-5bb4aab4a461.jpeg)

以上、おそまつ