SocketIO DAT 完全ガイド | 使い方・パラメータ解説【TouchDesigner】

※当サイトにはプロモーションリンクが含まれます。

SocketIO DAT が socket.io サーバとイベントを送受信する図

記事更新の通知はXでアナウンス٩(๑❛ᴗ❛๑)
@maru6o6をフォロー

概要 📖 – イベント単位で双方向通信

SocketIO DATは、socket.io サーバに接続し、名前付きイベント単位でメッセージを送受信する DATです。socket.io は WebSocket を土台にイベント名でメッセージを振り分ける通信ライブラリで、自動再接続やフォールバックを備えています。TouchDesigner から socket.io ベースの Web アプリやサーバとリアルタイムに通信するための基本 OP です。

主な用途 🎯

  • Web アプリとのリアルタイム連携として、socket.io で構築されたブラウザ UI と TouchDesigner の間で名前付きイベントを双方向にやり取り
  • 遠隔操作コントローラの受信として、スマートフォンの Web アプリから socket.io 経由で送られる操作イベントを受信して映像を制御
  • Node.js バックエンドとの双方向接続として、socket.io サーバ (Node.js) と常時接続し、サーバ発のイベント・通知を低遅延で受信
  • イベント駆動の状態同期として、HTTP のポーリングよりも遅延の少ない持続接続でイベント単位の状態変化を即時反映
  • 複数クライアントへの一斉配信として、socket.io の room / broadcast 機構と組み合わせて TouchDesigner から接続クライアント群へリアルタイムにデータを配信

データフロー 🔄

入力: socket.io サーバから配信される名前付きイベント (イベント名 + ペイロード)

SocketIO DAT が持続接続を維持してイベントを受信しテーブルに蓄積

出力: 受信イベント一覧テーブル + Python コールバック

Tips

初心者の方は、以下日本語書籍も手元にあると安心です。

まる。
まる。

実際の案件事例まで踏み込んで紹介されていて、効率よくスキルアップするなら必携の二冊です!


パラメータ解説 ⚙️

Connect Page 🔌

Active .active 🟢

サーバへの接続を有効化するスイッチ:

  • Active: active (接続の有効化) — オンにすると指定した socket.io サーバへの接続を確立し、サーバからのイベントを受信します。またこの DAT からイベントを送信 (emit) することも可能になります。オフにすると接続が切断されます

Reset .reset 🔄

接続を切断して再接続するパルス:

  • Reset: reset (再接続のパルス) — 現在の接続を一度切断したうえで、あらためて接続し直します。接続状態が不安定になったときの手動リセットに使用します

URL .url 🌐

接続先 socket.io サーバの URL:

  • URL: url (接続先 URL) — 接続する socket.io サーバの URL を指定します

Verify Certificate (TLS) .verifycert 🔐

TLS サーバ証明書の検証スイッチ:

  • Verify Certificate (TLS): verifycert (TLS 証明書の検証) — オンにすると TLS (Transport Layer Security) のサーバ証明書を検証します。暗号化された接続先の正当性を確認するための設定です

Reconnect Delay .delay

再接続を試みる間隔 (ミリ秒):

  • Reconnect Delay: delay (再接続間隔、ミリ秒) — 接続が切れたあと、再接続を試みるまでの待機時間をミリ秒で指定します

Received Messages Page 📥

Callbacks DAT .callbacks 🔔

受信イベントごとに呼び出されるコールバック DAT のパス:

  • Callbacks DAT: callbacks (コールバックスクリプト) — 受信イベントが届くたびに 1 回ずつ実行される関数を定義した DAT へのパスを指定します

Execute from .executeloc 📍

スクリプトを実行する場所 (起点) の決定

項目 内部名 説明
Current Node .current この DAT 自身を起点としてスクリプトを実行
Specified Operator .specified From Operator で指定した OP を起点としてスクリプトを実行

From Operator .fromop 🎯

スクリプト実行の起点となる OP パス:

  • From Operator: fromop (実行起点 OP) — Execute fromSpecified Operator のとき、状態変化トリガとなり、かつスクリプトの実行起点パスとして使用される OP のパスを指定します

Clamp Output .clamp 📏

受信イベント保持件数の制限スイッチ:

  • Clamp Output: clamp (出力件数の制限) — DAT はデフォルトで 100 件までに制限されますが、Clamp Output を使うと無制限を含む任意の件数に設定できます

Maximum Lines .maxlines 🔢

保持する受信イベント数の上限:

  • Maximum Lines: maxlines (最大行数) — 保持する受信イベント数の上限。上限を超えると古いイベントから順に一覧から削除されます

Clear Output .clear 🗑️

受信イベントテーブルのクリアパルス:

  • Clear Output: clear (クリアパルス) — 見出し行を残してすべての受信イベントを削除します。Python では op("opname").par.clear.pulse() で実行できます

Bytes Column .bytes 🔣

