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
  • Khái niệm kết nối mạng
  • Phòng và Trạng thái
  • Quyền sở hữu
  • Kích hoạt kết nối mạng cho dự án của bạn
  • Các Component tích hợp sẵn với hỗ trợ kết nối mạng
  • Kết nối mạng tự động cho các Component tùy chỉnh
  • Tạo và hủy đối tượng
  • Kết nối mạng thủ công
  • Gửi tin nhắn
  • Nhận tin nhắn
  • Kiểm soát tính bền vững của thông báo
  • Sử dụng cờ gỡ lỗi để hiểu tin nhắn mạng
  • Các sự kiện vòng đời kết nối mạng
  • Sử dụng Máy chủ kết nối mạng Needle
  • Lưu trữ Máy chủ kết nối mạng của riêng bạn
  • Cấu hình
  • Máy chủ kết nối mạng cục bộ
  • Nâng cao: Tùy chỉnh cài đặt WebRTC cho peer.js
  • Nâng cao: Định dạng thông báo của Máy chủ và Client
  • Các sự kiện phòng tích hợp sẵn
  • Các sự kiện tiện ích tích hợp sẵn
  • Các sự kiện quyền sở hữu tích hợp sẵn
  • Các schema Flatbuffer tích hợp sẵn
  • Nâng cao: Tin nhắn nhị phân ở định dạng Flatbuffer
  • Tóm tắt
Edit on GitHub
  1. documentation
  2. lang
  3. vn

Kết nối mạng

PreviousCác Module Bổ SungNextCấu trúc dự án Needle Engine

Last updated 26 days ago

Needle Engine bao gồm một giải pháp kết nối mạng đầy đủ cho các trải nghiệm nhiều người chơi. Trạng thái thế giới được chia sẻ, trò chuyện thoại, tính bền vững của phiên làm việc và nhiều hơn nữa có thể đạt được với các component và API kết nối mạng của chúng tôi. Bạn có thể kết nối mạng các component của riêng mình với lựa chọn kết nối mạng tự động hoặc thủ công.

Kết nối mạng trong Needle Engine dựa trên . Kết nối mạng tự động sử dụng dữ liệu JSON để dễ sử dụng. Đối với các trường hợp sử dụng phức tạp và yêu cầu hiệu suất cao, chúng tôi sử dụng .

Truy cập chức năng kết nối mạng cốt lõi có thể đạt được bằng cách sử dụng this.context.connection từ một component. Máy chủ backend mặc định kết nối người dùng vào các phòng (rooms). Người dùng trong cùng một phòng sẽ chia sẻ trạng thái và nhận tin nhắn từ nhau.

Khái niệm kết nối mạng

Phòng và Trạng thái

Cốt lõi của kết nối mạng trong Needle Engine là khái niệm về các phòng được đồng bộ hóa (synchronized rooms). Mỗi phòng có một ID và người dùng kết nối đến một phòng bằng cách cung cấp ID này. Các phòng được lưu trữ trên máy chủ và người dùng có thể tham gia và rời phòng bất cứ lúc nào. Khi người dùng tham gia một phòng, họ nhận được trạng thái hiện tại của phòng, áp dụng trạng thái hiện tại đó vào cảnh của họ và sau đó lắng nghe các thay đổi đối với trạng thái phòng. Khi người dùng rời phòng, họ ngừng lắng nghe các thay đổi đối với trạng thái phòng.

Trạng thái phòng được lưu trữ dưới dạng dữ liệu JSON trên máy chủ, vì vậy tất cả các thay đổi đều có tính bền vững. Điều này có nghĩa là trạng thái phòng không chỉ hữu ích cho kết nối mạng mà còn để duy trì hành động của một người dùng duy nhất.

Needle có thể cung cấp ID chỉ xem cho các phòng. Khi truy cập một phòng bằng ID chỉ xem, người dùng sẽ không thể tương tác với phòng, nhưng sẽ có thể xem trạng thái hiện tại và nhận các cập nhật trực tiếp. Điều này hữu ích cho các bài thuyết trình hoặc trình diễn.

