node.jsを触るために簡単なチャットシステムを作る（サーバー接続編）

Node.js を触ってみたいと思ったので、備忘録も兼ねて以下に記します。
よりよい方法やバグ等ございましたら、アドバイスいただけると光栄です。

今回は「サーバー接続編」ということで、クライアントとサーバーの接続処理をやっていきます。

※前回 [node.jsを触るために簡単なチャットシステムを作る（環境構築編）](https://qiita.com/sunnyG/items/60b1968cd4cc390ff804) という表題で、環境構築をしていますので、環境構築がまだな方はこちらを参照ください。

# サーバーを起動する

まずは、`mychat` フォルダに、`server.js` というファイルを作成します。

```console
$ cd mychat
$ touch server.js
```

ファイルが作成出来たら、`server.js` を下記のようにします。

```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);
});
```

## 動作を確認する

下記コマンドで実行すると動作の確認が出来ます。

```console
$ node server.js
server starts on port: 3000
```

3000番ポートでサーバーが立ち上がったことが分かるかと思います。
尚、起動したサーバーは、「Ctrl + C」で終了します。

# HTMLファイルを表示する

実際にビュー側に表示させるHTMLファイル `/public/index.html` を作成します。

```console
$ mkdir public
$ touch index.html
```

ファイルが作成出来たら、`/public/index.html` を下記のようにします。

```html: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` の「サーバーの起動」処理の前に、以下の処理を追加します。

```js:server.js
// 公開フォルダの指定
app.use(express.static(__dirname + '/public'));
```

## 動作を確認する

サーバーを立ち上げた状態で、
http://localhost:3000 にアクセスすると
![test.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/198450/7fe0a254-effb-65f5-dbf2-2dd03255f7db.png)
このように表示されれば完了です。

# クライアントとサーバーを接続する
サーバーとクライアントの接続が確立すると、下記イベントが発生します。
・ サーバー側　　 ： `connection` イベント（`/public/server.js` に記載）
・ クライアント側 ： ` connect` イベント（`/public/client.js` に記載）


サーバーへの接続要求処理、接続時の処理を記載するJSファイル（/public/client.js）を作成します。

```console
$ touch client.js
```

ファイルが作成出来たら、`/public/client.js` を下記のようにします。

```js:client.js
'use strict';

// クライアントからサーバーへの接続要求
const socket = io.connect();

// 接続時の処理
socket.on('connect', () => {
    console.log('connect');
});
```

上記の `client.js` ファイルを反映させる為
`public/index.html` の `<body>` の末尾に、以下の処理を追加します。

```html:index.html
<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` 全体としては、以下のようになります。

```html: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` の「公開フォルダの指定」処理の前に、以下の「接続時の処理」を追加します。

```js:server.js
// 接続時の処理
io.on('connection', (socket) => {
    console.log('connection');
});
```

`server.js` 全体としては、以下のようになります。

```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;

// グローバル変数
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 にアクセスします。
![test2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/198450/022ea199-6d42-98f4-76cf-2e54f0335dd6.png)

デベロッパーツールの Console に、`connect` と表示（画像赤線）されます。

また、サーバー側では `connection` と表示されれば完了です。

```console
$ node server.js
server starts on port: 3000
connection
```
尚、起動したサーバーは、`Ctrl + C` で終了します。


# クライアントとサーバーを切断する

クライアントが切断したら、サーバー側では `disconnect` イベントが発生します。

`server.js` の接続時の処理の中に、切断時の処理を追加します。

```js:server.js
// 切断時の処理
socket.on('disconnect', () => {
    console.log('disconnect');
});
```

`server.js` 全体としては、以下のようになります。

```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;

// グローバル変数
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` と表示されれば完了です。

```config
$ node server.js
server starts on port: 3000
connection
disconnect
```

以上で、クライアントとサーバーの接続に関する基本処理が完了です。
次回は実際にメッセージを送信してみます。

# 関連記事

+ [node.jsを触るために簡単なチャットシステムを作る：環境構築編](https://qiita.com/sunnyG/items/60b1968cd4cc390ff804)
+ [node.jsを触るために簡単なチャットシステムを作る：サーバー接続編](https://qiita.com/sunnyG/items/2e7b9d89acfc2b0938e4)
+ [node.jsを触るために簡単なチャットシステムを作る：メッセージ送信編](https://qiita.com/sunnyG/items/859aed447fa88665e601)