VSCodeでHTMLを書くその3
■ 前提
VSCodeでHTMLを書くその1~2を完了していること。
■ 今回のターゲット
① ブラウザーから入力した文字列をターミナルにアウトプットする。
② 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>が入力されます。
エディターにカーソルのフォーカスがある状態で、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 run
「接続中...」がターミナルにアウトプットされます。
次にブラウザーのURLに「http://127.0.0.1:1000/」を入力します。
サーバからのレスポンスでInput.htmlが表示されました。
ブラウザーのテキストボックスに「Hello World!」を入力して、送信ボタンを押下します。
ターミナルに以下がアウトプットされます。
※2 プログラムの停止はターミナルでCtrl+cでキャンセルします。
[Msg=Hello+World%21]ブランクと!が置き換わっています。説明は次回します。
これで、ブラウザーからの入力を読み取ることができました。
■ まとめ
basicでhttpサーバをコードしました。基本の基本。
けっこうやることがたくさんあったので、ここまでがんばった人は◎かな。
色々いじくり回してみてください。
今回はプログラムの説明を割愛したので、次回やります。
以上、おそまつ