Quyền sở hữu

Các đối tượng trong một phòng có thể được sở hữu bởi một người dùng. Điều này có nghĩa là chỉ chủ sở hữu của một đối tượng mới có thể thay đổi trạng thái của nó. Theo mặc định, các đối tượng không có chủ sở hữu. Các component như DragControls sẽ yêu cầu quyền sở hữu một đối tượng trước khi thực sự di chuyển nó. Trong các component tùy chỉnh, bạn có thể kiểm soát cách xử lý quyền sở hữu. Có thể không yêu cầu quyền sở hữu, quyền sở hữu có thể được cho phép tự động chuyển giao cho người dùng khác, hoặc quyền sở hữu chỉ có thể được chuyển giao bằng một hành động cụ thể.

Khi người dùng rời phòng, các đối tượng thuộc sở hữu của người dùng đó sẽ bị xóa hoặc quyền sở hữu sẽ được đặt lại, tùy thuộc vào cách đối tượng được tạo.

Kích hoạt kết nối mạng cho dự án của bạn

  1. Thêm component SyncedRoom vào cảnh của bạn. Theo mặc định, điều này sẽ sử dụng hạ tầng kết nối mạng do Needle cung cấp.

  2. Thêm component SyncedTransform vào một đối tượng mà bạn muốn đồng bộ hóa chuyển động của nó qua mạng.

  3. Thêm component DragControls vào cùng đối tượng đó.

  4. Chạy dự án. Trong trình duyệt, nhấp vào "Join Room" và sao chép URL.

  5. Mở một cửa sổ trình duyệt mới và dán URL. Bây giờ bạn sẽ thấy cùng một đối tượng trong cả hai cửa sổ. Thử kéo đối tượng trong một cửa sổ và xem nó di chuyển trong cửa sổ kia.

Component DragControls, giống như nhiều component Needle khác, có hỗ trợ kết nối mạng tích hợp sẵn. Quyền sở hữu sẽ được chuyển giao cho người bắt đầu kéo đối tượng.

Các Component tích hợp sẵn với hỗ trợ kết nối mạng

Component
Mô tả

SyncedRoom

Xử lý kết nối mạng và kết nối đến một phòng.

SyncedTransform

Xử lý đồng bộ hóa transform.

SyncedCamera

Tạo một prefab cho bất kỳ người dùng nào kết nối đến phòng, prefab này sẽ theo dõi vị trí của họ.

VoIP

Xử lý các kết nối âm thanh voice-over-IP, truy cập microphone, v.v. giữa những người dùng.

ScreenCapture

Xử lý chia sẻ màn hình qua API web.

Networking

Sử dụng để tùy chỉnh URL máy chủ backend. Cũng cho phép đặt máy chủ cục bộ để phát triển.

DragControls

Xử lý kéo đối tượng. Quyền sở hữu sẽ tự động được chuyển cho người dùng cuối cùng kéo đối tượng.

Duplicatable

Xử lý sao chép đối tượng. Các đối tượng được sao chép sẽ được tạo thể hiện cho mọi người trong phòng.

Deletable

Xử lý xóa đối tượng. Các thao tác xóa được đồng bộ hóa qua mạng.

DeleteBox

Xử lý xóa các đối tượng có component "Deletable" khi chúng được kéo vào một vùng hộp.

PlayerSync

Component mạnh mẽ giúp tạo thể hiện một đối tượng cụ thể cho mỗi người chơi được kết nối.

PlayerState

Thêm component này vào các đối tượng được gán cho PlayerSync.

PlayerColor

Component đơn giản cho màu sắc riêng của người chơi. Mỗi người dùng được gán một màu ngẫu nhiên khi tham gia phòng. Component này gán màu đó cho vật liệu chính của đối tượng.

WebXR

Xử lý đồng bộ hóa avatar người dùng (tay và đầu).

Kết nối mạng tự động cho các Component tùy chỉnh

