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

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

解説

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

サーバー側で動作するプログラムを作成する。( server.js )
クライアント側で表示させるウェブページを作成する。（ public/index.html )
クライアント側で動作するプログラムを作成する。( public/client.js )

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

クライアントからサーバーへ接続要求をします。( io.connect() )
サーバーとクライアントの接続が確立すると、サーバー側で、'connection'イベントが発生します。所望の処理を行います。( io.on('connection',・・・) )
サーバーとクライアントの接続が確立すると、クライアント側で、'connect'イベントが発生します。所望の処理を行います。( socket.on('connect',・・・) )

Node.jsのインストール

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

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

Raspbian の場合の例。

Windows の場合の例。

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

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

Node.jsのパッケージ管理の初期化

Node.jsのパッケージのインストールに先立ち、パッケージ管理の初期化をします。

「MyChat」フォルダに移動し、下記コマンドを実行します。

npm init

package name : 何も入力せずエンターキーを押します ( mychatとなる )
version : 何も入力せずエンターキーを押します ( 1.0.0となる )
description : 何も入力せずエンターキーを押します (空となる)
entry point : server.js と入力しエンターキーを押します
test command : 何も入力せずエンターキーを押します (既定のtest コマンドが登録される)
git repository : 何も入力せずエンターキーを押します (空となる)
keywords : 何も入力せずエンターキーを押します (空となる)
author : 何も入力せずエンターキーを押します (空となる)
license : 何も入力せずエンターキーを押します (ISCとなる)

Is this OK? : y を入力しエンターキーを押します。

Windows の場合の例。

「MyChat」フォルダに、「package.json」ファイルが生成されます。
「package.json」ファイルの内容は以下のような内容になっています。
{ "name": "mychat", "version": "1.0.0", "description": "", "main": "server.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC" }

Node.jsのパッケージのインストール

「MyChat」フォルダに、Node.jsのパッケージ「Express」と「Socket.io」をインストールします。

Webチャットアプリ用のフォルダに移動し、下記コマンドを実行します。

npm install express --save

npm install socket.io --save

Windows の場合の例（「Express」のインストール）

Windows の場合の例（「socket.io」のインストール）

「node_modules」
「MyChat」フォルダに、「node_modules」フォルダが生成され、フォルダ内に、Node.jsのパッケージ「Express」と「Socket.io」および関連パッケージがインストールされます。

「package.json」ファイルの内容は以下のような内容になっています。
（dependenciesセクションが追加され、expressとsocket.ioに関する記述が追加されます。）
{ "name": "mychat", "version": "1.0.0", "description": "", "main": "server.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC", "dependencies": { "express": "^4.16.4", "socket.io": "^2.2.0" } }

サーバー起動処理

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

「server.js」の内容を以下のようにします。
'use strict'; // モジュール const express = require( 'express' ); const http = require( 'http' ); const socketIO = require( 'socket.io' ); // オブジェクト const app = express(); const server = http.Server( app ); const io = socketIO( server ); // 定数 const PORT = process.env.PORT || 1337; // サーバーの起動 server.listen( PORT, () => { console.log( 'Server on port %d', PORT ); } );

動作を確認

サーバーを起動します。
「MyChat」フォルダで、下記コマンドを実行します。
node server.js

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

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

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

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

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

「public/index.html」の内容を以下のようにします。
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title>My Chat</title> </head> <body> <h1>My Chat</h1> </body> </html>

「server.js」の「サーバーの起動」処理の前に、以下の「公開フォルダの指定」処理を追加します。
// 公開フォルダの指定 app.use( express.static( __dirname + '/public' ) );

「server.js」全体としては、以下のようにします。
'use strict'; // モジュール const express = require( 'express' ); const http = require( 'http' ); const socketIO = require( 'socket.io' ); // オブジェクト const app = express(); const server = http.Server( app ); const io = socketIO( server ); // 定数 const PORT = process.env.PORT || 1337; // 公開フォルダの指定 app.use( express.static( __dirname + '/public' ) ); // サーバーの起動 server.listen( PORT, () => { console.log( 'Server on port %d', PORT ); } );

動作確認

サーバーを起動します。
「MyChat」フォルダで、下記コマンドを実行します。
node server.js

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

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

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

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

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

「public/client.js」に、サーバーへの接続要求処理、接続時の処理を記述します。
「public/client.js」の内容を以下のようにします。
// クライアントからサーバーへの接続要求 const socket = io.connect(); // 接続時の処理 // ・サーバーとクライアントの接続が確立すると、 // 　サーバー側で、'connection'イベント // 　クライアント側で、'connect'イベントが発生する socket.on( 'connect', () => { console.log( 'connect' ); } );

「public/index.html」の、「body」部の末尾に、以下の「client.js」ファイルを組み込む処理を追加します。
<script src="/socket.io/socket.io.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="client.js"></script>

「server.js」の「公開フォルダの指定」処理の前に、以下の「接続時の処理」を追加します。
// 接続時の処理 // ・サーバーとクライアントの接続が確立すると、 // 　サーバー側で、'connection'イベント // 　クライアント側で、'connect'イベントが発生する io.on( 'connection', ( socket ) => { console.log( 'connection' ); } );

「server.js」全体としては、以下のようにします。
'use strict'; // モジュール const express = require( 'express' ); const http = require( 'http' ); const socketIO = require( 'socket.io' ); // オブジェクト const app = express(); const server = http.Server( app ); const io = socketIO( server ); // 定数 const PORT = process.env.PORT || 1337; // 接続時の処理 // ・サーバーとクライアントの接続が確立すると、 // 　サーバー側で、'connection'イベント // 　クライアント側で、'connect'イベントが発生する io.on( 'connection', ( socket ) => { console.log( 'connection' ); } ); // 公開フォルダの指定 app.use( express.static( __dirname + '/public' ) ); // サーバーの起動 server.listen( PORT, () => { console.log( 'Server on port %d', PORT ); } );

動作確認

サーバーを起動します。
「MyChat」フォルダで、下記コマンドを実行します。
node server.js

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

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

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

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

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

ダウンロード

サンプルプログラム

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

解説

Node.jsのインストール

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

Node.jsのパッケージ管理の初期化

Node.jsのパッケージのインストール

サーバー起動処理

動作を確認

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

動作確認

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

動作確認

ダウンロード

関連ページ