LogoLogo
What's New?API StatusOur Website
  • Morpheus Platform Documentation
  • What is Morpheus Platform?
    • Glossary
    • Interoperability
    • Support
    • EULA
  • Firewall Problems
  • CREATION
    • Unreal Development
      • Get Started
        • Download the Editor
        • Upload Content
        • Creating your Own Map
        • Morpheus Base Project
        • Differences from Unreal
          • Character Configuration
        • Morpheus Networking
          • Introduction to Morpheus Networking
          • Network Levels
          • Replicated Properties
          • RPCs
          • Morpheus Render Targets
          • Morpheus Array
          • Networking FAQ
          • Replicating Sublevels
      • Editor Versions
      • Performance Guarantees
      • Features & Guides
        • Example Plugin
          • Nameplates
          • In-Game Roles
          • Resizing
        • Actor Pooling
        • Audio
        • Avatars
          • Creating an Avatar
          • Attachments
            • MML Attachments
          • Custom Animation Variables
          • Importing an NFT Collection
          • Capsules and Mesh Transforms
        • Bots
        • Chat
          • Unreal Text Chat
        • Control Panels
          • Control Panel Configuration
          • DJ Booth Mission Control
          • Observer Controls
        • Crowd Audio
          • CrowdAudioComponent advanced configuration
        • Crowd Rendering
          • Legacy Animated Crowd
            • Animated Crowd Console Commands
            • Attaching static meshes to crowd members
          • Crowd Materials
          • Performance Parameters
          • Live Config Settings
          • Crowd Animation
            • Crowd Anim Blueprint
              • User Guide - Crowd Anim Blueprint
              • Reference Guide - ABP Nodes
                • Animation Playback
                • States and State Machines
                • Variables
                • Transitions
                • Special
                • Blends
                • Additional Notes
        • Helpers & Extras
          • "Instanced Objects" in Blueprints
          • Objects with "world context"
          • Making DataAsset classes
          • Duplicate Objects
          • The Bootflow Subsystem
          • The "Wait For Condition" System
          • Advanced Graphics Settings
          • Listening to Inputs on UObjects
          • Morpheus UserID
          • World Services
          • M2Extras: Skins System
        • Loading Screen
        • Live Config
          • Editing for a World
          • Editing Locally
          • Default Settings
          • Accessing via Blueprint
          • Adding New Settings
          • Overriding Defaults
          • Using Arrays
        • MML
        • Motion Capture
        • Networking
        • Notifications
        • Raycastable Crowd
        • Singletons
        • Streaming & Multiplatform
          • GFN on Mobile
        • UI
          • "UI Mode"
        • Video Players
          • Embedded Video Player
          • Millicast video streaming
            • How to Setup an In-Game Video Stream
            • Picture-in-Picture mode
          • Streaming Video Player
            • How to Setup a URL Video Player
            • Picture-in-Picture mode
        • Visual Debugging
          • Inspector
        • Online Services
          • KV Store Service
        • Web Browser
          • Setup the browser widget
          • Viewport browser
          • In-world browser
          • Loading embedded pages
          • Game <--> Browser Communication
          • Debugging issues
        • Web Requests
          • Http Requests
            • Legacy HTTP Nodes
          • JSON Handling
          • WebSockets
          • Identity Validation
          • Allowed External URLs
          • Walkthrough Example
            • Example Counter Service
        • World Travel
          • World Travel in the Editor
        • Avatar Physics Assets
        • Action Gameplay Helper Components
      • Workflows
        • Upgrade the Editor
        • Editing Project Settings
        • Profiling
        • Marketplace Importing
        • Extra Workflows
          • Setup Play-in-Editor
          • Setup Local Asset Validation
          • Adding Gameplay Tags
          • Validating Game Assets
          • Custom Connection Modes
          • Connect Editor to a World
          • Common Issues
      • Best Practices
    • Worlds
      • Invite Players
        • Setting Role Groups
      • Persistent Worlds
      • Always on Worlds
    • Running Events
      • Large Scale Events - Checklist
      • Anti-Cheat (EAC)
      • Player Entry
        • React Native
        • Steam
        • Hardware Requirements
      • Broadcast
        • OBS Integration
      • Failover
      • Capacity and Queue Management
  • ADMINS
    • Access Control
      • Add Metaverse Contributors
      • Create a New Project
    • Pricing
      • Development Support
      • Included Usage & Overages
      • Cloud Streaming
      • Access Modes
      • War Room Support
      • Platform SLA
    • Settings
      • Projects
  • APIs and Tooling
    • API Reference
      • Accounts
      • Events
      • Key/Value Store
      • Organizations
      • Realtime
      • User Profile
      • World Builder
      • Worlds
    • Template Web App
      • Moderation
    • Pixel Streaming
    • Launcher
  • Dashboard
    • Assets
      • Assets Versions
      • Engine Plugins
      • Project Plugins
      • Templates
    • Releases
  • Integrations
    • Analytics
      • Send Events from Web
      • Send Events from Unreal
    • Chat
      • Integrate Pubnub with your Unreal Project
      • Add Moderation to Chat