Các trường (fields) trong các component của riêng bạn có thể được kết nối mạng rất dễ dàng. Các thay đổi đối với trường sẽ được tự động phát hiện và gửi đến tất cả người dùng trong phòng. Các thay đổi này cũng được duy trì như một phần của Trạng thái Phòng, vì vậy người dùng tham gia phòng sau này cũng sẽ nhận được trạng thái hiện tại của trường, đảm bảo mọi người đều thấy cùng dữ liệu.

Để tự động kết nối mạng một trường trong một component, trang trí nó bằng decorator @syncField():

::::code-group :::code-group-item Đồng bộ hóa một số

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 Đồng bộ hóa màu của đối tượng

::: ::::

Lưu ý rằng syncField có một tham số tùy chọn để chỉ định một phương thức sẽ được gọi khi giá trị thay đổi. Phương thức này nên được định nghĩa trong cùng một lớp.

::: tip Cài đặt dự án tùy chỉnh Nếu bạn đang sử dụng cài đặt dự án tùy chỉnh, bạn cần có experimentalDecorators: true trong tệp tsconfig.json của mình để decorator syncField hoạt động. Các dự án được tạo bằng Needle Starters đã bật tính năng này theo mặc định. :::

Tạo và hủy đối tượng

Thông thường, bạn muốn tạo và hủy đối tượng trong thời gian chạy, và tất nhiên những thay đổi này phải được đồng bộ hóa qua mạng.

Component PlayerSync đơn giản hóa quy trình này bằng cách tự động tạo thể hiện một đối tượng cụ thể cho mỗi người chơi được kết nối. Khi một người chơi rời phòng, đối tượng sẽ bị hủy cho tất cả người dùng.

Ngoài ra, Needle Engine cung cấp hai phương thức cấp cao:

🏗️ Mẫu mã đang được xây dựng

Kết nối mạng thủ công

Needle Engine cũng cung cấp API cấp thấp để gửi và nhận tin nhắn. Chúng tôi gọi đây là "kết nối mạng thủ công". Các nguyên tắc tương tự, nhưng bạn hoàn toàn kiểm soát việc gửi và nhận tin nhắn cũng như cách xử lý chúng.

Gửi tin nhắn

Gửi tin nhắn đến tất cả người dùng trong cùng một phòng:

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

Nhận tin nhắn

Bạn có thể đăng ký các sự kiện trong phòng bằng cách sử dụng một khóa cụ thể. Thông thường, bạn sẽ muốn kết hợp điều này với việc hủy đăng ký:

  • đăng ký trong onEnable và hủy đăng ký trong onDisable Với cách tiếp cận này, không có tin nhắn nào sẽ được nhận trong khi đối tượng bị vô hiệu hóa.

  • hoặc đăng ký trong start và hủy đăng ký trong onDestroy Với cách tiếp cận này, tin nhắn vẫn sẽ được nhận trong khi đối tượng bị vô hiệu hóa.

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

Hủy đăng ký các sự kiện:

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

Kiểm soát tính bền vững của thông báo

Khi gửi các tin nhắn mạng, API cấp thấp cho phép bạn quyết định xem tin nhắn đó có nên được duy trì (lưu trong trạng thái phòng) hay không (chỉ gửi đến những người dùng hiện đang ở trong phòng). Để duy trì một tin nhắn, hãy đảm bảo nó có trường guid. Trường này thường được sử dụng để áp dụng dữ liệu tin nhắn cho một đối tượng cụ thể, bằng cách cung cấp guid của đối tượng đó. Nếu bạn muốn nhắm mục tiêu một đối tượng cụ thể (và do đó, bao gồm trường guid) nhưng muốn dữ liệu không được duy trì, hãy đặt trường dontSave thành true trong tin nhắn của bạn.

Tất cả các tin nhắn bền vững được lưu trong trạng thái phòng và sẽ được gửi đến những người dùng kết nối sau này. Các tin nhắn không bền vững chỉ được gửi đến những người dùng hiện đang ở trong phòng, điều này hữu ích cho các hiệu ứng (như phát hiệu ứng âm thanh) không có ý nghĩa khi phát cho những người dùng hiện không ở trong phòng. Tùy chọn, bạn có thể bao gồm trường deleteOnDisconnect trong tin nhắn của mình để xóa tin nhắn cụ thể này khi người dùng ngắt kết nối.

