# Unreal Side – Sending & Receiving JSON
## 📤 Receiving JSON Messages
All messages sent from the frontend (both Startup Parameters and Runtime Messages) arrive in Unreal via the **Pixel Streaming messaging system**.
In order to receive those messages you need to setup a blueprint within so that unreal engine app could identify when the messages are sent and then trigger actions accordingly.
***
## 🚀Sending JSON Messages
Unreal can send messages back to the frontend using the **Send Pixel Streaming Response** node. In the descriptor field write the message (preferable in JSON format) to send it to the frontend.
***
## 🔗 Opening URLs in Pixel Streaming
If you try to open a URL directly using Unreal Engine’s `Launch URL` node, it will not work. As it will open the link **on the server machine**, not on the end-user’s device.
To make the URL open on the **client/frontend side**, you must use the **Send Pixel Streaming Response** node. In the **Description** field, simply enter the full URL as plain text. This will communicate to the frontend to open the desired url on the end-user's browser.
{% embed url="" %}
***
## 📖 Step-by-Step Blueprint Implementation Guide
### **Step 1: Open Your Unreal Engine Project**
* Open your Unreal Engine project and navigate to the **Content Browser**.
### **Step 2: Create a New Blueprint**
* Right-click in the Content Browser, go to **Blueprint Class**, and choose **PlayerController** as the parent class. Name it something like `ZEZ_PC`.
{% hint style="info" %}
You can skip it if you already have your own custom player controller.
{% endhint %}
### **Step 3: Open the Blueprint Editor**
* Double-click your new Blueprint (`ZEZ_PC`) to open the Blueprint Editor.
### **Step 4: Add Pixel Streaming Input Component**
* In the **Components** panel on the left, click the **Add Component** button.
* Search for and add the **PixelStreamingInput** component.
* This component will handle the inputs coming from the Pixel Streaming client, allowing the Blueprint to receive messages sent from the frontend.
### **Step 5: Create the Event BeginPlay Node**
* In the **Event Graph** (the main scripting area of the Blueprint Editor), right-click and search for `Event BeginPlay`.
* This node triggers when the PlayerController is initialized, ensuring that the setup logic runs as soon as the game starts.
### **Step 6: Bind Event to On Input Event**
* First, grab the **Pixel Streaming Input** component you added earlier.
* In the Event Graph, drag and drop the **Pixel Streaming Input** component from the **Components** panel into the graph.
* From the **Pixel Streaming Input** variable, drag off the pin and search for `Bind Event to On Input Event`.
* Connect the **Exec** pin from the `Event BeginPlay` node to the **Bind Event to On Input Event** node.
### **Step 7: Create a Custom Event**
* Drag off from the red **Event** pin on the `Bind Event to On Input Event` node.
* In the search box that appears, type "Add Custom Event" and select it.
* This will automatically create a new custom event in your Event Graph.
* **Naming the Event:**
* Name this custom event something descriptive, like `HandlePixelStreamingInput`.
* This custom event will now be triggered whenever the Pixel Streaming Input component detects input from the frontend.
* **Explanation:**
* The custom event `HandlePixelStreamingInput` is where you will define the logic for processing the incoming input data. Whenever the Pixel Streaming Input component receives a message from the frontend, this custom event will be executed.
### **Step 8: Set Up Descriptor Variable**
* Drag off from the **Event Pin** of your custom event (`HandlePixelStreamingInput`) and search for the `Set` node to create a `Descriptor` variable.
* Make sure to create a new variable of type `String` called `Descriptor`. This variable will store the input data.
### **Step 9: Get JSON String Value**
* Drag off from the **Pixel Streaming Input** component and search for `Get JSON String Value`.
* In this node, set the **Field Name** to `"message"`. This could be any name based on what you will be sending from the frontend.
* This node extracts the value associated with the `"message"` key from the incoming JSON data.
### **Step 10: Connect the Get JSON String Value Node**
* Connect the **Target** pin of the `Get JSON String Value` node to the **Pixel Streaming Input** component.
* Connect the **String Value** pin of the `Get JSON String Value` node to the `Descriptor` variable’s input pin.
* This setup assigns the extracted message value to the `Descriptor` variable.
### **Step 11: Add a Branch Node**
* Drag off from the **Exec** pin of the `HandlePixelStreamingInput` custom event and search for a `Branch` node.
* The Branch node acts like an "if" statement in traditional programming, allowing you to execute different logic paths based on a condition.
### **Step 12: Set Up the Condition for the Branch Node**
* For now, you can use the **Success** pin of the `Get JSON String Value` node as the condition for the `Branch` node.
* This checks if the value extraction was successful. If true, it will execute the logic connected to the **True** pin; if false, it will execute the logic connected to the **False** pin.
### **Step 13: Add a Print String Node (Optional)**
* To debug or confirm the process, you can add a `Print String` node after both the True and False pins of the Branch node.
* For example, you could print `Success` for the True path and `Failure` for the False path.
### **Step 14: Handling the Message in Unreal Engine**
* **After the `Print String` Node:**
* After confirming the message content with a `Print String` node, you can implement further logic based on the received message. This might involve moving an object, changing the game state, updating UI elements, or any other interaction in Unreal Engine.
* The logic after the `Print String` node should be customized according to what you want to achieve with the message received from the frontend.
### **Step 15: Send Pixel Streaming Response Node**
* You can create a custom trigger and attach that trigger to this node. Search for the `Send Pixel Streaming Response` node.
* This node allows you to send a response back to the frontend. You can customize the message sent back here.
### **Step 15: Connect the Descriptor to the Response**
* You can enter any value in description field present on `Send Pixel Streaming Response` node. This is the message that you will receive on the frontend.
* This sends the content of the Descriptor (the message received) back to the frontend as a confirmation or a result.
### **Step 16: Compile and Save**
* After connecting everything, click the **Compile** button at the top left of the Blueprint Editor, then click **Save**.
#### **Step 17: Explanation of Every Node:**
* **Event BeginPlay:** This node is the starting point for any logic that should be executed when the PlayerController is initialized.
* **Bind Event to On Input Event:** This node binds a specific event to input received from the Pixel Streaming client. It makes sure that whenever input is received, the custom event (`HandlePixelStreamingInput`) is triggered.
* **Custom Event (`HandlePixelStreamingInput`):** This is the event triggered by incoming input. It processes the input and can execute various actions based on the input data.
* **Descriptor Variable:** This variable stores the input data extracted from the incoming message. It allows for easy manipulation and reference within the Blueprint.
* **Get JSON String Value:** This node extracts a specific value from a JSON string received as input. In this case, it looks for the `"message"` field and stores its value in the Descriptor variable.
* **Branch:** A conditional logic node that allows different code paths based on whether a condition is true or false.
* **Print String:** A debugging tool that prints a string to the output log, useful for checking whether certain parts of the Blueprint logic are executed.
* **Send Pixel Streaming Response:** This node sends a message back to the frontend, allowing the application to communicate results, confirmations, or other data back to the client.
{% hint style="info" %}
You can also download our sample project from our github below.
{% endhint %}
{% embed url="" %}
