Needle Engine
  • README
  • Code Of Conduct
  • HOW TO
  • documentation
    • SUMMARY
    • _backlog-mermaid
    • _backlog
    • _meta-test
    • Automatic Component Generation
    • Needle Core Components
    • How To Debug
    • Deployment and Optimization
    • embedding
    • Everywhere Actions
    • Example Projects ✨
    • Exporting Assets, Animations, Prefabs, Materials, Lightmaps...
    • Questions and Answers (FAQ) 💡
    • Feature Overview
    • This page has been moved: continue here
    • getting-started
    • Frameworks, Bundlers, HTML
    • index
    • Additional Modules
    • Networking
    • Needle Engine Project Structure
    • Samples Projects
    • Scripting Examples
    • Creating and using Components
    • Live
    • Live
    • About
    • Live
    • Live
    • Live
    • Live
    • Support, Community & AI
    • Technical Overview
    • Testimonials
    • Testing on local devices
    • Using Needle Engine directly from HTML
    • vision
    • VR & AR (WebXR)
    • blender
      • Needle Engine for Blender
    • cloud
      • Needle Cloud
    • custom-integrations
      • index
    • getting-started
      • Scripting Introduction for Unity Developers
      • Getting Started & Installation
      • Scripting in Needle Engine
    • reference
      • needle.config.json
      • <needle-engine> Configuration
      • @serializable and other decorators
    • three
      • index
    • unity
      • Editor Sync
      • Needle Engine for Unity
    • lang
      • de
        • 404
        • SUMMARY
        • Automatische Komponenten-Generierung
        • Needle-Kernkomponenten
        • Debugging
        • Bereitstellung und Optimierung
        • embedding
        • Everywhere Actions
        • Beispielprojekte ✨
        • Assets, Animationen, Prefabs, Materialien, Lightmaps exportieren...
        • Fragen und Antworten (FAQ) 💡
        • Funktionsübersicht
        • Diese Seite wurde verschoben: hier fortfahren
        • getting-started
        • Frameworks, Bundler, HTML
        • index
        • Zusätzliche Module
        • Netzwerkfunktionen
        • Needle Engine Projektstruktur
        • Beispielprojekte
        • Scripting Beispiele
        • Erstellen und Verwenden von Komponenten
        • Live
        • Live
        • Über
        • Live
        • Live
        • Live
        • Live
        • Support und Community
        • Technischer Überblick
        • Erfahrungsberichte
        • Testen auf lokalen Geräten
        • Needle Engine direkt aus HTML verwenden
        • vision
        • VR & AR (WebXR)
        • blender
          • Needle Engine für Blender
        • cloud
          • Needle Cloud
        • custom-integrations
          • index
        • getting-started
          • Einführung in das Scripting für Unity-Entwickler
          • Erste Schritte & Installation
          • Scripting in Needle Engine
        • reference
          • needle.config.json
          • <needle-engine> Konfiguration
          • @serializable und andere Decorators
        • three
          • index
        • unity
          • Editor Synchronisierung
          • Needle Engine für Unity
      • es
        • SUMMARY
        • Generación Automática de Componentes
        • Componentes principales de Needle
        • Cómo Depurar
        • Despliegue y optimización
        • embedding
        • Acciones Everywhere
        • Proyectos de Ejemplo ✨
        • Exportación de Assets, Animaciones, Prefabs, Materiales, Lightmaps...
        • Preguntas Frecuentes (FAQ) 💡
        • Resumen de Características
        • Esta página ha sido movida: continúe aquí
        • getting-started
        • Frameworks, Bundlers, HTML
        • index
        • Módulos Adicionales
        • Redes
        • Estructura de Proyecto de Needle Engine
        • Proyectos de ejemplo
        • Ejemplos de scripting
        • Crear y usar Components
        • En vivo
        • En Vivo
        • Acerca de
        • En vivo
        • En vivo
        • En vivo
        • En vivo
        • Soporte y Comunidad
        • Resumen técnico
        • Testimonios
        • Testing on local devices
        • Usando Needle Engine directamente desde HTML
        • vision
        • VR & AR (WebXR)
        • blender
          • Needle Engine para Blender
        • cloud
          • Needle Cloud
        • custom-integrations
          • index
        • getting-started
          • Introducción al Scripting para Desarrolladores de Unity
          • Primeros pasos e instalación
          • Scripting in Needle Engine
        • reference
          • needle.config.json
          • Configuración de <needle-engine>
          • @serializable y otros decoradores
        • three
          • index
        • unity
          • Editor Sync
          • Needle Engine para Unity
      • fr
        • SUMMARY
        • Génération automatique de composants
        • Composants principaux de Needle
        • Comment déboguer
        • Déploiement et Optimisation
        • embedding
        • Everywhere Actions
        • Exemples de Projets ✨
        • Exporter des Assets, des Animations, des Prefabs, des Matériaux, des Lightmaps...
        • Questions et Réponses (FAQ) 💡
        • Aperçu des fonctionnalités
        • Cette page a été déplacée : continuez ici
        • getting-started
        • Frameworks, Bundlers, HTML
        • index
        • Modules supplémentaires
        • Réseau
        • Structure du projet Needle Engine
        • Projets d'exemples
        • Exemples de Scripting
        • Créer et utiliser des Components
        • showcase-bike
        • En direct
        • À propos
        • En direct
        • Jouer
        • En direct
        • En direct
        • Support et Communauté
        • Vue d'ensemble technique
        • Témoignages
        • Tester sur les appareils locaux
        • Utiliser Needle Engine directement depuis HTML
        • vision
        • VR & AR (WebXR)
        • blender
          • Needle Engine pour Blender
        • cloud
          • Needle Cloud
        • custom-integrations
          • index
        • getting-started
          • Introduction au Scripting pour les Développeurs Unity
          • Premiers pas et installation
          • Scripting in Needle Engine
        • reference
          • needle.config.json
          • <needle-engine> Configuration
          • @serializable et autres décorateurs
        • three
          • index
        • unity
          • Synchronisation de l'Editor (Editor Sync)
          • Needle Engine pour Unity
      • hi
        • SUMMARY
        • कंपोनेंट का स्वतः जनरेशन
        • नीडल कोर कंपोनेंट्स
        • How To Debug
        • Deployment and Optimization
        • embedding
        • Everywhere Actions
        • उदाहरण प्रोजेक्ट ✨
        • एसेट, एनिमेशन, प्रीफैब, मटेरियल, लाइटमैप्स... को एक्सपोर्ट करना
        • प्रश्न और उत्तर (FAQ) 💡
        • सुविधा अवलोकन
        • यह पृष्ठ स्थानांतरित कर दिया गया है: यहां जारी रखें
        • getting-started
        • Frameworks, Bundlers, HTML
        • index
        • अतिरिक्त मॉड्यूल
        • नेटवर्किंग
        • Needle Engine प्रोजेक्ट स्ट्रक्चर
        • samples-and-modules
        • स्क्रिप्टिंग उदाहरण
        • कंपोनेंट बनाना और उपयोग करना
        • लाइव
        • लाइव
        • परिचय
        • लाइव
        • लाइव
        • लाइव
        • लाइव
        • समर्थन और समुदाय
        • तकनीकी अवलोकन
        • प्रशंसापत्र
        • Testing on local devices
        • HTML से सीधे Needle Engine का उपयोग करना
        • vision
        • VR & AR (WebXR)
        • blender
          • Needle Engine for Blender
        • cloud
          • Needle Cloud
        • custom-integrations
          • index
        • getting-started
          • Unity डेवलपर्स के लिए स्क्रिप्टिंग परिचय
          • आरंभ करना और इंस्टॉलेशन
          • Needle Engine में स्क्रिप्टिंग
        • reference
          • needle.config.json
          • <needle-engine> कॉन्फ़िगरेशन
          • @serializable and other decorators
        • three
          • index
        • unity
          • Editor Sync
          • Unity के लिए Needle Engine
      • ja
        • SUMMARY
        • 自動コンポーネント生成
        • Needleコアコンポーネント
        • デバッグの方法
        • デプロイと最適化
        • embedding
        • Everywhere Actions
        • サンプルプロジェクト ✨
        • アセット、アニメーション、Prefab、マテリアル、ライトマップなどのエクスポート
        • よくある質問(FAQ)💡
        • 機能概要
        • このページは移動しました: こちらからどうぞ
        • getting-started
        • フレームワーク、バンドラー、HTML
        • index
        • 追加モジュール
        • ネットワーキング
        • Needle Engineプロジェクトの構造
        • サンプルプロジェクト
        • スクリプティング例
        • Creating and using Components
        • ライブ
        • showcase-castle
        • 概要
        • ライブ
        • ライブ
        • ライブ
        • ライブ
        • サポートとコミュニティ
        • 技術概要
        • お客様の声
        • ローカルデバイスでのテスト
        • HTMLからNeedle Engineを直接使用する
        • vision
        • VR & AR (WebXR)
        • blender
          • Blender 用 Needle Engine
        • cloud
          • Needle Cloud
        • custom-integrations
          • index
        • getting-started
          • Scripting Introduction for Unity Developers
          • はじめに & インストール
          • Needle Engineでのスクリプティング
        • reference
          • needle.config.json
          • <needle-engine> 設定
          • @serializable およびその他のデコレーター
        • three
          • index
        • unity
          • Editor Sync
          • Unity用Needle Engine
      • pt
        • SUMMARY
        • Automatic Component Generation
        • Componentes Principais do Needle
        • Como Depurar
        • Implementação e Otimização
        • embedding
        • Everywhere Actions
        • Projetos de Exemplo ✨
        • Exportar Recursos, Animações, Prefabs, Materiais, Lightmaps...
        • Perguntas e Respostas (FAQ) 💡
        • Visão Geral dos Recursos
        • Esta página foi movida: continue aqui
        • getting-started
        • Frameworks, Bundlers, HTML
        • index
        • Módulos Adicionais
        • Redes
        • Estrutura do Projeto Needle Engine
        • Projetos de Exemplo
        • Exemplos de Scripting
        • Criar e usar Componentes
        • Ao Vivo
        • Ao Vivo
        • Sobre
        • Ao Vivo
        • Ao Vivo
        • Ao Vivo
        • Ao Vivo
        • Suporte e Comunidade
        • Visão Geral Técnica
        • Depoimentos
        • Testar em dispositivos locais
        • vanilla-js
        • vision
        • VR & AR (WebXR)
        • blender
          • Needle Engine para Blender
        • cloud
          • Needle Cloud
        • custom-integrations
          • index
        • getting-started
          • Introdução à Scripting para Developers Unity
          • Começar e Instalação
          • Scripting no Needle Engine
        • reference
          • needle.config.json
          • needle-engine-attributes
          • @serializable e outros decorators
        • three
          • index
        • unity
          • Sincronização do Editor
          • Needle Engine para Unity
      • vn
        • 404
        • SUMMARY
        • Automatic Component Generation
        • Các Component Cốt lõi của Needle
        • Cách gỡ lỗi
        • Triển khai và Tối ưu hóa
        • embedding
        • Hành động ở mọi nơi (Everywhere Actions)
        • Các Dự Án Ví Dụ ✨
        • Xuất Tài sản, Hoạt ảnh, Prefab, Vật liệu, Lightmap...
        • Câu hỏi thường gặp (FAQ) 💡
        • Tổng quan tính năng
        • Trang này đã được di chuyển: tiếp tục tại đây
        • getting-started
        • Frameworks, Bundlers, HTML
        • index
        • Các Module Bổ Sung
        • Kết nối mạng
        • Cấu trúc dự án Needle Engine
        • samples-and-modules
        • Ví dụ về Scripting
        • Tạo và sử dụng Component
        • Trực tiếp
        • Trực tiếp
        • Giới thiệu
        • Trực tiếp
        • Chơi thử
        • Trực tiếp
        • Demo trực tiếp
        • Hỗ trợ và Cộng đồng
        • Tổng quan kỹ thuật
        • Lời chứng thực
        • Testing on local devices
        • Sử dụng Needle Engine trực tiếp từ HTML
        • vision
        • VR & AR (WebXR)
        • blender
          • Needle Engine cho Blender
        • cloud
          • Needle Cloud
        • custom-integrations
          • index
        • getting-started
          • Giới thiệu về Scripting cho các nhà phát triển Unity
          • Getting Started & Installation
          • Scripting trong Needle Engine
        • reference
          • needle.config.json
          • Cấu hình <needle-engine>
          • @serializable và các decorator khác
        • three
          • index
        • unity
          • Editor Sync
          • Needle Engine cho Unity
      • zh
        • SUMMARY
        • 自动生成组件
        • Needle 核心组件
        • 如何调试
        • 部署与优化
        • embedding
        • Everywhere Actions
        • 示例项目 ✨
        • 导出资源、动画、预制体、材质、光照贴图...
        • 常见问题 (FAQ) 💡
        • 功能概览
        • 此页面已移动:请在此处继续
        • getting-started
        • 框架、打包器、HTML
        • index
        • 附加模块
        • 网络
        • Needle Engine 项目结构
        • 示例项目
        • Scripting Examples
        • Creating and using Components
        • 实时示例
        • 实时
        • 关于
        • 实时演示
        • 在线试玩
        • 实时演示
        • 现场演示
        • 支持与社区
        • 技术概述
        • 用户评价
        • Testing on local devices
        • 使用 Needle Engine 直接从 HTML
        • vision
        • VR & AR (WebXR)
        • blender
          • Needle Engine for Blender
        • cloud
          • Needle Cloud
        • custom-integrations
          • index
        • getting-started
          • Scripting Introduction for Unity Developers
          • 入门与安装
          • 在 Needle Engine 中编写脚本
        • reference
          • needle.config.json
          • <needle-engine> 配置
          • @serializable and other decorators
        • three
          • index
        • unity
          • 编辑器同步
          • Unity 版 Needle Engine