// This message will be sent to all users currently in the room,
// AND to users that join the room later.
this.context.connection.send("my-message", { guid: this.guid, myData: "myValue" });

// This message will be sent to all users currently in the room,
// but NOT be sent to users that join the room later.
this.context.connection.send("my-message", { guid: this.guid, myData: "myValue", dontSave: true });

// This message will be sent to all users currently in the room,
// but NOT be sent to users that join the room later.
this.context.connection.send("my-message", { myData: "myValue" });

// This message will be sent to all users currently in the room,
// AND to users that join the room later,
// but will be deleted from the room state when the user disconnects.
this.context.connection.send("my-message", { guid: this.guid, myData: "myValue", deleteOnDisconnect: true });

Để xóa trạng thái cho một guid cụ thể khỏi bộ nhớ backend, hãy đặt khóa tin nhắn thành delete-state và nhắm mục tiêu một đối tượng cụ thể bằng guid của nó: { guid: "guid_to_delete" }.

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

Sử dụng cờ gỡ lỗi để hiểu tin nhắn mạng

Có một số cờ gỡ lỗi có thể được sử dụng để tìm hiểu sâu hơn về tin nhắn mạng. Chúng có thể được thêm vào URL trang, ví dụ https://localhost:3000/?debugnet.

Cờ
Mô tả

?debugnet

Ghi log tất cả tin nhắn mạng đến và đi vào console

?debugowner

Ghi log tất cả yêu cầu và thay đổi quyền sở hữu vào console

?debugnetbin

Ghi log thông tin bổ sung cho tin nhắn nhị phân đến và đi vào console

Các sự kiện vòng đời kết nối mạng

Các sự kiện sau đây có sẵn để lắng nghe trong các component của bạn. Chúng mô tả các sự kiện mạng phổ biến mà bạn có thể muốn phản ứng lại trong các component của mình, chẳng hạn như chính bạn hoặc người dùng khác tham gia hoặc rời phòng.

// Listen to the event when *you* have joined a networked room
this.context.beginListen(RoomEvents.JoinedRoom, ({room, viewId, allowEditing, inRoom}) => { ... });

// Listen to the event when *you* have left a networked room
this.context.beginListen(RoomEvents.LeftRoom, ({room}) => { ... });

// Listen to the event when *another user* has joined your networked room
this.context.beginListen(RoomEvents.UserJoinedRoom, ({userId}) => { ... });

// Listen to the event when *another user* has left your networked room
this.context.beginListen(RoomEvents.UserLeftRoom, ({userId}) => { ... });

// This event is received after all current room state has been sent to the client
this.context.beginListen(RoomEvents.RoomStateSent, () => { ... });

Sử dụng Máy chủ kết nối mạng Needle

Theo mặc định, các cảnh Needle có kết nối mạng kết nối với hạ tầng đám mây được quản lý và cung cấp bởi Needle. Không cần cài đặt bổ sung và hiện tại không có chi phí bổ sung nào cho việc sử dụng dịch vụ này.

Thông thường, điều này sẽ hoạt động tốt cho khoảng 15-20 người dùng trong cùng một phòng. Khi dự án của bạn trưởng thành, bạn có thể nâng cấp lên giải pháp kết nối mạng lớn hơn/tốt hơn/mạnh mẽ hơn bằng cách lưu trữ máy chủ kết nối mạng của riêng bạn.

Lưu trữ Máy chủ kết nối mạng của riêng bạn

Bạn có thể muốn lưu trữ máy chủ kết nối mạng của riêng mình cho các triển khai lớn hơn hoặc để có nhiều quyền kiểm soát hơn đối với hạ tầng và triển khai kết nối mạng.

Phiên bản máy chủ Glitch mặc định nhỏ và chỉ có thể xử lý một số lượng người dùng hạn chế. Nếu bạn mong đợi hơn 15-20 người ở trong cảnh của mình cùng lúc, bạn nên xem xét lưu trữ máy chủ kết nối mạng của mình ở nơi khác (như trên Google Cloud hoặc 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 Tích hợp tùy chỉnh

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));
});

