簡易チャットアプリの作成

# 簡易チャットアプリの作成
Node.js + Express + Socket.ioを用いて簡易チャットアプリを作る。
## はじめに
最近、Node.jsを勉強し始めたので、解釈が間違っているとこが多々あると思います・・・
コメントで指摘していただけるとありがたいです。
### クライアントとサーバーについて 
自分なりの解釈をまとめてみる
- <font color="red"> サーバー(server)</font>    
    - 何かを提供するor何かを使える状態にしてくれる  
    = （食べ物、料理などを）提供する人[<font color="Green">**料理人**</font>]
- <font color="red">クライアント(client)</font>
    - 何かを提供される人or何かを使える状態にしてもらう
    = （食べ物、料理などを）提供してもらう人[<font color="Green">**お客さん**</font>]
### クライアントとサーバーのやり取りの流れについて
1. クライアントがサーバーに<font color ="blue">**リクエスト**</font>を送る  
     ＝ お客さんが料理人に<font color ="blue">**料理の注文**</font>を頼む
1. サーバーがリクエストを<font color ="yellow">解析、処理</font>してリクエストの答えを作る  
＝ 料理人が料理の注文を聞いて<font color="yellow">必要な食材を食べれるように調理</font>して料理を作る
1. サーバーがクライアントに<font color ="green">**レスポンス**</font>を返す  
＝　料理人がお客さんに<font color="green">**作った料理**</font>
を持っていく

## コード
### 1.GETリクエストが来たら、Hello Worldの表示

```javascript
var express = require('express');
var app = express();
var http = require('http').Server(app);
const PORT = process.env.PORT || 7000;

app.get('/' , function(req, res){
   res.send('hello world');
});

http.listen(PORT, function(){
  console.log('server listening. Port:' + PORT);
});
```
1. `'/'`←**リクエストURI**にGETリクエストして来たら  
    - **リクエストURI**・・・クライアントからサーバにリクエストする対象(サーバー内に保管されているリソース)
1. GETリクエストを処理してレスポンス(Hello world の表示)

 ```javascript
 //GETリクエストの処理 app.get(リクエストURI,コールバック関数)
 app.get('/' , function(req, res){
   res.send('hello world');
});
```
### 2. HTMLファイルをレスポンス
変更点

```javascript:app.js
app.get('/' , function(req, res){
   res.sendFile(__dirname + '/index.html');
});
```
使用するHTMLファイルは以下の通り

```html:index.html
<!DOCTYPE html>
<html>
<head>
    <title>chat</title>
</head>
<body>
    <h1>Socket IOを使う</h1>
</body>
</html>
```
こうすることで、HTMLの内容をローカルサーバーに表示する

### 3. Socket.ioの使用（クライアント→サーバー）

```javascript:app.js
/*(省略)*/

const io = require('socket.io')(http);

/*(省略)*/

io.on('connection',function(socket){
    console.log('connected');
});

/*(省略)*/

```

```html:index.html
<!DOCTYPE html>
<html>
<head>
    <title>socket.io chat</title>
    <script src="/socket.io/socket.io.js"></script>
</head>
<body>
    <ul id="messages"></ul>
    <form>
      <input id="input_msg" autocomplete="off" /><button>Send</button>
    </form>
  <script>
　　 var socket = io();
    $(function(){
        $('#message_form').submit(function(){
            socketio.emit('message', $('#input_msg').val());
            $('#input_msg').val('');
            return false;
        });
    });
　</script>
</body>
</html>
```
**Socket.ioの関数の解説**

```javascript 
io.on('connection',function(socket){ ... });
```
サーバーとクライアントとの接続が確率すると、
- クライアント：'connect'イベント
- サーバー：'connection'イベント  
が発生する  
    - サーバの**connection**イベントが発生するとコールバック関数の`function(socket){ ... }` が呼ばれる
### 4. Socket.ioの使用（サーバー→クライアント）
次に、サーバーからクライアント全員にデータ送信する処理を追加する

```javascript:app.js
io.on('connection',function(socket){
    socket.on('message',function(msg){
        console.log('message: ' + msg);
        io.emit('message', msg);
    });
});
```
2. 受け取ったメッセージをクライアント全員に送信
3. 
```javascript
io.emit('message',msg)
```
を用いることで実装可能  
その次に、クライアント側でサーバから受け取った情報を表示する

```html:index.html
<!-- クライアント側の処理を記述する -->
<body>
    <ul id="messages"></ul>
    <form id="message_form" action="#">
    <input id="input_msg" autocomplete="off"/><button>Send</button>
    </form>
    <script>
        var socketio = io();
        $(function(){
            $('#message_form').submit(function(){
                socketio.emit('message', $('#input_msg').val());
                $('#input_msg').val('');
                return false;
            });
            socketio.on('message',function(msg){
                $('#messages').append($('<li>').text(msg));
            });
        });
    </script>
</body>
```
**コード解説**
`$("A").B(){ .. }`   
- AをBする  
 
`$('#messages').append($('<li>').text(msg));`  
    - `$('対象要素').append('追加したい要素');`
    - `$('<li>').text(msg);`
    = `<li>（msgの内容）<li>`
        - メッセージIDにliタグとliタグのメッセージを追加する

```javascript
$(function(){ ... } 
```
はページ読み込みが終わって、DOMが構築された時点でfunction()内が実行される

# 参考
[Node.js + Express + Socket.ioで簡易チャットを作ってみる
](https://qiita.com/riku-shiru/items/ffba3448f3aff152b6c1)
[超絶初心者のためのサーバとクライアントの話](https://qiita.com/shuntaro_tamura/items/ae55b99deb9e2a170754)  
[HTTPとPOSTとGET](https://qiita.com/Sekky0905/items/dff3d0da059d6f5bfabf)