Phoenix_live_view: Allow client-side values to be sent to a LiveView

Created on 3 May 2019  路  4Comments  路  Source: phoenixframework/phoenix_live_view

As discussed with @chrismccord in Slack, we need a way to pass client-side values to a LiveView. An example use-case is being able to send in timezone information coming from the browser on socket connect.

Most helpful comment

Closed via #239

You can now do:

let liveSocket = new LiveSocket("/live", {logger: logger, params: {foo: "bar"}})

and then they will be available during connected mount via get_connect_params/1. See LiveView.get_connect_params/1 docs for more details. Thanks!

All 4 comments

Is this the same as sending custom events from users' javascript?

I am using something like this, although pretty sure I'm abusing private API and it's not entirely nice:

const target = document.querySelector("[data-phx-view]")
const phxEvent = {"my": "event", "payload": "here"}
liveSocket.owner(target, view => view.pushEvent("customevent", target, phxEvent))

which then triggers appropriate clause in handle_info in LiveView.

Are we talking here about wrapping this up in a nicer public interface?

That would be one aspect of it. Another aspect is sending connection params to the socket like we already can with a normal channels socket but for a LiveSocket. Some values are only available from the browser like locale and timezone information so we need some way of passing it down to a LiveView.

```
let socket = new LiveSocket("/live", {params: {timezone: Intl.DateTimeFormat().resolvedOptions().timeZone}})

I'm running into this need too. Maybe another thing to consider: do we open up things like browser local storage to LiveView?

Closed via #239

You can now do:

let liveSocket = new LiveSocket("/live", {logger: logger, params: {foo: "bar"}})

and then they will be available during connected mount via get_connect_params/1. See LiveView.get_connect_params/1 docs for more details. Thanks!

Was this page helpful?
0 / 5 - 0 ratings

Related issues

lukaszsamson picture lukaszsamson  路  5Comments

LightningK0ala picture LightningK0ala  路  5Comments

jamilabreu picture jamilabreu  路  6Comments

josevalim picture josevalim  路  3Comments

josevalim picture josevalim  路  3Comments