Socket.IOの使い方

WebRTCの開発でも使うNode.jsのライブラリSocket.IO。その使い方をまとめてみました。

インストール

Node.js+Expressで動かす場合になります。

$ npm install socket.io
$ npm install express

サーバー <-> クライアント間の通信

サーバー側のサンプルソース

const path = require('path');
const http = require('http');
const express = require('express');
const app = express();

const port = 8000;
const server = http.createServer(app).listen(port, () => {
  console.log('server start. port=' + port);
});
const io = require('socket.io')(server);

io.on('connection', socket => {
  console.log('socket.id:' + socket.id);

  // 切断時に発生します.
  socket.on('disconnect', reason => {
    console.log(`disconnect: %s, %s`, reason, socket.id);
  });

});

// expressで静的ページにアクセスする.
app.use(express.static(path.join(__dirname, 'static')));
変数ioの定義(代入)方法は一例で、他の指定もあります。

クライアントとの通信は上記のコールバック関数内に記載します。socketは接続された各クライアントになります。

どちらの方向でも、socket.emit(eventname, data)でイベントを送信し、socket.on(eventname, callback), socket.on(eventname, callback(data))でイベントを受信します。

サーバーがクライアントからのイベントを受信する

クライアントからのイベントをsocket.on(eventName, callback)で受信します。

socket.on('イベント', data => {
  //
});

部屋に入室する

socket.join('部屋名');

部屋から退室する

socket.leave('部屋名');

サーバーからクライアントへイベントを送信する

クライアントへのイベント送信は以下のような方法で行います。

クライアント自身向け

socket.emit('イベント', 'パラメータ');

自分以外の全クライアントにイベントを送信する

socket.broadcast.emit('イベント', 'パラメータ');

自分を含む全クライアントにイベントを送信する

io.emit('イベント', 'パラメータ');

特定のクライアントにイベントを送信する

送信先のソケットIDは相手側のsocket.idで取得できます。

io.to(送信先のソケットID).emit('イベント', 'パラメータ');

特定の部屋のメンバーにイベントを送信する

自分にも送られます。

io.to('部屋名').emit('イベント', 'パラメータ');

クライアントのサンプル

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Socket.io Client</title>
    <script src="/socket.io/socket.io.js"></script>
    <script>
        let socket = io('http://localhost:8000');
        // サーバーに接続できた場合.
        socket.on('connect', () => {
            console.log('connect success');
        });

        // サーバーから'server-send'を受信.
        socket.on('server-send', data => {
            let message = data.message;
            document.getElementById('receive-message').value = message;
        });

        function sendMessage() {
            let message = document.getElementById('send-message').value;
            socket.emit('client-send', {message: message});
        }
    </script>
</head>
<body>
    <p>
        <input type="text" name="sendmessage" value="" id="send-message" style="width: 200px;">
    </p>
    <p>
        <button type="submit" id="send-message-button" onclick="sendMessage();">送信</button>
    </p>
    <p>
        <input type="text" name="receivemessage" value="" id="receive-message" style="width: 200px;">
    </p>
</body>
</html>

サーバーに接続する

// サーバーに接続.
let socket = io('http://localhost:8000');

socket.on('connect', () => {
  // サーバーに接続できた場合.
  console.log('connect success');
});

クライアントがサーバーからのイベントを受信する

サーバーからのイベントはsocket.on(eventName, callback)で受信します。

socket.on('イベント', data => {
  //
});

クライアントからサーバーへイベントを送信する

サーバーへのイベント送信はsocket.emit(eventName[, args])を使用します。

socket.emit('イベント', 'パラメータ');
このエントリーをはてなブックマークに追加
にほんブログ村 IT技術ブログへ

スポンサードリンク

関連コンテンツ

コメント

メールアドレスが公開されることはありません。 が付いている欄は必須項目です