::: ::::

Cấu hình

Các tùy chọn sau có sẵn:

Tùy chọn
Mô tả

options.endpoint string

Tùy chọn. Endpoint máy chủ tương đối. Ví dụ: /socket sẽ bắt đầu endpoint websocket trên yourserver/socket. Mặc định là /.

options.maxUsers number

Số lượng người dùng đồng thời tối đa trên một máy chủ. Mặc định là 50.

options.defaultUserTimeout number

Thời gian tính bằng giây sau đó người dùng được coi là đã ngắt kết nối. Mặc định là 30.

process.env.VIEW_ONLY_SALT string

Giá trị muối được sử dụng để tạo ID phòng chỉ xem từ các ID phòng thông thường. Mặc định là một giá trị muối được định nghĩa trước.

process.env.NEEDLE_NETWORKING_S3_* string

Bật lưu trữ S3. Xem phần dưới đây để biết danh sách đầy đủ các biến môi trường bạn cần thiết lập cho điều này. Khi không được thiết lập, bộ nhớ mặc định được sử dụng (tệp JSON trên đĩa).

Máy chủ kết nối mạng sẽ tự động quản lý việc kết nối và ngắt kết nối người dùng, nhận và gửi tin nhắn, và duy trì trạng thái phòng.

::: tip Các vị trí máy chủ khác nhau cho phát triển cục bộ và được lưu trữ Nếu bạn đang làm việc trên mã kết nối mạng tùy chỉnh, bạn có thể muốn sử dụng các vị trí máy chủ khác nhau cho phát triển cục bộ và ứng dụng được lưu trữ. Bạn có thể đặt các URL máy chủ riêng lẻ trong component Networking:

Lưu trữ Trạng thái

Trạng thái mạng theo mặc định được lưu vào đĩa trên máy chủ dưới dạng tệp JSON trong thư mục /.data. Mỗi phòng có tệp riêng và trạng thái được gửi đến các client kết nối khi họ tham gia phòng.

