{"result":{"depiction_url":null,"edges":{"references":{"objects":[{"created":"2020-05-30T05:47:56Z","object_id":{"id":1324,"is_a":["text","documentation","reference","module"],"name":"doc_module_mod_mqtt","title":"mod_mqtt","uri":"https:\/\/zotonic.com\/id\/1324"},"seq":1000000},{"created":"2020-05-30T05:47:56Z","object_id":{"id":1323,"is_a":["text","documentation","reference","template_scomp"],"name":"doc_template_scomp_scomp_live","title":"live","uri":"https:\/\/zotonic.com\/id\/1323"},"seq":1000000},{"created":"2020-05-30T05:47:56Z","object_id":{"id":1303,"is_a":["text","documentation","reference","module"],"name":"doc_module_mod_wires","title":"mod_wires","uri":"https:\/\/zotonic.com\/id\/1303"},"seq":1000000},{"created":"2020-05-30T05:47:56Z","object_id":{"id":1274,"is_a":["text","documentation","developerguide"],"name":"doc_developerguide_notifications","title":"Notifications","uri":"https:\/\/zotonic.com\/id\/1274"},"seq":1000000},{"created":"2020-05-30T05:47:56Z","object_id":{"id":1892,"is_a":["text","documentation","reference","controller"],"name":"doc_controller_controller_mqtt_transport","title":"controller_mqtt_transport","uri":"https:\/\/zotonic.com\/id\/1892"},"seq":1000000}],"predicate":{"id":332,"is_a":["meta","predicate"],"name":"references","title":{"_type":"trans","tr":{"en":"References"}},"uri":"https:\/\/zotonic.com\/id\/references"}},"relation":{"objects":[{"created":"2020-05-30T05:47:56Z","object_id":{"id":1324,"is_a":["text","documentation","reference","module"],"name":"doc_module_mod_mqtt","title":"mod_mqtt","uri":"https:\/\/zotonic.com\/id\/1324"},"seq":1000000}],"predicate":{"id":303,"is_a":["meta","predicate"],"name":"relation","title":{"_type":"trans","tr":{"nl":"Relatie","en":"Relation"}},"uri":"http:\/\/purl.org\/dc\/terms\/relation"}}},"id":1302,"is_a":["text","documentation","developerguide"],"links":[{"rel":"self","target":"https:\/\/zotonic.com\/.zotonic\/websub\/topic\/1302"},{"rel":"hub","target":"https:\/\/zotonic.com\/.zotonic\/websub"}],"medium":null,"medium_url":null,"name":"doc_developerguide_server_browser_interaction","page_url":{"en":"https:\/\/zotonic.com\/docs\/1302\/browser-server-interaction","x-default":"https:\/\/zotonic.com\/docs\/1302\/browser-server-interaction"},"preview_url":null,"resource":{"body":"
\n \n
\n\n

There are multiple ways to set up interaction between server-side Zotonic code\nand client-side JavaScript.<\/p>\n

If you want to initiate the interaction in the client (browser)<\/p>\n

    \n
  1. publish\/subscribe.<\/li>\n
  2. API methods<\/li>\n
  3. Wires<\/li>\n
  4. Notifications<\/li>\n
  5. Transport (deprecated)<\/li>\n<\/ol>\n
    \n

    Publish\/subscribe (MQTT)<\/h2>\n

    The preferred transport is using publish and subscribe with MQTT topics.\nMessage that are published on the bridge topics are relayed between the server\nand the browser (and vice versa).<\/p>\n

    See mod_mqtt<\/span><\/a> for more information.<\/p>\n

    An example of MQTT PubSub usage is the custom tag live<\/span><\/a>.<\/p>\n<\/div>\n

    \n

    API Methods<\/h2>\n

    All model interfaces m_get<\/span><\/code>, m_post<\/span><\/code>, and m_delete<\/span><\/code> are\ndirectly exposed as JSON APIs.<\/p>\n

    For example, the m_get<\/span><\/code> call for the Erlang file m_mymodel.erl<\/span><\/code>\nis available via a HTTP GET<\/span><\/code> on the path: \/api\/model\/mymodel\/get\/...<\/span><\/code><\/p>\n

    Similar for the POST<\/span><\/code> and DELETE<\/span><\/code> HTTP methods.<\/p>\n<\/div>\n

    \n

    Wires<\/h2>\n

    This is part of mod_wires<\/span><\/a> and is the older method of transporting data\nbetween the server and the browser.<\/p>\n

    It is fully functional and the admin<\/em> interface is using these methods.<\/p>\n

    If you creating a new site then it is advised to start using the\nMQTT topics and isolate the places where you are using wires, so that these\ncan be replaced in due time.<\/p>\n

    \n

    Wired events<\/h3>\n

    First, define a named action:<\/p>\n

    <\/span>{%<\/span> wire<\/span> name<\/span>=<\/span>"test"<\/span> action<\/span>={<\/span>growl<\/span> text<\/span>=<\/span>"Hello world"<\/span>}<\/span> %}<\/span><\/span>\n<\/pre><\/div>\n<\/div>\n
    Then, call that action from your JavaScript code:<\/p>\n
    <\/span>z_event<\/span>(<\/span>"test"<\/span>);<\/span>\n<\/pre><\/div>\n<\/div>\n<\/div>\n
    \n
    Trigger server side notifications from JavaScript<\/h3>\n
    Trigger an Erlang notification<\/span><\/a> in Zotonic with the\nz_notify<\/span><\/code> JavaScript function:<\/p>\n
    <\/span>z_notify<\/span>(<\/span>"mymessage"<\/span>);<\/span>\n<\/pre><\/div>\n<\/div>\n
    or:<\/p>\n
    <\/span>z_notify<\/span>(<\/span>"mymessage"<\/span>,<\/span> {<\/span>foo<\/span>:<\/span> bar<\/span>,<\/span> who<\/span>:<\/span> "world"<\/span>});<\/span>\n<\/pre><\/div>\n<\/div>\n
    This will trigger a call to:<\/p>\n
    <\/span>z_notifier<\/span>:<\/span>first<\/span>(<\/span>#postback_notify<\/span>{<\/span>message<\/span> =<\/span> <<<\/span>"mymessage"<\/span>>><\/span>},<\/span> Context<\/span>)<\/span>\n<\/pre><\/div>\n<\/div>\n
    Which you can handle in any Zotonic module by defining:<\/p>\n
    <\/span>-<\/span>export<\/span>([<\/span>observe_postback_notify<\/span>\/<\/span>2<\/span>]).<\/span>\nobserve_postback_notify<\/span>(<\/span>#postback_notify<\/span>{<\/span>message<\/span> =<\/span> <<<\/span>"mymessage"<\/span>>><\/span>},<\/span> Context<\/span>)<\/span> -><\/span>\n    Who<\/span> =<\/span> z_context<\/span>:<\/span>get_q<\/span>(<\/span>who<\/span>,<\/span> Context<\/span>),<\/span>\n    z_render<\/span>:<\/span>growl<\/span>([<\/span>"Hello "<\/span>,<\/span> z_html<\/span>:<\/span>escape<\/span>(<\/span>Who<\/span>)],<\/span> Context<\/span>);<\/span>\nobserve_postback_notify<\/span>(_,<\/span> _<\/span>Context<\/span>)<\/span> -><\/span>\n    undefined<\/span>.<\/span>\n<\/pre><\/div>\n<\/div>\n
    All arguments are available via the z_context:get_q\/2<\/span><\/code> function (and friends).<\/p>\n<\/div>\n
    \n<\/a>
    Transport<\/h3>\n