Skip Navigation
Show nav
Dev Center
  • Get Started
  • ドキュメント
  • Changelog
  • Search
  • Get Started
    • Node.js
    • Ruby on Rails
    • Ruby
    • Python
    • Java
    • PHP
    • Go
    • Scala
    • Clojure
    • .NET
  • ドキュメント
  • Changelog
  • More
    Additional Resources
    • Home
    • Elements
    • Products
    • Pricing
    • Careers
    • Help
    • Status
    • Events
    • Podcasts
    • Compliance Center
    Heroku Blog

    Heroku Blog

    Find out what's new with Heroku on our blog.

    Visit Blog
  • Log inorSign up
View categories

Categories

  • Heroku のアーキテクチャ
    • Dyno (アプリコンテナ)
      • Dyno Management
      • Dyno Concepts
      • Dyno Behavior
      • Dyno Reference
      • Dyno Troubleshooting
    • スタック (オペレーティングシステムイメージ)
    • ネットワーキングと DNS
    • プラットフォームポリシー
    • プラットフォームの原則
  • Developer Tools
    • コマンドライン
    • Heroku VS Code Extension
  • デプロイ
    • Git を使用したデプロイ
    • Docker によるデプロイ
    • デプロイ統合
  • 継続的デリバリーとインテグレーション
    • 継続的統合
  • 言語サポート
    • Node.js
      • Working with Node.js
      • Node.js Behavior in Heroku
      • Troubleshooting Node.js Apps
    • Ruby
      • Rails のサポート
      • Bundler の使用
      • Working with Ruby
      • Ruby Behavior in Heroku
      • Troubleshooting Ruby Apps
    • Python
      • Working with Python
      • Python でのバックグランドジョブ
      • Python Behavior in Heroku
      • Django の使用
    • Java
      • Java Behavior in Heroku
      • Working with Java
      • Maven の使用
      • Spring Boot の使用
      • Troubleshooting Java Apps
    • PHP
      • PHP Behavior in Heroku
      • Working with PHP
    • Go
      • Go の依存関係管理
    • Scala
    • Clojure
    • .NET
      • Working with .NET
  • データベースとデータ管理
    • Heroku Postgres
      • Postgres の基礎
      • Postgres スターターガイド
      • Postgres のパフォーマンス
      • Postgres のデータ転送と保持
      • Postgres の可用性
      • Postgres の特別なトピック
      • Migrating to Heroku Postgres
    • Heroku Data For Redis
    • Apache Kafka on Heroku
    • その他のデータストア
  • AI
    • Working with AI
    • Heroku Inference
      • Inference API
      • Quick Start Guides
      • AI Models
      • Inference Essentials
    • Vector Database
    • Model Context Protocol
  • モニタリングとメトリクス
    • ログ記録
  • アプリのパフォーマンス
  • アドオン
    • すべてのアドオン
  • 共同作業
  • セキュリティ
    • アプリのセキュリティ
    • ID と認証
      • シングルサインオン (SSO)
    • Private Space
      • インフラストラクチャネットワーキング
    • コンプライアンス
  • Heroku Enterprise
    • Enterprise Accounts
    • Enterprise Team
    • Heroku Connect (Salesforce 同期)
      • Heroku Connect の管理
      • Heroku Connect のリファレンス
      • Heroku Connect のトラブルシューティング
  • パターンとベストプラクティス
  • Heroku の拡張
    • Platform API
    • アプリの Webhook
    • Heroku Labs
    • アドオンのビルド
      • アドオン開発のタスク
      • アドオン API
      • アドオンのガイドラインと要件
    • CLI プラグインのビルド
    • 開発ビルドパック
    • Dev Center
  • アカウントと請求
  • トラブルシューティングとサポート
  • Salesforce とのインテグレーション
  • 言語サポート
  • Node.js
  • Working with Node.js
  • Node.js での Heroku の WebSocket の使用

Node.js での Heroku の WebSocket の使用

日本語 — Switch to English

この記事の英語版に更新があります。ご覧の翻訳には含まれていない変更点があるかもしれません。

最終更新日 2024年05月15日(水)

Table of Contents

  • 新しいアプリの作成
  • オプション 1: WebSocket
  • オプション 2: Socket.io

