Socket.io プロジェクトの作成と実行

Socket.io とは？

Socket.io は、リアルタイムで双方向のイベント駆動の通信を行うための JavaScript ライブラリです。ブラウザとサーバー間に効率的で低遅延の通信チャネルを構築できます。Socket.io は WebSocket プロトコルをサポートしていますが、それに限定されず、接続の安定性を確保するために最適な伝送メカニズム（例えば、長いポーリング）を自動的に選択します。

Socket.io の主な機能と利点

リアルタイム通信：リアルタイムで双方向の通信をサポートし、チャットルーム、オンラインゲーム、リアルタイム通知などのアプリケーションに適しています。
クロスプラットフォームサポート：ブラウザ、Node.js、および他のプラットフォームで実行可能。
自動再接続：接続が切断された場合、自動的に再接続を試みます。
イベント駆動：イベントメカニズムを通じて通信を行い、プログラミングモデルを簡素化します。
高い互換性：WebSocket、XHR 長ポーリングなど、さまざまな転送メカニズムをサポートし、さまざまなネットワーク環境で正常に動作することを確保します。

Socket.io を使用することで、開発者は効率的なリアルタイム通信アプリケーションを迅速に構築できます。

ServBay を使用して Socket.io プロジェクトを作成・実行する

この記事では、ServBay が提供する Node.js 環境を使用して Socket.io プロジェクトを作成・実行します。ServBay のホスト機能を使用して Web サーバーを設定し、リバースプロキシを通じてプロジェクトにアクセスできるようにします。

Socket.io プロジェクトを作成する

プロジェクトを初期化
まず、ServBay が提供する Node.js 環境をインストールしていることを確認します。その後、ServBay で推奨される Web サイトのルートディレクトリ /Applications/ServBay/www に新しい Socket.io プロジェクトを作成します：
bash
```
cd /Applications/ServBay/www
mkdir servbay-socketio-app
cd servbay-socketio-app
npm init -y
npm install express socket.io
```
1
2
3
4
5

サーバーファイルを作成する

プロジェクトのルートディレクトリに server.js ファイルを作成し、以下のコードを追加します：

javascript

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

const app = express();
const server = http.createServer(app);
const io = socketIo(server);

app.get('/', (req, res) => {
  res.sendFile(__dirname + '/index.html');
});

io.on('connection', (socket) => {
  console.log('a user connected');
  socket.on('disconnect', () => {
    console.log('user disconnected');
  });
  socket.on('chat message', (msg) => {
    io.emit('chat message', msg);
  });
});

const port = process.env.PORT || 3000;
server.listen(port, () => {
  console.log(`Server running on port ${port}`);
});

クライアントファイルを作成する

プロジェクトのルートディレクトリに index.html ファイルを作成し、以下のコードを追加します：

html