Powered by GitBook
On this page
  • ネットワーキングの概念
  • ルームと状態
  • 所有権
  • プロジェクトのネットワーキングを有効にする
  • ネットワーキング対応の組み込みコンポーネント
  • カスタムコンポーネントの自動ネットワーキング
  • オブジェクトの作成と破棄
  • 手動ネットワーキング
  • メッセージの送信
  • メッセージの受信
  • メッセージの永続性の制御
  • デバッグフラグを使用したネットワークメッセージの理解
  • ネットワーキングライフサイクルイベント
  • Needleネットワーキングサーバーの使用
  • 独自のネットワーキングサーバーのホスト
  • 設定
  • ローカルネットワーキングサーバー
  • 高度な設定:peer.jsのWebRTC設定のカスタマイズ
  • 高度な設定:サーバーとクライアントのメッセージ形式
  • 組み込みルームイベント
  • 組み込みユーティリティイベント
  • 組み込み所有権イベント
  • 組み込みFlatbufferスキーマ
  • 高度な設定:Flatbuffer形式のバイナリメッセージ
  • まとめ
Edit on GitHub
  1. documentation
  2. lang
  3. ja

ネットワーキング

Previous追加モジュールNextNeedle Engineプロジェクトの構造

Last updated 25 days ago

Needle Engineには、マルチプレイヤー体験のための完全なネットワーキングソリューションが含まれています。 当社のネットワーキングコンポーネントとAPIを使用すると、共有ワールド状態、ボイスチャット、セッション永続性などを実現できます。自動または手動のネットワーキングを選択して、独自のコンポーネントをネットワーク化できます。