このチュートリアルでは、Heroku 上のリアルタイム Node.js アプリケーションの概要を説明します。サーバーの現在時刻を永続的なソケット接続経由でクライアントと共有する単純なアプリケーションを開発します。各アプリケーションは、Node の一般的な express​ Web サーバーに基づきます。

リアルタイム Node.js アプリケーションを開発する場合は、直接 WebSocket を使用できます。WebSocket プロトコルをサポートしていないクライアントにフォールバックを提供する Socket.io などの抽象化ライブラリを使用することもできます。両方のオプションを示します。

dyno を使用してこのチュートリアルを完了した場合、使用量のカウントに入ります。低料金プラン​を使用してこのチュートリアルを完了することをお勧めします。資格のある学生の皆様は、新しい Heroku for GitHub Students プログラム​を通じてプラットフォームクレジットを申請できます。

新しいアプリの作成

アプリのディレクトリに移動し、デフォルトの package.json​ を作成します。

$ npm init --yes

package.json​ で Node のバージョンを指定し、アプリを起動するためのメカニズムを指定します。

"engines": {
  "node": "20.x"
},
"scripts": {
  "start": "node server.js"
}

オプション 1: WebSocket

WebSocket 接続を使用するための最も簡単な方法は、Node の ws モジュール​の直接の使用です。アプリを設定するための各手順について説明しますが、GitHub の完全なソース​を参照することもできます。

依存関係のインストール

基本的な express​ Web サーバーから始めましょう。

$ npm install --save express

WebSocket の場合は、ws​ と bufferutil​ および utf-8-validate​ モジュールをインストールします。必要なのは ws​ モジュールだけですが、bufferutil​ および utf-8-validate​ モジュールによりパフォーマンスが向上​します。

$ npm install --save ws bufferutil utf-8-validate

HTTP サーバーの作成

HTTP サーバーは、次の 2 つのことを行うために必要です。つまり、クライアント側のアセットを提供し、WebSocket サーバーにリクエストを監視するためのフックを提供します。サーバーコード​は次のようになります。

const PORT = process.env.PORT || 3000;
const INDEX = '/index.html';

const server = express()
  .use((req, res) => res.sendFile(INDEX, { root: __dirname }))
  .listen(PORT, () => console.log(`Listening on ${PORT}`));

WebSocket サーバーの作成

WebSocket サーバーは、イベントをリッスンできるように、HTTP サーバーを引数として受け取ります。

const { Server } = require('ws');

const wss = new Server({ server });

接続の処理

接続と切断をリッスンしてログに記録します。クライアントが接続されたら、そのクライアントからのメッセージのためのイベントハンドラを追加できます。サーバーコード​は次のようになります。

wss.on('connection', (ws) => {
  console.log('Client connected');
  ws.on('close', () => console.log('Client disconnected'));
});

更新のブロードキャスト

ソケット接続の利点の 1 つは、サーバーがクライアントリクエストを待機することなく、データをクライアントにブロードキャストできることです。この場合は、現在時刻をすべてのクライアントに 1 秒おきにプッシュします。

setInterval(() => {
  wss.clients.forEach((client) => {
    client.send(new Date().toTimeString());
  });
}, 1000);

WebSocket クライアントの作成

クライアント index.html​ は、サーバーからの時刻の更新をリッスンする単純な HTML ページです。クライアントコード​は HTML で <script>​ タグの間に記述でき、次のようになります。

var HOST = location.origin.replace(/^http/, 'ws')
var ws = new WebSocket(HOST);
var el;

ws.onmessage = function (event) {
  el = document.getElementById('server-time');
  el.innerHTML = 'Server time: ' + event.data;
};

アプリの起動

これでサーバーを起動できるようになりました。

$ npm start
> node server.js

Listening on 3000

http://localhost:3000​ でアプリをローカルにテストして、時刻がリアルタイムに更新されることを確認します。サーバーログにも Client connected​ と記録されます。

動作に満足したら、.gitignore​ に追加する node_modules​ を除いたすべてのファイルを Git にコミットします。次に、アプリを Heroku にデプロイします。

$ heroku create
$ git commit -am 'websocket starting point'
$ git push heroku main
$ heroku open

オプション 2: Socket.io

