# WebSocketとExpressで簡単なチャットアプリを作る

## 目次
1. はじめに
2. 必要なもの
3. 環境設定
4. WebSocketサーバーの実装
5. フロントエンドの実装
6. 動作確認
7. まとめ

## 1. はじめに
WebSocketは、サーバーとクライアント間でリアルタイムに双方向通信を行うためのプロトコルです。このガイドでは、Node.js環境でExpressとwsモジュールを使って、簡単なWebSocketチャットアプリを構築します。

## 2. 必要なもの
- Node.js
- npm
- エディタ (例: Visual Studio Code)

## 3. 環境設定
まず、プロジェクトディレクトリを作成し、必要なモジュールをインストールします。

![img](/mosaic-code.jpg)

## 4. WebSocketサーバーの実装
次に、WebSocketを使ったサーバーを実装します。

![img](/mosaic-code.jpg)

## 5. フロントエンドの実装
次に、クライアントサイドのHTMLとJavaScriptを用意します。

![img](/mosaic-code.jpg)

## 6. 動作確認
1. Node.jsサーバーを起動します。
   ```bash
   node index.js
   ```

2. ブラウザで `http://localhost:3000` にアクセスします。

3. メッセージを入力して送信してみてください。複数のタブで開くと、相互にメッセージがやり取りできます。

## 7. まとめ
このチュートリアルでは、WebSocketとExpressを使って簡単なリアルタイムチャットアプリを作成しました。WebSocketを使用することで、双方向通信がスムーズに実現でき、リアルタイム性の高いアプリケーション開発が可能になります。今回の例を基に、さらなる機能の追加を試してみてください。 [cv:issue_marketplace_engineer]

# WebSocketとExpressで簡単なチャットアプリを作る

## 目次
1. はじめに
2. 必要なもの
3. 環境設定
4. WebSocketサーバーの実装
5. フロントエンドの実装
6. 動作確認
7. まとめ

## 1. はじめに
WebSocketは、サーバーとクライアント間でリアルタイムに双方向通信を行うためのプロトコルです。このガイドでは、Node.js環境でExpressとwsモジュールを使って、簡単なWebSocketチャットアプリを構築します。

## 2. 必要なもの
- Node.js
- npm
- エディタ (例: Visual Studio Code)

## 3. 環境設定
まず、プロジェクトディレクトリを作成し、必要なモジュールをインストールします。

```bash
mkdir websocket-chat
cd websocket-chat
npm init -y
npm install express ws
```

## 4. WebSocketサーバーの実装
次に、WebSocketを使ったサーバーを実装します。

```javascript
// index.js
const express = require('express');
const http = require('http');
const WebSocket = require('ws');

// Expressアプリケーションを作成
const app = express();
const server = http.createServer(app);
const wss = new WebSocket.Server({ server });

// クライアントが接続したときの処理
wss.on('connection', (ws) => {
    console.log('クライアントが接続しました。');

    // メッセージを受け取ったときの処理
    ws.on('message', (message) => {
        console.log(`受信メッセージ: ${message}`);

        // 全てのクライアントにメッセージを送信
        wss.clients.forEach((client) => {
            if (client.readyState === WebSocket.OPEN) {
                client.send(message);
            }
        });
    });

    // 切断時の処理
    ws.on('close', () => {
        console.log('クライアントが切断しました。');
    });
});

// 静的ファイルを提供
app.use(express.static('public'));

// サーバーを起動
server.listen(3000, () => {
    console.log('サーバーがポート3000で起動しました');
});
```

## 5. フロントエンドの実装
次に、クライアントサイドのHTMLとJavaScriptを用意します。

```html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebSocket チャット</title>
</head>
<body>
    <input id="input" type="text" placeholder="メッセージを入力">
    <button id="send">送信</button>
    <ul id="messages"></ul>

    <script>
        const ws = new WebSocket('ws://localhost:3000');
        const messages = document.getElementById('messages');
        const input = document.getElementById('input');
        const sendButton = document.getElementById('send');

        ws.onmessage = (event) => {
            const li = document.createElement('li');
            li.textContent = event.data;
            messages.appendChild(li);
        };

        sendButton.addEventListener('click', () => {
            ws.send(input.value);
            input.value = '';
        });
    </script>
</body>
</html>
```

## 6. 動作確認
1. Node.jsサーバーを起動します。
   ```bash
   node index.js
   ```

2. ブラウザで `http://localhost:3000` にアクセスします。

3. メッセージを入力して送信してみてください。複数のタブで開くと、相互にメッセージがやり取りできます。

## 7. まとめ
このチュートリアルでは、WebSocketとExpressを使って簡単なリアルタイムチャットアプリを作成しました。WebSocketを使用することで、双方向通信がスムーズに実現でき、リアルタイム性の高いアプリケーション開発が可能になります。今回の例を基に、さらなる機能の追加を試してみてください。 [![image](https://firebasestorage.googleapis.com/v0/b/issue-pro-42602.appspot.com/o/topics%2F17fa658b-53c7-4ca0-a28b-e588ed1bd371?alt=media&token=2c00afff-85ff-4428-8d15-696ab676dcb0)](https://i-ssue.com/lp/check_salary)

WebSocketとExpressで簡単なチャットアプリを作る

目次

1. はじめに

続きを読むには単価診断を受けてください（30秒）