Needle Engineのネットワーキングは、に基づいています。自動ネットワーキングは、使いやすさのためにJSONデータを使用します。複雑なユースケースと高いパフォーマンス要件には、を使用します。

コアネットワーキング機能へのアクセスは、コンポーネントから this.context.connection を使用することで取得できます。デフォルトのバックエンドサーバーはユーザーをルームに接続します。同じルームのユーザーは状態を共有し、互いにメッセージを受け取ります。

ネットワーキングの概念

ルームと状態

Needle Engineのネットワーキングの中心には、同期されたルームの概念があります。各ルームにはIDがあり、ユーザーはこのIDを提供することでルームに接続します。ルームはサーバーに保存され、ユーザーはいつでもルームに参加したり退出したりできます。 ユーザーがルームに参加すると、ルームの現在の状態を受け取り、その現在の状態をシーンに適用し、ルームの状態の変更をリッスンします。 ユーザーがルームを退出すると、ルームの状態の変更をリッスンを停止します。

ルームの状態はサーバーにJSONデータとして保存されるため、すべての変更は永続的です。これは、ルームの状態がネットワーキングだけでなく、単一ユーザーのアクションを永続化するためにも役立つことを意味します。

Needleはルームの ビューのみのID を提供できます。ビューのみのIDでルームにアクセスする場合、ユーザーはルームとインタラクトすることはできませんが、現在の状態を確認し、ライブアップデートを取得できます。これはプレゼンテーションやデモンストレーションに役立ちます。