生バイト列を別カラムで出力するスイッチ:

  • Bytes Column: bytes (バイト列カラムの出力) — オンにすると受信メッセージの生バイト列を独立したカラムとして出力します。バイナリのペイロードを扱うときに便利です

Common Page 🔧

Language .language 📝

DAT が動作するスクリプト言語の決定方法

項目 内部名 説明
Input .input 入力 DAT のスクリプト言語を使用
Node .node この DAT 自身のスクリプト言語を使用

Edit/View Extension .extension 📄

外部エディタに公開するファイル拡張子の選択

項目 内部名 説明
dat .dat 汎用的なファイル拡張子 dat を使用
From Language .language DAT のスクリプト言語に応じた拡張子を自動選択
Custom Extension .custom Custom Extension で指定したカスタム拡張子を使用

Custom Extension .customext 🔤

Edit/View ExtensionCustom Extension のときに適用される拡張子:

  • Custom Extension 文字列: Edit/View Extensioncustom のときに使用される任意のファイル拡張子

Word Wrap .wordwrap 🔁

ノード表示でのワードラップ (折り返し) の有効化

項目 内部名 説明
Input .input 入力 DAT の Word Wrap 設定を継承
On .on Word Wrap を有効化 (ノード上の長い行を折り返し表示)
Off .off Word Wrap を無効化 (折り返さずそのまま表示)

実践アイデア 💡

Example 1: Web UIとイベント連携 🌐

Browser (socket.io client) → socket.io Server (Node.js) → SocketIO DAT → CHOP Execute → Render TOP

socket.io で構築した Web ページの JavaScript からボタン・スライダーの操作を名前付きイベントで送信し、TouchDesigner 側が SocketIO DAT で受信して映像演出のパラメータに即時反映する基本構成です。HTTP より低遅延でブラウザ画面と TouchDesigner を双方向に連動させられます。

  1. Node.js などで socket.io サーバを立ち上げ、イベント名 (例: control) を中継するよう実装
  2. SocketIO DAT の URL にサーバの URL を設定し、Active をオン
  3. Callbacks DAT に受信イベント用の関数を実装し、イベント名とペイロードを取得して parse
  4. 受信値を Table DAT や DAT to CHOP 経由でレンダラーのパラメータへ転送
  5. ブラウザ JS 側で socket.emit("control", {...}) を呼ぶと、TouchDesigner 側の映像が即時更新されます

Example 2: スマホ操作の受信 📱

Smartphone Web App (socket.io) → socket.io Server → SocketIO DAT → Switch TOP / Constant CHOP

スマートフォンのブラウザアプリから socket.io でコントロールイベントを送信し、TouchDesigner 側で受信して照明や映像演出を遠隔操作する用途です。socket.io は自動再接続を備えるため、モバイル回線が一時的に切れても接続が復帰しやすいのが利点です。

  1. TouchDesigner と同じ LAN もしくは公開サーバ上に socket.io サーバを用意
  2. スマホブラウザで HTML+JS を開き、socket.io クライアントでサーバへ接続
  3. SocketIO DAT も同じサーバの URL に接続し、サーバが両者の中継を担当
  4. スマホ側でボタンタップ・スライダー操作をイベントとして送信、SocketIO DAT が受信
  5. 受信値を Switch TOP の index や Constant CHOP の値に反映して演出を切り替え

Example 3: Nodeサーバから配信受信 ☁️

Node.js socket.io Server → SocketIO DAT (Active) → 受信イベントを Render に反映

Node.js の socket.io サーバが発するイベント (通知・データ更新・他クライアントの操作) に SocketIO DAT を常時接続させ、配信されるイベントをリアルタイムで受信して映像へ反映する用途です。HTTP ポーリングと違い、サーバ側のイベントを遅延なく取得できます。

  1. socket.io サーバ側でクライアントへ配信するイベント名と送出ロジックを実装
  2. SocketIO DAT の URL にサーバの URL を指定し、TLS を使う場合は Verify Certificate (TLS) を確認
  3. Callbacks DAT で受信イベントを parse し、必要なフィールドを抽出
  4. 接続が不安定な場合は Reconnect Delay を調整し、必要に応じて Reset パルスで再接続
  5. 抽出値を Render TOP やレイアウトに渡してリアルタイム可視化

関連オペレータ 🔗

類似機能OP 🔍

  • WebSocket DAT — socket.io の土台となる素の WebSocket プロトコルで双方向通信を行う DAT
  • Web Client DAT — HTTP/HTTPS でリクエストを送る都度接続型のクライアント DAT
  • Web Server DAT — TouchDesigner 側で HTTP / WebSocket サーバを立てる DAT
  • TCP/IP DAT — 生 TCP ソケットでテキスト通信を行う DAT
  • OSC In DAT — OSC プロトコルで UDP メッセージを受信する DAT

