ホーム > プログラミング > Webチャットアプリを作る > 01.クライアントとサーバーの接続時の処理を作る

01.クライアントとサーバーの接続時の処理を作る



サーバー側のファイル、クライアント側のファイルを作成します。
クライアントとサーバーの接続時の処理を作成します。

解説

Nodeを用いて、Webアプリを作成するために、最低限すべきことは以下です。

クライアントとサーバーの接続に関する処理は、以下です。

Node.js、Express、Socket.ioのインストール

Node.js、Express、Socket.io をインストールしていない場合は、まず、Node.js、Express、Socket.io をインストールします。

Node.js がインストール済みかは、「node --version」コマンドで確認できます。
Express がインストール済みかは、「express --version」コマンドで確認できます。

Raspbian の場合の例。


Windows の場合の例。

Webチャットアプリ用のフォルダの作成

Webチャットアプリ用のフォルダとして、「MyChat」というフォルダを作成します。

サーバー起動処理

「MyChat」フォルダに、「server.js」というファイルを作成します。

「server.js」 の内容を以下のようにします。

動作を確認

node でサーバーを起動します。

「Server on port 1337」と表示されます。

起動したサーバーは、「Ctrl + C」で終了します。

公開フォルダ・ファイルの作成と、公開フォルダの指定

「MyChat」フォルダに、「public」というフォルダを作成します。

「public」フォルダに、「index.html」というウェブページファイルを作成します。

「public/index.html」 の内容を以下のようにします。


「server.js」 の「サーバーの起動」処理の前に、以下の「公開フォルダの指定」処理を追加します。


「server.js」 全体としては、以下のようにします。

動作確認

node でサーバーを起動します。

ブラウザから、「localhost:1337」にアクセスします。


「My Chat」と表示されます。

起動したサーバーは、「Ctrl + C」で終了します。

クライアントから接続要求と、接続時の処理の作成

「public」フォルダに、「client.js」というファイルを作成します。

「public/client.js」 に、サーバーへの接続要求処理、接続時の処理を記述します。
「public/client.js」 の内容を以下のようにします。


「public/index.html」 の、「body」部の末尾に、以下の「client.js」ファイルを組み込む処理を追加します。


「server.js」 の「公開フォルダの指定」処理の前に、以下の「接続時の処理」を追加します。


「server.js」 全体としては、以下のようにします。

動作確認

node でサーバーを起動します。
ブラウザから、「localhost:1337」にアクセスします。


Chrome のデベロッパーツール※1の 「Console」に、
「connect」
と表示されます。

※1:Chrome のデベロッパーツールは、
「Chromeの右上の[・・・] > その他のツール > デベロッパーツール」
もしくは「Ctrl + Shift + I」
もしくは「F12」
で開くことができます。


サーバー側では、
「connection」
と表示されます。

起動したサーバーは、「Ctrl + C」で終了します。

ダウンロード

サンプルプログラム

関連ページ

次項目:02.クライアントとサーバーの切断時の処理を


ご意見、ご感想、ご質問、ご要望等は、「コメントを投稿する」もしくは「ホーム > コンタクト」よりお願いいたします。
内容の誤り、誤字脱字、リンクミスなどの問題点を発見された場合には「コメントを投稿する」もしくは「ホーム > コンタクト」より連絡していただけると幸いです。


Copyright (c) 2005-2018 Nobuki HIRAMINE All rights reserved.