所有権

ルーム内のオブジェクトは、ユーザーに 所有 されることができます。これは、オブジェクトの所有者だけがその状態を変更できることを意味します。 デフォルトでは、オブジェクトには所有者がありません。DragControlsのようなコンポーネントは、実際にオブジェクトを移動する前に、そのオブジェクトの所有権を要求します。 カスタムコンポーネントでは、所有権の処理方法を制御できます。 所有権が不要な場合、所有権が自動的に別のユーザーに譲渡される場合、または特定の操作によってのみ所有権が譲渡される場合があります。

ユーザーがルームを退出すると、そのユーザーが所有するオブジェクトは、オブジェクトが作成された方法に応じて、削除されるか所有権がリセットされます。

プロジェクトのネットワーキングを有効にする

  1. シーンに SyncedRoom コンポーネントを追加します。デフォルトでは、これはNeedleによって提供されるネットワーキングインフラストラクチャを使用します。

  2. ネットワーク全体で移動を同期したいオブジェクトに SyncedTransform コンポーネントを追加します。

  3. 同じオブジェクトに DragControls コンポーネントを追加します。

  4. プロジェクトを実行します。ブラウザで「Join Room」をクリックし、URLをコピーします。

  5. 新しいブラウザウィンドウを開き、URLを貼り付けます。両方のウィンドウで同じオブジェクトが表示されるはずです。一方のウィンドウでオブジェクトをドラッグしてみて、もう一方のウィンドウで移動することを確認してください。

DragControls コンポーネントは、他の多くのNeedleコンポーネントと同様に、ネットワーキングサポートが組み込まれています。 所有権は、オブジェクトをドラッグし始めたユーザーに自動的に譲渡されます。

ネットワーキング対応の組み込みコンポーネント

コンポーネント
説明

SyncedRoom

ネットワーキング接続とルームへの接続を処理します。

SyncedTransform

トランスフォームの同期を処理します。

SyncedCamera

ルームに接続されたすべてのユーザーのために、位置を追従するPrefabを生成します。

VoIP

ユーザー間のVoIP(Voice-over-IP)オーディオ接続、マイクアクセスなどを処理します。

ScreenCapture

Web APIを介した画面共有を処理します。

Networking

サーバーバックエンドURLをカスタマイズするために使用します。開発のためにローカルサーバーを設定することもできます。

DragControls

オブジェクトのドラッグを処理します。所有権は、最後にオブジェクトをドラッグしたユーザーに自動的に渡されます。

Duplicatable

オブジェクトの複製を処理します。複製されたオブジェクトは、ルームの全員に対してインスタンス化されます。

Deletable

オブジェクトの削除を処理します。削除はネットワーク全体で同期されます。

DeleteBox

"Deletable"コンポーネントを持つオブジェクトがボックスボリュームにドラッグされたときに、そのオブジェクトの削除を処理します。

PlayerSync

各接続されたプレイヤーに対して特定のオブジェクトをインスタンス化する強力なコンポーネントです。

PlayerState

PlayerSyncに割り当てられるオブジェクトにこのコンポーネントを追加します。

PlayerColor

プレイヤー固有の色を設定するシンプルなコンポーネントです。各ユーザーはルームへの参加時にランダムな色が割り当てられます。このコンポーネントは、その色をオブジェクトのメインマテリアルに割り当てます。

WebXR

ユーザーアバター(手と頭)の同期を処理します。

カスタムコンポーネントの自動ネットワーキング

独自のコンポーネントのフィールドは、非常に簡単にネットワーク化できます。フィールドの変更は自動的に検出され、ルームのすべてのユーザーに送信されます。変更はルームの状態の一部として永続化されるため、後でルームに参加したユーザーもそのフィールドの現在の状態を受け取り、全員が同じデータを見ることができます。

コンポーネント内のフィールドを自動的にネットワーク化するには、@syncField() デコレーターを付けます。

::::code-group :::code-group-item 数値を同期

import { Behaviour, syncField, IPointerClickHandler } from "@needle-tools/engine"

export class SyncedNumber extends Behaviour implements IPointerClickHandler {

    // Use `@syncField` to automatically network a field.
    // You can optionally assign a method or method name to be called when the value changes.
    @syncField("myValueChanged")
    mySyncedValue?: number = 1;

    private myValueChanged() {
       console.log("My value changed", this.mySyncedValue);
    }

    onPointerClick() {
       this.mySyncedValue = Math.random();
    }
}

::: :::code-group-item オブジェクトの色の同期

::: ::::

syncFieldには、値が変更されたときに呼び出す必要があるメソッドを指定するためのオプションパラメータがあることに注意してください。このメソッドは同じクラスで定義する必要があります。

