Node.js を触ってみたいと思ったので、備忘録も兼ねて以下に記します。
よりよい方法やバグ等ございましたら、アドバイスいただけると光栄です。
今回は「サーバー接続編」ということで、クライアントとサーバーの接続処理をやっていきます。
※前回 node.jsを触るために簡単なチャットシステムを作る（環境構築編） という表題で、環境構築をしていますので、環境構築がまだな方はこちらを参照ください。
サーバーを起動する
まずは、mychat フォルダに、server.js というファイルを作成します。
$ cd mychat
$ touch server.js
ファイルが作成出来たら、server.js を下記のようにします。
'use strict';
// モジュール
const http = require('http');
const express = require('express');
const socketIO = require('socket.io');
const moment = require('moment');
// オブジェクト
const app = express();
const server = http.Server(app);
const io = socketIO(server);
// 定数
const PORT = process.env.PORT || 3000;
// サーバーの起動
server.listen(PORT, () => {
console.log('server starts on port: %d', PORT);
});
動作を確認する
下記コマンドで実行すると動作の確認が出来ます。
$ node server.js
server starts on port: 3000
3000番ポートでサーバーが立ち上がったことが分かるかと思います。
尚、起動したサーバーは、「Ctrl + C」で終了します。
HTMLファイルを表示する
実際にビュー側に表示させるHTMLファイル /public/index.html を作成します。
$ mkdir public
$ touch index.html
ファイルが作成出来たら、/public/index.html を下記のようにします。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>mychat</title>
</head>
<body>
<h1>node.js を触ってみた</h1>
</body>
</html>
表示するHTMLファイルを上記の public/index.html に指定する為
server.js の「サーバーの起動」処理の前に、以下の処理を追加します。
// 公開フォルダの指定
app.use(express.static(__dirname + '/public'));
動作を確認する
サーバーを立ち上げた状態で、
http://localhost:3000 にアクセスすると
このように表示されれば完了です。
クライアントとサーバーを接続する
サーバーとクライアントの接続が確立すると、下記イベントが発生します。
・ サーバー側 ： connection イベント（/public/server.js に記載）
・ クライアント側 ： connect イベント（/public/client.js に記載）
サーバーへの接続要求処理、接続時の処理を記載するJSファイル（/public/client.js）を作成します。
$ touch client.js
ファイルが作成出来たら、/public/client.js を下記のようにします。
'use strict';
// クライアントからサーバーへの接続要求
const socket = io.connect();
// 接続時の処理
socket.on('connect', () => {
console.log('connect');
});
上記の client.js ファイルを反映させる為
public/index.html の <body> の末尾に、以下の処理を追加します。
<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>
index.html 全体としては、以下のようになります。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>mychat</title>
</head>
<body>
<h1>node.js を触ってみた</h1>
<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>
</body>
</html>
server.js の「公開フォルダの指定」処理の前に、以下の「接続時の処理」を追加します。
// 接続時の処理
io.on('connection', (socket) => {
console.log('connection');
});
server.js 全体としては、以下のようになります。
'use strict';
// モジュール
const http = require('http');
const express = require('express');
const socketIO = require('socket.io');
const moment = require('moment');
// オブジェクト
const app = express();
const server = http.Server(app);
const io = socketIO(server);
// 定数
const PORT = process.env.PORT || 3000;
// グローバル変数
let iCountUser = 0; // ユーザー数
// 接続時の処理
io.on('connection', (socket) => {
console.log('connection');
});
// 公開フォルダの指定
app.use(express.static(__dirname + '/public'));
// サーバーの起動
server.listen(PORT, () => {
console.log('server starts on port: %d', PORT);
});
動作を確認する
サーバーを立ち上げた状態で、
http://localhost:3000 にアクセスします。
デベロッパーツールの Console に、connect と表示（画像赤線）されます。
また、サーバー側では connection と表示されれば完了です。
$ node server.js
server starts on port: 3000
connection
尚、起動したサーバーは、Ctrl + C で終了します。
クライアントとサーバーを切断する
クライアントが切断したら、サーバー側では disconnect イベントが発生します。
server.js の接続時の処理の中に、切断時の処理を追加します。
// 切断時の処理
socket.on('disconnect', () => {
console.log('disconnect');
});
server.js 全体としては、以下のようになります。
'use strict';
// モジュール
const http = require('http');
const express = require('express');
const socketIO = require('socket.io');
const moment = require('moment');
// オブジェクト
const app = express();
const server = http.Server(app);
const io = socketIO(server);
// 定数
const PORT = process.env.PORT || 3000;
// グローバル変数
let iCountUser = 0; // ユーザー数
// 接続時の処理
io.on('connection', (socket) => {
console.log('connection');
// 切断時の処理
socket.on('disconnect', () => {
console.log('disconnect');
});
});
// 公開フォルダの指定
app.use(express.static(__dirname + '/public'));
// サーバーの起動
server.listen(PORT, () => {
console.log('server starts on port: %d', PORT);
});
動作を確認する
サーバーを立ち上げた状態で、
http://localhost:3000 にアクセスします。
ページが表示されたら、ページを閉じます。
下記のようにサーバー側で disconnect と表示されれば完了です。
$ node server.js
server starts on port: 3000
connection
disconnect
以上で、クライアントとサーバーの接続に関する基本処理が完了です。
次回は実際にメッセージを送信してみます。