組み合わせ推奨OP 🔄

  • DAT Execute DAT — 受信テーブルの更新を検知して Python スクリプトを起動
  • Select DAT — 受信イベントから特定の行・列だけを抽出
  • Convert DAT — テキスト ↔ テーブルの相互変換でペイロードを整形
  • JSON DAT — JSON 形式のペイロードを構造化データとして解析
  • CHOP Execute DAT — CHOP 値の変化に応じて socket.io 経由でイベントを送信
  • Info CHOP — SocketIO DAT 自身の num_rows / num_cols 等のメタ情報取得

前処理・後処理DAT 🎯


Info CHOP情報 📊

SocketIO DAT は Info CHOP による詳細情報取得に対応しています。num_rows / num_cols でテーブル規模、total_cooks / cook_time で実行統計を参照できます。

DAT 固有情報 📋

  • num_rows: DAT の行数
  • num_cols: DAT の列数
  • type: DAT の型 (table / text)
  • is_table: テーブル形式の場合 1、テキスト形式の場合 0

汎用オペレータ情報 🔄

  • total_cooks: プロセス開始からのクック回数
  • cook_time: 最後のクック時間 (ミリ秒)
  • cook_frame: 最後にクックされたフレーム番号
  • warnings: 警告数
  • errors: エラー数

DAT 共通情報 📋

  • num_rows: 現在テーブルが保持している受信イベントの行数
  • num_cols: 出力テーブルの列数 (イベント名 / ペイロード / バイト列など)
  • total_cooks: DAT がクックされた累計回数
  • cook_time: 直近のクック処理にかかった時間 (ミリ秒)

トラブルシューティング ⚠️

よくある問題と解決策 🔧

❌ Problem: サーバに接続できない
✅ Solution:

  • URL が socket.io サーバの正しいアドレス (スキーム + ホスト + ポート) になっているか確認
  • サーバ側が socket.io のハンドシェイクパスを公開しているか、ポートが一致しているか確認
  • ファイアウォール / セキュリティソフト / 社内プロキシが該当ポートを遮断していないか別ネットワーク (テザリング等) で切り分け

❌ Problem: TLS 接続で証明書エラーになる
✅ Solution:

  • Verify Certificate (TLS) がオンのとき、サーバ証明書が有効でホスト名が証明書の CN / SAN と一致しているか確認
  • テスト環境で自己署名証明書を使う場合は Verify Certificate (TLS) を一時的にオフにして切り分け
  • 暗号化が必要な接続では URL のスキームが TLS 対応になっているかサーバ側ドキュメントを確認

❌ Problem: イベントは届くがコールバックが呼ばれない
✅ Solution:

  • Callbacks DAT に指定した Text DAT のパスと Language が Python になっているか確認
  • 公式の SocketIO DAT ドキュメントに沿ってコールバック関数名・引数が正しいか確認
  • Text DAT に構文エラーが無いか textport (Alt + T) で出力を確認

❌ Problem: 接続がすぐ切れる・再接続を繰り返す
✅ Solution:

  • Reconnect Delay を調整し、再接続の間隔がサーバ側の許容範囲に収まっているか確認
  • 手動で復帰させたい場合は Reset パルスで切断・再接続を行う
  • サーバ側のタイムアウトや同時接続数の制限に達していないかサーバログを確認

❌ Problem: 古い受信イベントが消えて履歴を追えない
✅ Solution:

  • Clamp Output をオフにするか Maximum Lines を十分大きな値に増やす
  • 履歴が長期に必要な場合は Table DAT へ Python コールバックで append して保存
  • ファイル保存が必要な場合はコールバック内で CSV / JSON 形式でディスクへ書き出し

参考資料 📚

その他 🔗

公式リソース 📖

関連記事 🔗

この記事はLLMと共に内容を執筆、更新しています。
最新バージョンとの項目差異など、情報の不一致を見つけた心優しい方はXもしくはInsta、メールなどよりサイト管理者までご連絡ください😎


まる。

お仕事のご依頼はDM又はメールにて。
━━━━━━━━━━━━━━━━━
Python/Touchdesigner/M5Stackをこよなく愛すフルスタックエンジニア。
専門は生理心理学、趣味はヨガやサウナ、EMS電気風呂などヘルスケア全般。
脳波や筋電、心拍を中心とした生体情報のセンシング&インタラクティブアートづくりがライフワーク。

普段はワントゥーテンという会社で空間演出エンジニアをしています。
リファラル採用お繋ぎできますので、我こそはという尖った方は経歴と希望職種添えてDMください(エンジニア以外、営業職等もOK)。
ご飯行きましょう。

↓日常垢
Instagram:@malmal0v0

まる。をフォローする
その他の記事はこちら
Math Combine POP 完全ガイド | 使い方・パラメータ解説【TouchDesigner】
ZED Select TOP 完全ガイド | 使い方・パラメータ解説【TouchDesigner】
ZED POP 完全ガイド | 使い方・パラメータ解説【TouchDesigner】
Window COMP 完全ガイド | 使い方・パラメータ解説【TouchDesigner】
Widget COMP 完全ガイド | 使い方・パラメータ解説【TouchDesigner】

タイトルとURLをコピーしました