::: tip カスタムプロジェクト設定 カスタムプロジェクト設定を使用している場合は、syncFieldデコレーターを機能させるために、tsconfig.json ファイルに experimentalDecorators: true が必要です。Needle Starterで作成されたプロジェクトでは、これがデフォルトで有効になっています。 :::

オブジェクトの作成と破棄

多くの場合、実行時にオブジェクトを作成および破棄したい場合があり、もちろんこれらの変更はネットワーク全体で同期される必要があります。

PlayerSync コンポーネントは、各接続されたプレイヤーに対して特定のオブジェクトを自動的にインスタンス化することで、このプロセスを簡素化します。 プレイヤーがルームを退出すると、オブジェクトはすべてのユーザーに対して破棄されます。

さらに、Needle Engineは2つの高レベルメソッドを提供します。

🏗️ コードサンプルは構築中です

手動ネットワーキング

Needle Engineは、メッセージを送受信するための低レベルAPIも提供しています。これを「手動ネットワーキング」と呼びます。原則は同じですが、メッセージの送信と受信、およびそれらの処理方法を完全に制御できます。

メッセージの送信

同じルームのすべてのユーザーにメッセージを送信します:

this.context.connection.send(key: string, data: IModel | object | boolean | string | number | null);

メッセージの受信

特定のキーを使用して、ルーム内のイベントをサブスクライブできます。 通常、これをサブスクライブ解除と一致させたい場合があります。

  • onEnable でサブスクライブし、onDisable でサブスクライブ解除する このアプローチでは、オブジェクトが無効になっている間はメッセージを受信しません。

  • または start でサブスクライブし、onDestroy でサブスクライブ解除する このアプローチでは、オブジェクトが無効になっている間もメッセージを受信します。

this.context.connection.beginListen(key:string, callback:(data) => void)

イベントのサブスクライブを解除します:

this.context.connection.stopListen(key:string)

メッセージの永続性の制御

ネットワークメッセージを送信する場合、低レベルAPIを使用すると、そのメッセージを永続化するかどうか(ルームの状態に保存するかどうか)、またはそうでないか(現在ルームにいるユーザーにのみ送信するかどうか)を決定できます。メッセージを永続化するには、guidフィールドがあることを確認してください。このフィールドは通常、そのオブジェクトのguidを提供することで、特定のオブジェクトにメッセージデータを適用するために使用されます。特定のオブジェクトをターゲットにしたい場合(したがって、guidフィールドを含める場合)でも、データを永続化させたくない場合は、メッセージのdontSaveフィールドをtrueに設定してください。

すべての永続化されたメッセージはルームの状態に保存され、後で接続したユーザーに送信されます。非永続化されたメッセージは、現在ルームにいるユーザーにのみ送信されます。これは、現在ルームにいないユーザーに対して再生しても意味がないエフェクト(サウンドエフェクトの再生など)に役立ちます。オプションで、メッセージにdeleteOnDisconnectフィールドを含めて、ユーザーが切断したときにこの特定のメッセージを削除することができます。

// このメッセージは、現在ルームにいるすべてのユーザー、
// および後でルームに参加するユーザーに送信されます。
this.context.connection.send("my-message", { guid: this.guid, myData: "myValue" });

// このメッセージは、現在ルームにいるすべてのユーザーに送信されますが、
// 後でルームに参加するユーザーには送信されません。
this.context.connection.send("my-message", { guid: this.guid, myData: "myValue", dontSave: true });

// このメッセージは、現在ルームにいるすべてのユーザーに送信されますが、
// 後でルームに参加するユーザーには送信されません。
this.context.connection.send("my-message", { myData: "myValue" });

// このメッセージは、現在ルームにいるすべてのユーザー、
// および後でルームに参加するユーザーに送信されますが、
// ユーザーが切断したときにルームの状態から削除されます。
this.context.connection.send("my-message", { guid: this.guid, myData: "myValue", deleteOnDisconnect: true });

バックエンドストレージから特定のguidの状態を削除するには、メッセージキーをdelete-stateに設定し、そのguidを持つ特定のオブジェクトをターゲットにします:{ guid: "guid_to_delete" }。

this.context.connection.send("delete-state", { guid: "guid_to_delete" });

デバッグフラグを使用したネットワークメッセージの理解

ネットワークメッセージをより深く理解するために使用できるいくつかのデバッグフラグがあります。 これらはページのURLに追加できます。例えば https://localhost:3000/?debugnet のようにします。

フラグ
説明

?debugnet

すべての受信および送信ネットワークメッセージをコンソールにログ出力します。

?debugowner

すべての所有権要求と変更をコンソールにログ出力します。

?debugnetbin

受信および送信バイナリメッセージの追加情報をログ出力します。

ネットワーキングライフサイクルイベント

コンポーネントでリッスンできる次のイベントがあります。これらは、自分自身や他のユーザーがルームに参加したり退出したりするなど、コンポーネントで反応したい一般的なネットワークイベントを表します。

// 自分がネットワーク化されたルームに参加したときのイベントをリッスンします
this.context.beginListen(RoomEvents.JoinedRoom, ({room, viewId, allowEditing, inRoom}) => { ... });

// 自分がネットワーク化されたルームから退出したときのイベントをリッスンします
this.context.beginListen(RoomEvents.LeftRoom, ({room}) => { ... });

// 別のユーザーが自分のネットワーク化されたルームに参加したときのイベントをリッスンします
this.context.beginListen(RoomEvents.UserJoinedRoom, ({userId}) => { ... });

