> For the complete documentation index, see [llms.txt](https://docs.altu.d1.cx/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.altu.d1.cx/build/assistentes/builder/componentes/actions/socket_event.md).

# Socket Event

{% hint style="info" %}
Disponível somente no canal **Widget**
{% endhint %}

Útil para customizações, como por exemplo exibir um menu de opções que dependa de dados de um usuário logado.

```javascript
[
    {
        "name": "socket_event",
        "parameters": {
            "event": "myEvent",
            "payload": {
                "param1": "value",
                "param2": "<? $context_var ?>"
            }
        },
        "result_variable": "event_response"
    }
]
```

## Atributos

* **name:** socket\_event
* **parameters:**
  * **event:** nome do evento que será disparado.
  * **payload:** dados que serão enviados para o evento. Quaisquer dados podem ser enviados para serem tratados posteriormente no frontend.
* **result\_variable:** variável de contexto que receberá o resultado da emissão do evento. Em caso de sucesso, essa variável conterá o seguinte JSON:

  ```javascript
  {
    "code": 200,
    "event": "show_context",
    "status": "ok"
  }
  ```

## Exemplo

Disparo do evento no builder (action):

```javascript
[
    {
        "name": "socket_event",
        "parameters": {
            "event": "sendData",
            "payload": {
                "name": "Marcos Duarte"
            }
        },
        "result_variable": "event_response"
    }
]
```

Listener do evento declarado no `<body>` do widget:

```markup
<script type="text/javascript">
    socket.on('sendData', function(payload) {
        console.log(payload);
    });
</script>
```

Ao emitir o evento, no console do browser será exibido os dados recebidos:

```javascript
{"name": "Marcos Duarte"}
```