Tùy chọn, trạng thái kết nối mạng có thể được lưu trữ với nhà cung cấp lưu trữ tương thích S3. Sử dụng các biến môi trường sau để bật lưu trữ 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_`

Máy chủ kết nối mạng cục bộ

Để kiểm tra và phát triển, bạn có thể chạy gói kết nối mạng Needle Engine trên máy chủ cục bộ. Chúng tôi đã chuẩn bị một kho lưu trữ được thiết lập để lưu trữ gói websocket và giúp bạn dễ dàng thực hiện điều đó.

  1. Làm theo hướng dẫn trong README để thiết lập máy chủ. Máy chủ sẽ chạy trên wss://localhost:9001/socket theo mặc định.

  2. Thêm component Networking vào cảnh của bạn.

  3. Dán địa chỉ máy chủ cục bộ vào trường Localhost trên component Networking.

Nâng cao: Tùy chỉnh cài đặt WebRTC cho peer.js

Needle Engine sử dụng các giá trị mặc định hợp lý cho peerjs. Nếu bạn muốn sửa đổi các giá trị mặc định đó, bạn có thể gọi

setPeerOptions(opts: PeerjsOptions);

với các cài đặt tùy chỉnh của bạn. Điều này có thể được sử dụng để sửa đổi nhà cung cấp lưu trữ cho máy chủ ICE/STUN/TURN, ví dụ khi bạn sử dụng máy chủ WebRTC của riêng mình.

Nâng cao: Định dạng thông báo của Máy chủ và Client

::: warning Chỉ dành cho mục đích thông tin. Hãy sử dụng các API được cung cấp bởi Needle Engine thay thế. Thông thường, bạn không cần tương tác trực tiếp với các định dạng thông báo này, vì API kết nối mạng cấp thấp đã xử lý việc phân tích cú pháp tin nhắn và cung cấp cho bạn các loại dữ liệu chính xác. Thông tin ở đây được cung cấp cho người dùng nâng cao muốn hiểu các định dạng tin nhắn cơ bản hoặc triển khai các giải pháp kết nối mạng của riêng họ. :::

Tin nhắn được gửi ở định dạng JSON. Chúng luôn có một trường key mô tả loại tin nhắn và một trường data chứa tải trọng tin nhắn. Trường data có thể là bất kỳ đối tượng nào có thể tuần tự hóa JSON.

Các sự kiện phòng tích hợp sẵn

::::code-group :::code-group-item Tham gia

// Sent to the server to attempt joining a room.
{
    "key": "join-room",
    "data": {
        "room": string,
        "viewOnly": boolean,
    }
}

::: :::code-group-item Rời đi

// Sent to the server to leave a room.
{
    "key": "leave-room",
    "data": {
        "room": string
    }
}

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

// Sent to the client when the local user has joined a room.
// Type: JoinedRoomResponse
{
    "key": "joined-room",
    "room": string,
    "viewId": string,
    "allowEditing": boolean,
    "inRoom": string[] // connection IDs
}

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

// Sent to the client when the local user has left a room.
// Type: LeftRoomResponse
{
    "key": "left-room",
    "room": string
}

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

// Sent to the client when any user has joined a room.
// Type: UserJoinedOrLeftRoomModel
{
    "key": "user-joined-room",
    "data": {
        "userId": string // connection ID
    }
}

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

// Sent to the client when any user has left a room.
// Type: UserJoinedOrLeftRoomModel
{
    "key": "user-left-room",
    "data": {
        "userId": string // connection ID
    }
}

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

// Sent to the client after the complete room state has been sent.
{
    "key": "room-state-sent",
    "room": string // room name 
}

::: ::::

Các sự kiện tiện ích tích hợp sẵn

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

// Sent to the client when the connection is established.
{
    "key": "connection-start-info",
    "data": {
        "id": string // connection ID
    }
}

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

// Used by the syncInstantiate() API to create a new instance of an asset.
// Type: 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

// Used by the syncDestroy() API to destroy an instance of an asset.
// Type: DestroyInstanceModel
{
    "key": "instance-destroyed",
    "data": {
        "guid": string,
        "dontSave": boolean | undefined
    }
}

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

// Sent to the server every few seconds to keep the connection alive.
{
    "key": "ping",
    "data": {}
}

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

// Sent by the server in response to a ping.
{
    "key": "pong",
    "data": {}
}

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

// Sent to the server to delete state for a specific guid.
{
    "key": "delete-state",
    "data": {
        "guid": <string>
    }
}

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

// Sent to the server to delete ALL current room state.
{
    "key": "delete-all-state",
    "data": {}
}

::::

Các sự kiện quyền sở hữu tích hợp sẵn

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

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

::: :::code-group-item OwnershipResponse // Type: 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
    }
}

::: ::::

Các schema Flatbuffer tích hợp sẵn

Tin nhắn Flatbuffer được gửi trực tiếp dưới dạng tin nhắn nhị phân.

::::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 -->

::: ::::

Nâng cao: Tin nhắn nhị phân ở định dạng Flatbuffer

Tin nhắn JSON dễ sử dụng và hiểu, nhưng thường lớn hơn về bộ nhớ và băng thông. Đối với lượng lớn dữ liệu hoặc khi gửi các cập nhật nhanh, tin nhắn nhị phân nhanh hơn và hiệu quả hơn. Bạn có thể sử dụng tin nhắn Flatbuffers trong Needle Engine cho những trường hợp cần thiết đó. Sử dụng Flatbuffers yêu cầu các bước cài đặt bổ sung như định nghĩa và biên dịch một schema tin nhắn và khó gỡ lỗi hơn vì bạn đang xử lý các tin nhắn nhị phân.

Lưu ý rằng khi gửi và nhận tin nhắn flatbuffer, không có trường key – loại tin nhắn là một phần của schema Flatbuffer. Những gì bạn gửi và nhận qua kết nối Websocket là một buffer nhị phân duy nhất.

Gửi tin nhắn nhị phân đến tất cả người dùng trong cùng một phòng:

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

Đăng ký nhận tin nhắn nhị phân ở định dạng Flatbuffer:

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

Hủy đăng ký nhận tin nhắn nhị phân:

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

Mã mẫu Flatbuffers

Trước khi có thể gửi và nhận tin nhắn Flatbuffer, bạn cần định nghĩa một schema và biên dịch nó sang TypeScript. Sau đó, đăng ký schema với hệ thống kết nối mạng và sử dụng các phương thức schema đã tạo để tạo và phân tích cú pháp tin nhắn.

::::code-group :::code-group-item Đăng ký schema

// Register a new Flatbuffer schema with the networking system
import { registerBinaryType } from '@needle-tools/engine';
import { MyDataModel } from 'my-data-model.js';

const MySchemaIdentifier = "MYSC";

registerBinaryType(MySchemaIdentifier, MyDataModel.getRootAsSyncedTransformModel);

::: :::code-group-item Gửi tin nhắn

// Prepare data for sending by creating a Flatbuffer message:
import { MyDataModel } from 'my-data-model.js';

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

// Construct a Flatbuffer message
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();
}

// Send the data
function sendData() {
    const data = createMyCustomModel("your-payload", this, true);
    this.context.connection.sendBinary(data);
}

::: :::code-group-item Nhận tin nhắn

// Subscribe to receive this specific message type:
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 Tin nhắn Flatbuffer tùy chỉnh và tính bền vững Hiện tại, các tin nhắn nhị phân tùy chỉnh không thể được duy trì trên máy chủ kết nối mạng. Sửa đổi máy chủ kết nối mạng và thêm các schema flatbuffer tùy chỉnh của bạn để đảm bảo thuộc tính guid có thể được xử lý. :::

Tóm tắt

Needle Engine làm cho chủ đề phức tạp của kết nối mạng trở nên dễ tiếp cận và dễ sử dụng. Bạn có thể bắt đầu với kết nối mạng tự động cho các component của mình chỉ với vài dòng mã và bạn có thể tìm hiểu sâu hơn về kết nối mạng thủ công khi cần kiểm soát nhiều hơn.

Page automatically translated using AI

để sao chép đối tượng qua mạng.

để hủy đối tượng qua mạng.

Máy chủ kết nối mạng của chúng tôi có sẵn trên NPM dưới dạng gói node.js. Gói này chứa các tích hợp được cấu hình sẵn cho các framework web phổ biến và , và có thể được tích hợp vào các framework máy chủ Node.js khác.

::: tip Để thử nghiệm nhanh: Remix trên Glitch Bạn có thể remix một máy chủ kết nối mạng đơn giản chạy trên Glitch từ trang này: bằng cách nhấp vào nút ở góc dưới bên phải.

::: tip Ví dụ trên Glitch.com Xem mã trên để biết ví dụ về cách tích hợp Needle Networking với máy chủ Express. :::

Các máy chủ kết nối mạng tùy chỉnh có thể được triển khai ở bất kỳ đâu, ví dụ như trên Google Cloud. Để biết thêm hướng dẫn, vui lòng tham khảo kho lưu trữ này:

:::

Tải xuống mẫu máy chủ cục bộ từ

Các component Screencapture (Chia sẻ màn hình) và VoIP (Giao tiếp thoại) của Needle Engine sử dụng để kết nối mạng âm thanh và video. Peer.js sử dụng WebRTC dưới nền.

Websockets
Flatbuffers
syncInstantiate()
syncDestroy()
Xem tất cả các sự kiện Phòng trong tài liệu API
Xem tất cả các sự kiện Quyền sở hữu trong tài liệu API
Xem tất cả các sự kiện Kết nối trong tài liệu API
gói kết nối mạng riêng
Fastify
Express
needle-networking.glitch.me
glitch.com/edit/#!/needle-networking
Máy chủ kết nối mạng cục bộ Needle
github.com/needle-tools/networking-local
peer.js
Tạo schema
Sử dụng trình biên dịch schema
Flatbuffers trong Typescript
Các schema Flatbuffer tích hợp sẵn trong Needle Engine