// 別のユーザーが自分のネットワーク化されたルームから退出したときのイベントをリッスンします
this.context.beginListen(RoomEvents.UserLeftRoom, ({userId}) => { ... });

// 現在のルーム状態がすべてクライアントに送信された後に受信されるイベントです
this.context.beginListen(RoomEvents.RoomStateSent, () => { ... });

Needleネットワーキングサーバーの使用

デフォルトでは、ネットワーク化されたNeedleシーンは、Needleによって管理および提供されるクラウドインフラストラクチャに接続します。追加のセットアップは不要であり、現在、このサービスの使用に追加費用はかかりません。

通常、これは同じルームに約15〜20人のユーザーがいる場合にうまく機能します。プロジェクトが成熟したら、独自のネットワーキングサーバーをホストすることで、より大きく、より良く、より強力なネットワーキングソリューションにアップグレードできます。

独自のネットワーキングサーバーのホスト

大規模な展開や、ネットワーキングインフラストラクチャと実装をより細かく制御するために、独自のネットワーキングサーバーをホストすることをお勧めします。

デフォルトのGlitchサーバーインスタンスは小さく、限られた数のユーザーしか処理できません。シーンに同時に15〜20人以上のユーザーがいると予想される場合は、Google CloudやAWSなど、別の場所でネットワーキングサーバーをホストすることを検討する必要があります。 :::

::::code-group :::code-group-item Fastify

import networking from "@needle-tools/needle-networking";
networking.startServerFastify(fastifyApp, { endpoint: "/socket" });

::: :::code-group-item Express

import networking from "@needle-tools/needle-networking";
networking.startServerExpress(expressApp, { endpoint: "/socket" });

::: :::code-group-item カスタム統合

import { init, onConnection } from "@needle-tools/networking";

// Add your framework-specific websocket implementation here.
// You can view the fastify and express implementations in server.js for reference.
class WebsocketConnector {
    constructor(frameworkWebsocket) {
        // Your implementation.
    }
    on(event, callback) {
        // Your implementation. When receiving a message in the websocket connection, call the callback.
        // 'event' can be 'message' or 'close'.
    }
    send(key, value) {
        // Your implementation. Pass the message along to the websocket connection.
    }
}
const options = { endpoint: "/socket" };
init(options);
yourFramework.createWebsocketRoute(options.endpoint, frameworkWebsocket => {
    onConnection(new WebsocketConnector(frameworkWebsocket));
});

::: ::::

設定

以下のオプションが利用可能です。

オプション
説明

options.endpoint string

オプション。相対サーバーエンドポイント。例えば /socketは、yourserver/socketにWebSocketエンドポイントを開始します。デフォルトは/です。

options.maxUsers number

サーバー上の最大同時ユーザー数。デフォルトは50です。

options.defaultUserTimeout number

ユーザーが切断されたとみなされるまでの時間(秒)。デフォルトは30です。

process.env.VIEW_ONLY_SALT string

通常のルームIDからビューのみのルームIDを生成するために使用されるソルト値。デフォルトは事前定義されたソルト値です。

process.env.NEEDLE_NETWORKING_S3_* string

S3ストレージを有効にします。これに必要な環境変数の一覧は以下を参照してください。設定されていない場合は、デフォルトのストレージ(ディスク上のJSONファイル)が使用されます。

ネットワーキングサーバーは、ユーザーの接続と切断、メッセージの送受信、ルーム状態の永続化を自動的に管理します。

::: tip ローカル開発とホストされた開発で異なるサーバーの場所を使用する カスタムネットワーキングコードを開発している場合は、ローカル開発とホストされたアプリで異なるサーバーの場所を使用したい場合があります。Networkingコンポーネントで個別のサーバーURLを設定できます:

状態の保存

ネットワーク状態は、デフォルトでサーバー上のディスクに/.dataディレクトリ内のJSONファイルとして保存されます。 各ルームは独自のファイルを持ち、状態はルームに参加する接続クライアントに送信されます。

オプションで、ネットワーキング状態はS3互換ストレージプロバイダーを使用して保存できます。S3ストレージを有効にするには、次の環境変数を使用します:

NEEDLE_NETWORKING_S3_ENDPOINT=
NEEDLE_NETWORKING_S3_REGION=
NEEDLE_NETWORKING_S3_BUCKET=
NEEDLE_NETWORKING_S3_ACCESS_KEY_ID=
NEEDLE_NETWORKING_S3_ACCESS_KEY=
NEEDLE_NETWORKING_S3_PREFIX= # all state saved in the bucket will be prefixed with this string. This can be a path e.g. `my_state/` or a unique id `server_123_`

ローカルネットワーキングサーバー

テストおよび開発目的のために、Needle Engineネットワーキングパッケージをローカルサーバーで実行できます。WebSocketパッケージをホストし、これを容易にするためのリポジトリを用意しました。

  1. READMEの指示に従ってサーバーをセットアップします。サーバーはデフォルトでwss://localhost:9001/socketで実行されます。

  2. シーンにNetworkingコンポーネントを追加します。

  3. ローカルサーバーのアドレスをNetworkingコンポーネントのLocalhostフィールドに貼り付けます。

高度な設定:peer.jsのWebRTC設定のカスタマイズ

Needle Engineはpeerjsの合理的なデフォルトを使用します。これらのデフォルトを変更したい場合は、

setPeerOptions(opts: PeerjsOptions);

をカスタム設定で呼び出すことができます。これは、独自のWebRTCサーバーを使用する場合など、ICE/STUN/TURNサーバーのホスティングプロバイダーを変更するために使用できます。