<!DOCTYPE html>
<html>
<head>
  <title>Socket.io Chat with ServBay</title>
  <style>
    ul { list-style-type: none; padding: 0; }
    li { padding: 8px; margin-bottom: 10px; background-color: #f3f3f3; }
    input { padding: 10px; width: 300px; }
    button { padding: 10px; }
    .servbay-banner {
      background-color: #4CAF50;
      color: white;
      text-align: center;
      padding: 10px 0;
      font-size: 20px;
      margin-bottom: 20px;
    }
  </style>
</head>
<body>
  <div class="servbay-banner">Welcome to ServBay Socket.io Chat!</div>
  <ul id="messages"></ul>
  <form id="form" action="">
    <input id="input" autocomplete="off" /><button>Send</button>
  </form>
  <script src="/socket.io/socket.io.js"></script>
  <script>
    var socket = io();
    var form = document.getElementById('form');
    var input = document.getElementById('input');

    form.addEventListener('submit', function(e) {
      e.preventDefault();
      if (input.value) {
        socket.emit('chat message', input.value);
        input.value = '';
      }
    });

    socket.on('chat message', function(msg) {
      var item = document.createElement('li');
      item.textContent = msg;
      document.getElementById('messages').appendChild(item);
      window.scrollTo(0, document.body.scrollHeight);
    });
  </script>
</body>
</html>

開発モードに入る

開発サーバーを実行する
開発サーバーを起動し、ポートを指定します（例：8585）：
bash
```
PORT=8585 node server.js
```
1
これで、ローカルに開発サーバーが起動し、ポート 8585 が公開されます。
ServBay のホストリバースプロキシを設定する
ServBay のホスト機能を使用してリバースプロキシを通じて開発サーバーにアクセスします。ServBay のホスト設定で、新しいリバースプロキシを追加します：
- 名前：My first Socket.io dev site
- ドメイン：servbay-socketio-test.dev
- ホストタイプ：リバースプロキシ
- IP：127.0.0.1
- ポート：8585
詳細な設定手順についてはNodejs 開発用のウェブサイトの追加を参照してください。
開発モードにアクセスする
ブラウザを開き、https://servbay-socketio-test.dev にアクセスしてプロジェクトをリアルタイムで確認します。ServBay はカスタムドメインと無料の SSL 証明書をサポートしているため、より高いセキュリティも享受できます。

プロダクションバージョンのデプロイ

プロダクション環境を準備する
プロジェクトがプロダクション環境で正常に動作することを確認します。通常、Socket.io プロジェクトには特別なビルドステップは不要ですが、環境変数の設定や他の設定が必要な場合もあります。
プロダクションサーバーを実行する
プロダクションサーバーを起動し、ポートを指定します（例：8586）：
bash
```
PORT=8586 NODE_ENV=production node server.js
```
1
ServBay のホストリバースプロキシを設定する
ServBay のホスト機能を使用し、リバースプロキシを通じてプロダクションサーバーにアクセスします。ServBay のホスト設定で、新しいリバースプロキシを追加します：
- 名前：My first Socket.io production site
- ドメイン：servbay-socketio-test.prod
- ホストタイプ：リバースプロキシ
- IP：127.0.0.1
- ポート：8586
プロダクションモードにアクセスする
ブラウザを開き、https://servbay-socketio-test.prod にアクセスしてプロダクションバージョンを確認します。ServBay のカスタムドメインと無料の SSL 証明書を通じて、ウェブサイトはより高いセキュリティと信頼性を持つことができます。

データベース接続

ServBay は Redis、MariaDB、PostgreSQL、および MongoDB データベースをサポートしています。以下はこれらのデータベースに接続する例です。

MongoDB に接続する

mongoose をインストールします：

bash

npm install mongoose

その後、プロジェクトにインポートして接続します：

javascript

const mongoose = require('mongoose');

mongoose.connect('mongodb://localhost/servbay-socketio-app', { useNewUrlParser: true, useUnifiedTopology: true })
  .then(() => console.log('MongoDB connected'))
  .catch(err => console.log(err));

Redis に接続する

redis をインストールします：

bash

npm install redis

その後、プロジェクトにインポートして接続します：

javascript

const redis = require('redis');
const client = redis.createClient();

client.on('error', function (err) {
  console.log('Error ' + err);
});

client.on('connect', function () {
  console.log('Redis client connected');
});

MariaDB に接続する

mariadb をインストールします：

bash

npm install mariadb

その後、プロジェクトにインポートして接続します：

javascript

const mariadb = require('mariadb');
const pool = mariadb.createPool({
  host: 'localhost', 
  user: 'root', 
  password: 'password',
  database: 'servbay_socketio_app'
});

pool.getConnection()
  .then(conn => {
    console.log("Connected to MariaDB");
    conn.release(); //release to pool
  })
  .catch(err => {
    console.log("Not connected due to error: " + err);
  });

PostgreSQL に接続する

pg をインストールします：

bash

npm install pg

その後、プロジェクトにインポートして接続します：

javascript

const { Pool } = require('pg');
const pool = new Pool({
  user: 'user',
  host: 'localhost',
  database: 'servbay_socketio_app',
  password: 'password',
  port: 5432,
});

pool.connect((err, client, done) => {
  if (err) throw err;
  console.log('Connected to PostgreSQL');
  done();
});

これらの手順を通じて、Socket.io プロジェクトを作成し、実行することに成功し、ServBay の機能を使用してプロジェクトを管理およびアクセスし、さまざまなデータベースに接続できました。

Socket.io プロジェクトの作成と実行 ​

Socket.io とは？ ​

Socket.io の主な機能と利点 ​

ServBay を使用して Socket.io プロジェクトを作成・実行する ​

Socket.io プロジェクトを作成する ​

開発モードに入る ​

プロダクションバージョンのデプロイ ​

データベース接続 ​

Socket.io プロジェクトの作成と実行

Socket.io とは？

Socket.io の主な機能と利点

ServBay を使用して Socket.io プロジェクトを作成・実行する

Socket.io プロジェクトを作成する

開発モードに入る

プロダクションバージョンのデプロイ

データベース接続