Socket.io​ などのリアルタイム抽象化ライブラリは、アプリが WebSocket のサポートなしでユーザーに対応するのに役立ちます。Socket.io はまた、ルーム、名前空間、自動再接続などの一般的な機能も提供します。アプリを設定するための各手順について説明しますが、GitHub の完全なソース​を参照することもできます。

依存関係のインストール

このアプリには、基本的な express​ Web サーバーと socket.io​ が必要です。

$ npm install --save express socket.io

HTTP サーバーの作成

HTTP サーバーは、次の 2 つのことを行うために必要です。つまり、クライアント側のアセットを提供し、Socket.io に socket.io 関連のリクエストを監視するためのフックを提供します。サーバーコード​は次のようになります。

const PORT = process.env.PORT || 3000;
const INDEX = '/index.html';

const server = express()
  .use((req, res) => res.sendFile(INDEX, { root: __dirname }))
  .listen(PORT, () => console.log(`Listening on ${PORT}`));

Socket.io サーバーの作成

Socket.io サーバーは、socket.io 関連のリクエストをリッスンできるように、HTTP サーバーを引数として受け取ります。

const io = socketIO(server);

接続の処理

クライアントの接続と切断をログに記録します。クライアントが接続されたら、クライアントメッセージを受信するためのイベントハンドラを SocketIO インスタンスに追加できます。

io.on('connection', (socket) => {
  console.log('Client connected');
  socket.on('disconnect', () => console.log('Client disconnected'));
});

更新のブロードキャスト

永続的なソケット接続の利点の 1 つは、サーバーがクライアントのリクエストを待機することなく、データをクライアントにプッシュできることです。この例では、サーバー上の現在時刻を 1 秒に 1 回プッシュします。

setInterval(() => io.emit('time', new Date().toTimeString()), 1000);

Socket.io クライアントの作成

クライアント index.html​ は、サーバーからの時刻の更新をリッスンする単純な HTML ページです。クライアントコード​は HTML で <script>​ タグの間に記述でき、次のようになります。

var socket = io();
var el;

socket.on('time', function(timeString) {
  el = document.getElementById('server-time')
  el.innerHTML = 'Server time: ' + timeString;
});

アプリの起動

これでサーバーを起動できるようになりました。

$ npm start
> node server.js

Listening on 3000

http://localhost:3000​ でアプリをローカルにテストして、時刻がリアルタイムに更新されることを確認します。サーバーログにも Client connected​ と記録されます。

動作に満足したら、node_modules​ は .gitignore​ に追加し、それ以外のすべてのファイルを Git にコミットします。次に、アプリを Heroku にデプロイします。

$ heroku create
$ git commit -am 'socket.io starting point'
$ git push heroku main
$ heroku open

Socket.io を使用するアプリでセッションアフィニティ​を有効にします。Node の Cluster モジュールを使用するか、またはアプリを複数の dyno にスケーリングする予定がある場合は、Socket.io の複数ノード​の手順に従います。

$ heroku features:enable http-session-affinity

関連カテゴリー

  • Working with Node.js
Node.js 開発のベストプラクティス Node.js での Redis を使用したバックグラウンドジョブ

Information & Support

  • Getting Started
  • Documentation
  • Changelog
  • Compliance Center
  • Training & Education
  • Blog
  • Support Channels
  • Status

Language Reference

  • Node.js
  • Ruby
  • Java
  • PHP
  • Python
  • Go
  • Scala
  • Clojure
  • .NET

Other Resources

  • Careers
  • Elements
  • Products
  • Pricing
  • RSS
    • Dev Center Articles
    • Dev Center Changelog
    • Heroku Blog
    • Heroku News Blog
    • Heroku Engineering Blog
  • Twitter
    • Dev Center Articles
    • Dev Center Changelog
    • Heroku
    • Heroku Status
  • Github
  • LinkedIn
  • © 2025 Salesforce, Inc. All rights reserved. Various trademarks held by their respective owners. Salesforce Tower, 415 Mission Street, 3rd Floor, San Francisco, CA 94105, United States
  • heroku.com
  • Legal
  • Terms of Service
  • Privacy Information
  • Responsible Disclosure
  • Trust
  • Contact
  • Cookie Preferences
  • Your Privacy Choices