高度な設定:サーバーとクライアントのメッセージ形式

::: warning 情報提供目的です。代わりにNeedle Engineが提供するAPIを使用してください。 通常、これらのメッセージ形式に直接インタラクトする必要はありません。なぜなら、低レベルネットワーキングAPIがすでにメッセージの解析と正しい型の提供を処理しているからです。ここに提供される情報は、基盤となるメッセージ形式を理解したり、独自のネットワーキングソリューションを実装したい高度なユーザー向けです。 :::

メッセージはJSON形式で送信されます。常にメッセージのタイプを表すkeyフィールドと、メッセージペイロードを含むdataフィールドがあります。dataフィールドは、JSONシリアライズ可能な任意のオブジェクトにすることができます。

組み込みルームイベント

::::code-group :::code-group-item Join

// ルームに参加を試みるためにサーバーに送信されます。
{
    "key": "join-room",
    "data": {
        "room": string,
        "viewOnly": boolean,
    }
}

::: :::code-group-item Leave

// ルームから退出するためにサーバーに送信されます。
{
    "key": "leave-room",
    "data": {
        "room": string
    }
}

::: :::code-group-item JoinedRoom

// ローカルユーザーがルームに参加したときにクライアントに送信されます。
// 型:JoinedRoomResponse
{
    "key": "joined-room",
    "room": string,
    "viewId": string,
    "allowEditing": boolean,
    "inRoom": string[] // 接続ID
}

::: :::code-group-item LeftRoom

// ローカルユーザーがルームから退出したときにクライアントに送信されます。
// 型:LeftRoomResponse
{
    "key": "left-room",
    "room": string
}

::: :::code-group-item UserJoinedRoom

// 任意のユーザーがルームに参加したときにクライアントに送信されます。
// 型:UserJoinedOrLeftRoomModel
{
    "key": "user-joined-room",
    "data": {
        "userId": string // 接続ID
    }
}

::: :::code-group-item UserLeftRoom

// 任意のユーザーがルームから退出したときにクライアントに送信されます。
// 型:UserJoinedOrLeftRoomModel
{
    "key": "user-left-room",
    "data": {
        "userId": string // 接続ID
    }
}

::: :::code-group-item RoomStateSent

// 完全なルーム状態が送信された後にクライアントに送信されます。
{
    "key": "room-state-sent",
    "room": string // ルーム名
}

::: ::::

組み込みユーティリティイベント

::::code-group :::code-group-item ConnectionInfo

// 接続が確立されたときにクライアントに送信されます。
{
    "key": "connection-start-info",
    "data": {
        "id": string // 接続ID
    }
}

::: :::code-group-item syncInstantiate

