VSCodeでHTMLを書くその３

■　前提

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

■　今回のターゲット

　　①　ブラウザーから入力した文字列をターミナルにアウトプットする。
　　②　basic言語で簡易なhttpサーバをコードする。

■　Webアプリ仕様

　HTMLはテキストボックスとボタンを一つづ配置します。
　テキストボックスに入力後、ボタン押下で簡易httpサーバで受信を行い、ターミナルに受信した文字列をアウトプットします。
　　
■　入力用htmlの作成

　前準備としてHTML入力の拡張機能をインストールします。
　拡張機能ボタン押下→検索文字列「HTML Snippers」→インストール→再読込

　Ctrl+n 新規ファイル作成
　Ctl+s ファイルの保存
　ファイル名「Input.html」で保存

　[エディター]!(ビックリーマーク）を入力
　[エディター]tabキーを押下
　HTMLの基本テンプレートが展開されます。

　[エディター] <body>以下10行目でtabキー
　[エディター] formを入力すると表示されるリストのform:postを選択(Enter)

　<form action="" method="post"></form>が展開されます。
　action=""の中身はとりあえずブランクにしておきます。（後で入力します)

　[エディター]</form>の前にカーソルを合わせて、Enterキー(改行)
　次にFormの中に項目を入力します。

　文字列入力のためにテキストボックスを準備します。
　<form>タグの下の行に、
　[エディター]p>input:textを入力します。(リストから選択可能)
　[エディター]Enterキー

　<p><input type="text" name="" id=""></p>が展開されます。

name=""に"Msg"を入力します。

　id属性を使用しないので、削除します。

　入力ボタンを準備します。
　[エディター]</p>の後ろでEnterキー(改行)
　一行空けます。

　[エディター]p>input:submitを入力(リストから選択可能)してEnter

　<p><input type="submit" value=""></p>が入力されます。

　[エディター]Value=""に「送信」を入力します。

　エディターにカーソルのフォーカスがある状態で、Ctrl+F1キーでこのInput.htmlを表示してみます。

　入力用のテキストボックスと送信ボタンが表示されます。
　これで入力用の画面ができました。

■　Basicプログラム作成

　前回のhello Worldディレクトリを選択。
　Program.vbのファイル名を変更する→「Program.txt」(Hollo World!卒業かな)

　※1 参照することがあると思うので残しておいて問題なし。

　Ctrl+n 新規ファイル作成
　Ctl+s ファイルの保存
　ファイル名「Program.vb」で保存

この線以下を選択して、Ctrl+cでコピー、VSCodeのウィンドウを選択、Ctrl+vでProgram.vbに貼り付けます。
↓---------------------------------------------------------------------------------------------------------------

Imports System

Module Program

    Const port As Integer = 1000            ' 待機ポート番号
    Const ipString As String = "127.0.0.1"  ' URL
    Const InFile = "C:\Users\kousei00\basic\Hello World\Input.html"
    Dim Buf  As String ' html格納領域

    Sub Main()

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

        While True
            ' クライアント接続
            Console.Write("接続中...")
            Dim client As System.Net.Sockets.TcpClient = listener.AcceptTcpClient()
            Console.WriteLine("接続完了.")
            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を読込みBufへバッファしブラウザーへ送信
            Call ReadHtml()
            Dim Send As Byte() = System.Text.Encoding.Default.GetBytes(Buf)
            Clt.Write(Send, 0, Send.Length)
            ' 後始末
            Clt.Close()
            client.Close()
        End While
        listener.Stop()
    End Sub

    ' Htmlを読込みBufへバッファする
    Sub ReadHtml()
        Dim sr As New System.IO.StreamReader(InFile)
        Dim s As String =  sr.ReadToEnd() 
        ' バッファにhtmlを設定
        Buf = s 
        sr.Close()
        'Console.WriteLine(s)
    End Sub

End Module

↑---------------------------------------------------------------------------------------------------------------
この線より上を選択

　プログラムの説明は次回。
　とりあえず、buildしてrunしましょう。

　[ターミナル]dotnet build

　[ターミナル]dotnet run

　「接続中...」がターミナルにアウトプットされます。

　次にブラウザーのURLに「http://127.0.0.1:1000/」を入力します。

サーバからのレスポンスでInput.htmlが表示されました。

ターミナルに以下がアウトプットされます。

　ブラウザーのテキストボックスに「Hello World!」を入力して、送信ボタンを押下します。

ターミナルに以下がアウトプットされます。

　※2 プログラムの停止はターミナルでCtrl+cでキャンセルします。

［Msg=Hello+World%21］ブランクと!が置き換わっています。説明は次回します。

　これで、ブラウザーからの入力を読み取ることができました。

■　まとめ

　basicでhttpサーバをコードしました。基本の基本。
　けっこうやることがたくさんあったので、ここまでがんばった人は◎かな。
　色々いじくり回してみてください。
　今回はプログラムの説明を割愛したので、次回やります。

以上、おそまつ