Powered by GitBook
On this page
  • Sending a message from the browser to the game
  • Sending a message from the game to the browser

Was this helpful?

  1. CREATION
  2. Unreal Development
  3. Features & Guides
  4. Web Browser

Game <--> Browser Communication

PreviousLoading embedded pagesNextDebugging issues

Last updated 1 day ago

Was this helpful?

You can send messages from the game to the browser and back using JSON communication.

This guide assumes you've followed Setup the browser widget. The example will use In-world browser as the example.

Communication with a viewport browser is the same except for where the difference is specified.

Sending a message from the browser to the game

We'll add a feature that on clicking a button in the browser, we'll print the text input provided in the browser in the game client.

[todo]

Sending a message from the game to the browser

We'll add a feature that will display the player's XYZ position in the browser.

First, make a blueprint structure called SPosition with the parameters X Y Z. We'll use this to serialize the vector into a JSON struct.

In your browser widget blueprint, add the following nodes. This will call the function setPlayerPosition in the browser every tick alongside the player's location as a struct.

In the index.html, update the code to the below.

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap');
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            font-family: 'Roboto', sans-serif;
            font-size: 4rem;
	    background: #ffffff;
        }
    </style>
    <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
    <script>
	jQuery(function()
	{
	// required initialisation
	"object"!=typeof ue&&(ue={}),uuidv4=function(){return"10000000-1000-4000-8000-100000000000".replace(/[018]/g,function(t){return(t^crypto.getRandomValues(new Uint8Array(1))[0]&15>>t/4).toString(16)})},ue5=function(r){return"object"!=typeof ue.interface||"function"!=typeof ue.interface.broadcast?(ue.interface={},function(t,e,n,o){var u,i;"string"==typeof t&&("function"==typeof e&&(o=n,n=e,e=null),u=[t,"",r(n,o)],void 0!==e&&(u[1]=e),i=encodeURIComponent(JSON.stringify(u)),"object"==typeof history&&"function"==typeof history.pushState?(history.pushState({},"","#"+i),history.pushState({},"","#"+encodeURIComponent("[]"))):(document.location.hash=i,document.location.hash=encodeURIComponent("[]")))}):(i=ue.interface,ue.interface={},function(t,e,n,o){var u;"string"==typeof t&&("function"==typeof e&&(o=n,n=e,e=null),u=r(n,o),void 0!==e?i.broadcast(t,JSON.stringify(e),u):i.broadcast(t,"",u))});var i}(function(t,e){if("function"!=typeof t)return"";var n=uuidv4();return ue.interface[n]=t,setTimeout(function(){delete ue.interface[n]},1e3*Math.max(1,parseInt(e)||0)),n});

        // register the listener for setting the player position
        ue.interface.setPlayerPosition = function(position) {
	    const {x, y, z} = position;
            if (x && y && z) {
                $('body').text(`X: ${x.toFixed(2)} Y: ${y.toFixed(2)} Z: ${z.toFixed(2)}`);
            } else {
                console.error('Invalid position object:', position);
            }
        };
	});
    </script>
</head>
<body>
    X: 0 Y: 0 Z: 0
</body>
</html>

[this doesnt work its so buggy waiting for nick response for support]