// アセットの新しいインスタンスを作成するためにsyncInstantiate() APIによって使用されます。
// 型:NewInstanceModel
{
    "key": "new-instance-created",
    "data": {
        "guid": string,
        "originalGuid": string,
        "seed": number | undefined,
        "visible": boolean | undefined,
        "dontSave": boolean | undefined,

        "parent": string | undefined,
        "position": { x: number, y: number, z: number } | undefined,
        "rotation": { x: number, y: number, z: number, w: number } | undefined,
        "scale": { x: number, y: number, z: number } | undefined,

        "deleteStateOnDisconnect": boolean | undefined
    }

::: :::code-group-item syncDestroy

// アセットのインスタンスを破棄するためにsyncDestroy() APIによって使用されます。
// 型:DestroyInstanceModel
{
    "key": "instance-destroyed",
    "data": {
        "guid": string,
        "dontSave": boolean | undefined
    }
}

::: :::code-group-item Ping

// 接続を維持するために数秒ごとにサーバーに送信されます。
{
    "key": "ping",
    "data": {}
}

::: :::code-group-item Pong

// pingに対する応答としてサーバーによって送信されます。
{
    "key": "pong",
    "data": {}
}

::: :::code-group-item DeleteState

// 特定のguidの状態を削除するためにサーバーに送信されます。
{
    "key": "delete-state",
    "data": {
        "guid": <string>
    }
}

::: :::code-group-item DeleteAllState

// 現在のルーム状態をすべて削除するためにサーバーに送信されます。
{
    "key": "delete-all-state",
    "data": {}
}

::::

組み込み所有権イベント

::::code-group :::code-group-item OwnershipRequest

{
    "key":
      "request-has-owner" |
      "request-ownership" |
      "remove-ownership",
    "data": {
        "guid": string
    }
}

::: :::code-group-item OwnershipResponse // 型:OwnershipResponse

{
    "key":
      "response-has-owner",
    "data": {
        "guid": string,
        "value": boolean
    }
}

::: ::: code-group-item OwnershipBroadcastResponse

{
    "key":
      "gained-ownership" |
      "lost-ownership" |
      "gained-ownership-broadcast" |
      "lost-ownership-broadcast",
    "data": {
        "guid": string,
        "owner": string
    }
}

::: ::::

組み込みFlatbufferスキーマ

Flatbufferメッセージはバイナリメッセージとして直接送信されます。

::::code-group :::code-group-item SyncedTransform ('STRS')

<!-- SAMPLE node_modules/@needle-tools/engine/src/engine-schemes/transforms.fbs -->

::: :::code-group-item SyncedCamera ('SCAM')

<!-- SAMPLE node_modules/@needle-tools/engine/src/engine-schemes/syncedCamera.fbs -->

::: :::code-group-item Vec2|3|4

<!-- SAMPLE node_modules/@needle-tools/engine/src/engine-schemes/vec.fbs -->

::: ::::

高度な設定:Flatbuffer形式のバイナリメッセージ

JSONメッセージは使いやすく理解しやすいですが、通常、メモリと帯域幅で大きくなります。大量のデータや高速な更新を送信する場合、バイナリメッセージはより高速で効率的です。Needle Engineでは、そのような要件がある場合にFlatbufferメッセージを使用できます。Flatbufferを使用するには、メッセージスキーマの定義とコンパイルなどの追加のセットアップ手順が必要であり、バイナリメッセージを扱うためデバッグが困難です。

Flatbufferメッセージを送受信する場合、keyフィールドがないことに注意してください。メッセージタイプはFlatbufferスキーマの一部です。WebSocket接続で送受信するのは単一のバイナリバッファです。

同じルームのすべてのユーザーにバイナリメッセージを送信します:

this.context.connection.sendBinary(byteArray: Uint8Array);

Flatbuffer形式のバイナリメッセージをサブスクライブします:

this.context.connection.beginListenBinary(identifier:string, callback:(data : ByteBuffer) => void);

バイナリメッセージのサブスクライブを解除します:

this.context.connection.stopListenBinary(identifier:string);

Flatbuffersサンプルコード

Flatbufferメッセージを送受信する前に、スキーマを定義し、TypeScriptにコンパイルする必要があります。次に、ネットワーキングシステムにスキーマを登録し、生成されたスキーマメソッドを使用してメッセージを作成および解析します。

::::code-group :::code-group-item スキーマの登録

// ネットワーキングシステムに新しいFlatbufferスキーマを登録します
import { registerBinaryType } from '@needle-tools/engine';
import { MyDataModel } from 'my-data-model.js';

const MySchemaIdentifier = "MYSC";

registerBinaryType(MySchemaIdentifier, MyDataModel.getRootAsSyncedTransformModel);

::: :::code-group-item メッセージの送信

// Flatbufferメッセージを作成して送信するデータを準備します:
import { MyDataModel } from 'my-data-model.js';

const MySchemaIdentifier = "MYSC";
const builder = new flatbuffers.Builder();

// Flatbufferメッセージを構築します
function createMyCustomModel(somePayload: string): Uint8Array {
    builder.clear();
    MyDataModel.startMyDataModel(builder);
    const guidObj = builder.createString(guid);
    MyDataModel.addSomePayload(builder, guidObj);
    const res = MyDataModel.endMyDataModel(builder);
    builder.finish(res, MySchemaIdentifier);
    return builder.asUint8Array();
}

// データを送信します
function sendData() {
    const data = createMyCustomModel("your-payload", this, true);
    this.context.connection.sendBinary(data);
}

::: :::code-group-item メッセージの受信

// この特定のメッセージタイプを受信するためにサブスクライブします:
import { MyDataModel } from 'my-data-model.js';

const MySchemaIdentifier = "MYSC";

this.context.connection.beginListenBinary(MySchemaIdentifier, (data) => {
    const model = MyDataModel.getRootAsMyDataModel(data);
    console.log("Received binary message", model, model.somePayload());
});

::: ::::

::: tip カスタムFlatbufferメッセージと永続性 現在、カスタムバイナリメッセージはネットワーキングサーバーに永続化できません。ネットワーキングサーバーを変更し、カスタムFlatbufferスキーマを追加して、guidプロパティが処理されるようにしてください。 :::

まとめ

Needle Engineは、ネットワーキングの複雑なトピックを分かりやすく使いやすくします。わずか数行のコードでコンポーネントの自動ネットワーキングを開始でき、より細かく制御が必要な場合は手動ネットワーキングをさらに深く掘り下げることができます。


ページはAIによって自動的に翻訳されました。

は、ネットワーク全体でオブジェクトを複製します。

は、ネットワーク全体でオブジェクトを破棄します。

当社のネットワーキングサーバーは、NPMのとしてNode.jsパッケージで利用できます。このパッケージには、人気のWebフレームワークおよびの事前設定された統合が含まれており、他のNode.jsサーバーフレームワークにも統合できます。

::: tip 簡単な実験のために:Glitchでのリミックス このページから、Glitchで実行されているシンプルなネットワーキングサーバーをリミックスできます: 右下隅のボタンをクリックしてください。

::: tip Glitch.comの例 Needle NetworkingをExpressサーバーと統合する方法の例については、でコードを確認してください。 :::

カスタムネットワーキングサーバーは、Google Cloudなど、どこにでもデプロイできます。詳細な手順については、このリポジトリを参照してください:

:::

からローカルサーバーサンプルをダウンロードします。

Needle EngineのScreencapture(画面共有)およびVoIP(音声通信)コンポーネントは、オーディオとビデオのネットワーキングにを使用します。Peer.jsは内部でWebRTCを使用しています。

Websockets
Flatbuffers
syncInstantiate()
syncDestroy()
APIドキュメントですべてのRoom Eventsを確認する
APIドキュメントですべてのOwnership Eventsを確認する
APIドキュメントですべてのConnection Eventsを確認する
独自のネットワーキングパッケージ
Fastify
Express
needle-networking.glitch.me
glitch.com/edit/#!/needle-networking?path=server.js
Local Needle Networking Server
github.com/needle-tools/networking-local
peer.js
スキーマの生成
スキーマコンパイラの使用
TypescriptでのFlatbuffers
Needle Engineの組み込みFlatbufferスキーマ