10分でできる！Node.jsのSocket.ioを使ったWebSocketによる双方向通信

この記事は2年以上前に書かれたものです。
情報が古い可能性があります。

準備

プロジェクトフォルダの作成

socket.io-sample を作成します。

プロジェクトフォルダへ移動

cd socket.io-sample

コマンドプロンプトまたはターミナルを開いて、プロジェクトフォルダに移動します。

package.json の作成

npm init -y

npm init コマンドで、package.json を作成します。

Socket.io のインストール

npm install socket.io

npm install コマンドで　socket.io をインストールします。

HTML から Client API を呼びだす

サーバプログラムを作成する

app.js (Server)

var app = require('http').createServer(handler)
var io = require('socket.io')(app);
var fs = require('fs');

// HTTP サーバのポートを指定する
app.listen(80);

function handler (req, res) {
  fs.readFile(__dirname + '/index.html',
  function (err, data) {
    if (err) {
      res.writeHead(500);
      return res.end('Error loading index.html');
    }

    res.writeHead(200);
    res.end(data);
  });
}

io.on('connection', function (socket) {
  // クライアントへデータ送信
  // emit を使うとイベント名を指定できる
  socket.emit('news', { hello: 'world' });
  socket.on('my other event', function (data) {
    // クライアントから受け取ったデータを出力する
    console.log(data);
  });
});

サーバプログラムでは、HTTPサーバを起動し、クライアントとのデータの送受信をおこないます。

クライアントプログラムを作成する

index.html (client)

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Client</title>
  <!-- Client API を読み込む。自動生成されるので、socket.io.js を作成する必要はない。 -->
  <script src="/socket.io/socket.io.js"></script>
</head>
<body>
  <script>
    // 通信先のサーバを指定する
    var socket = io('http://localhost');
    socket.on('news', function (data) {
      // サーバから受け取ったデータを出力する
      console.log(data);

      // サーバへデータ送信
      // emit を使うとイベント名を指定できる
      socket.emit('my other event', { my: 'data' });
    });
  </script>
</body>
</html>

クライアントプログラムでは、Client API である /socket.io/socket.io.js を読み込み、サーバとのデータの送受信をおこないます。

node app.js

をコマンドプロンプトまたはターミナルから実行し、サーバプログラムを起動します。

WEB (HTTP) サーバが起動するので、 http://localhost/index.html を WEBブラウザで開いてクライアントプログラムを起動します。
WEBサーバのポートを変更している場合は http://localhost:8080/index.html のように、指定したポート番号を入力してください。

Node.js から Client API を使用する

Node のプログラムからも Client API を使用できるので、HTML を作成しなくても通信可能です。

client.js

// Client API を読み込む
var io = require('socket.io-client');

// 通信先のサーバを指定する
var socket = io('http://localhost');
socket.on('news', function (data) {
  // サーバから受け取ったデータを出力する
  console.log(data);

  // サーバへデータ送信
  // emit を使うとイベント名を指定できる
  socket.emit('my other event', { my: 'data' });

  // 通信を切断し、プロセスを終了する
  socket.disconnect();
  process.exit(0);
});

コマンドプロンプトまたはターミナルを2つ起動し、

node app.js と node client.js を実行します。

client.js は一度の実行でプロセスを終了するようにしています。

node_module に socket.io-client がない場合は、

npm install socket.io-client

します。

作成したサンプル

GitHub – socket.io-sample

参考

英語ですが、日本語の記事を探すより公式を見た方が間違いないです。

準備