今回は「なでしこ」を使って web (ウェブ) サーバ、web socket (ウェブソケット)サーバを動かします。いままでの演習ではブラウザ上でプログラムが動いていましたが、それではサーバを動かせないので別の形式（コンソール上）で動く「なでしこ v3」をインストールし、それを使って動かします。
以下の手順を進めるときにセキュリティの確認画面が出たら、パブリックネットワーク、プライベートネットワーク共に、チェックを入れて許可をクリックして下さい。
また Windows での実行を前提としています。macOS を使いたい場合は相談して下さい。
パソコン(Windows)に、なでしこ3をインストールして下さい。インストール方法はhttps://nadesi.com/doc3/index.php?Windows%2FDownloadにあります。
なでしこv3の開発用エディタ nakopad.vbs を起動してプログラムを書いてみましょう。「設定」→「なでしこ実行方式」が「コンソール3 - cnako3 (3)」になっている（チェックマークが入っている）ことを確認して下さい（以下でも同じです。うまく動かないときは、これを一度確認して下さい）。
次の行を入力して
「こんにちは」と表示
実行ボタン（▶）をクリックしてみましょう。 次の画面のようになればOKです。何かキーを押して、背景が黒いウィンドウを閉じましょう。
web サーバは以前の講義で説明したように HTTP でサービスを提供するサーバです。なでしこ v3 で簡単に web サーバを作成できるので作って見ましょう。ここで作成する web サーバは、あらかじめ用意したファイルをブラウザに渡してくれるサーバです。
次のプログラムを入力しましょう。
!「plugin_express」を取り込む。
WEB_PORT=8080
WEB_PORTでWEBサーバ起動した時には
「下記のアドレスにWEBブラウザでアクセスしてください。」と表示。
自分IPアドレス取得して反復
「- http://{対象}:{WEB_PORT}」を表示。
ここまで
「/」を「data」へWEBサーバ静的パス指定。
ここまで。
入力できたらファイルを保存します。保存場所はどこでも構いませんが憶えておいてください。ここでは、デスクトップに、www フォルダを作って、www.nako3 の名前で保存します。www.nako3 ファイルのあるフォルダに data フォルダを作っておきます。
このプログラムの一行目は「取り込む」で必要なプラグイン（ライブラリ）を読み込んでいます。2行目はサーバのポート番号にする8080を変数WEB_PORTに代入しています。
4行目から最後の行までで、webサーバを起動し、起動時のメッセージの表示（下記の〜ください。）とサーバのIPアドレスの表示をしています。一つのパソコンに複数のIPアドレスが割り当てられるので、「反復」を使ってすべて表示しています。127.0.0.1 は必ず表示される、パソコン自体を表す IP アドレスです。このアドレスで、ほかのコンピュータと通信は出来ません。それ以外に表示される IP アドレスが他のパソコン等からアクセスできるIPアドレスです。
「WEBサーバ静的パス指定」では、サーバにアクセスしたときにクライアントへ返すデータの入ったディレクトリ（フォルダ）を指定しています。ここでは data ディレクトリ(フォルダ）です。
実行ボタン（▶）をクリックしてプログラムを実行して下さい。プログラム実行の画面が開き、サーバが起動します。サーバの IP アドレスとポート番号が表示されているのを確認して下さい。プログラムが起動している状態で web ブラウザから http://localhost:8080/ もしくは http://127.0.0.1:8080/ を開いて下さい。ブラウザの表示は図のようになるはずです。
「Cannot GET /」とあるのは、/ にあるデータをサーバを見つけられなかったので、クライアントに渡せないというメッセージです。サーバは動作しています。
次の内容の HTML ファイルを作りデータフォルダ内に index.html という名前で保存して下さい(HTMLタグが入っているのでコピーペーストがうまくできる形で表示できないので画像です、入力が面倒ならこちら)。
ブラウザでリロードすると Server is working が表示されるはずです。
以前の宿題で作成した HTML ファイルと画像ファイルを data フォルダにコピーしてみましょう。 HTML ファイルが syukudai.html なら、http://localhost:8080/syukudai.html にアクセスすると自分の作ったファイルが見れるはずです。画像ファイルが gazou.png なら、http://localhost:8080/gazou.png を開いてみましょう。表示されるはずです。これらから分かるように、URL の後の部分は、このサーバの場合、data フォルダ内のファイル名になっています。
data フォルダの中に、folder1 というフォルダを作り、その中に gazou1.png を置いているなら、http://localhost:8080/folder1/gazou1.png でアクセスできます。「/」が区切り記号でフォルダの中にあるファイル(フォルダ)を表します。folder1内のfolder2内の gazou1.png なら、http://localhost:8080/folder1/folder2/gazou1.png となります。
index.html は特別なファイルで、フォルダ内のファイル名を省略したときにサーバが返すファイルです。URLが短くなるのでよく使われます。試しに自分で作った HTML ファイルの名前を index.html に変えてファイル名を省略して (http://localhost:8080/ で) アクセスしてみましょう。
家の中などで同じネットワーク(IPアドレスのネットワーク部が同じ)にある PC やスマートフォンからもアクセスできます。その場合は 127.0.0.1 ではない方の IP アドレスで、プロトコルが http の URI (URL) を使います。例の場合は http://10.86.177.254:8080/ です。
動作が分かったらプログラムを止めます。実行画面(背景が黒いウインドウ)で、Ctrl キーを押しながら Cのキーを押す(Ctrl-C) と「バッチ ジョブを終了しますか (Y/N)?」と聞かれるので y を入れ、エンターキーを押します。
サーバを止めた状態でブラウザからアクセスするとどうなるかも確かめておきましょう。
HTTP では、ファイルを一つサーバからブラウザに渡すたびに TCP の接続を終了します。そのため大量のアクセスをされても大丈夫なサーバが実現できるというメリットがある一方で、クライアントの要求にすばやく応えて、応答を返すようなことが難しいという問題がありました。
その解決策として使われているのが web socket です。web socket があるから、Google Document, Spreadsheet, G-mail などブラウザ上で動き、データがサーバにあって頻繁にサーバとブラウザが通信しているにもかかわらず、デスクトップアプリケーションのように動作する、web アプリケーションが実現されています。
そういった高度なサービスを作るときだけではなく、ちょっとしたアプリケーションにも web socket は便利なため、なでしこ v3 でも利用が出来るようになっています。
2021j2.zip をダウンロードして展開して下さい。展開できたらファイルをなでしこv3の開発用エディタ nakopad.vbs を起動して、展開した中にあるファイル shindan.nako3 を開いて下さい(nako3 ファイルをダブルクリックでエディタを開くとうまく動かないので注意)。開いたら実行してブラウザからアクセスしてみましょう。URLは3 web サーバの場合と同じです。ブラウザの表示だけでなく cmd.exe (コンソール) の表示も見て下さい。
ほかのプログラム quiz.nako3, autoanswer.nako3, chat.nako3 を実行して、ブラウザからアクセスしてみて下さい。そのとき、プログラムを見て、どのような応答をしそうか予想しながら、入力をして試して下さい。なお chat.nako3 はチャットサーバなので、ブラウザで2つウィンドウまたはタブを開くか、別のスマートフォン/PCなどを使って同時にアクセスしてみて下さい。
診断メーカーで構成を説明します。なでしこで書いたプログラムは shindan.nako3 です。ほかに data1 フォルダ内の fukidashi.css, icon.png, index.html, main.js で構成しています。index.html にブラウザに表示する基本的な部分を書いてあります。またファイルの先頭で、ブラウザに表示する名前を入れている変数に名前「なでしこ」が入っています。icon.png は、診断メーカーのアイコンになっているファイルです。この二つを変えると名前とアイコンが変わります。
fukidashi.css は、表示を吹き出し風にするために使っています。CSS (Cascading Style Sheets, カスケーディングスタイルシート)は HTML の見え方を指定する言語で、fukidashi.css は CSS 言語で書かれたファイルです。HTML だけだと表示がそっけなくなるのを吹き出し風にしています。このファイルのオリジナルは、セイさんによるものhttps://jisuijisan.com/speech-bubble/です。
main.js が web ソケットの通信と、新しい情報の表示を担っています。
fukidashi.css, icon.png, index.html, main.js はブラウザに必要なファイルです。ブラウザでサーバに / を要求すると、サーバは index.html を返します。index.html 内に fukidashi.css と main.js が必要であると書いてあるので、ブラウザはこの2つも要求します。この2つをブラウザが受け取ると表示をきれいにし、 main.js を実行します。main.js は動作の開始時に web socket プロトコルでサーバとの通信を開始します。また main.js は必要に応じて icon.png をサーバに要求します。
ブラウザに文字（名前）を入力してエンターキーを押すと、main.js 内のプログラムが、ブラウザに名前を表示して、サーバに名前を送ります(web socket)。名前を受け取ったサーバ (shindan.nako3) のプログラムは診断結果をブラウザの main.js 内のプログラムに返し(web socket)、受け取ったプログラムがブラウザに表示します。このように、最初の通信は HTTP で、以降の通信は web socket で行います。
プログラムの先頭では必要なプラグインを読み込み、HTTP サーバと web socket サーバのポート番号を変数に代入しています。
web socket での通信では、サーバの起動、通信の接続、データの受け取りと行ったイベントで何をするかを先に設定してからサーバを起動します。
そこで web socket サーバが起動したとき、起動に失敗したとき、サーバにクライアントが接続したときに実行する内容を書いています。それぞれのイベントが起きたときに「ここまで」のプログラムが実行されます。9, 10 行目では web socket サーバにアクセスするための URI を表示しています。17〜19行目は、クライアントの情報をコンソールに表示しています。20行目で、クライアントに「名前を教えてね」と返しています。「WSサーバ接続したときには」で「WSサーバ個別送信」を使うと、そのときに接続したクライアントにデータを送信できます。
web socket からデータを受け取ったときには「WSサーバ受信時には」から「ここまで」のプログラムが実行されます。このとき「WSサーバ相手」にはクライアントのIPアドレスとポート番号が入っています。「対象」には受け取ったデータ（診断メーカーでは名前）が入っています。
このプログラムは診断メーカーなので、3の乱数(0から2の乱数)で条件分岐をして、前世、場所を決めて、診断結果である文に、対象、場所、前世を埋め込んで、「WSサーバ個別送信」でクライアントにデータ（診断結果）を送信しています。
この行で web socket のサーバを起動します。
ここでは 3 web サーバと同様に HTTP のサーバを実現しています。
チャットサーバの場合には、受け取ったデータを個別のクライアントではなく、全てのクライアントに送信することで、一つのクライアントが送ったデータを他のクライアントに渡すようにしています。そのため「WSサーバ個別送信」ではなく、「WSサーバ全送信」を使っています。
また自分の入力した内容を表示しないために、chat.js で、自分が直前に送ったメッセージと同じものを受け取った場合には表示しないようにしています。
クイズ(quiz.nako3) では画像が入っています。また自動応答 (autoanswer.nako3)ではリンクが入っています。この仕組みは簡単で、なでしこのプログラムから「WSサーバ個別送信」で送っているデータに HTML のタグを使っています。ブラウザはタグを受け取るとimgタグであれば画像をサーバに要求して表示し、リンクであればリンクの表示をします。どのようにしているかは、quiz.nako3, autoanswer.nako3 をみてください。また画像については、data3フォルダの中に画像ファイルがあるのがわかると思います。
クイズについては、通信しているクライアントごとに、どの問題を出したか憶えておく必要があります。そのために、状態という名前の辞書型変数を使って、クライアントのIPアドレスとポート番号の組みに対して、どの問題を出したか憶えています。
前回の講義課題の診断メーカーをこの仕組みで動くようにし、画像を診断結果で表示して下さい。shindan.nako3 の改造で構いません。また改良しても構いません。次回(6/22)の講義で実行している様子を見せてください。出来なかった人も 6/29(火) の授業時には見せてください。
次回以降でサンプルで提示したプログラムを参考に、自動応答やクイズなどで何かを便利にする(あるいは楽しくする)ことを考えてみてください(提出は不要)。実際の作成を始めても構いません。
Copyright(c) 2021, Noriaki Mitsuanga