Знайомство з n2o v4.4 [5]

Продовжуємо знайомство з n2o - erlang-фреймворком на вебсокетах -
відправляємо кирилицю з сервера в браузер
(продовження статті про роботу зі строками та кирилицею в erlang )

Для відправлення даних з сервера на клієнт по вебсокетах пишемо наступний код
(всередині клаузи функції event/1 модуля сторінки) -

wf:wire("new_toast('err', window.login_error);window.send_wait = false;"),

або

wf:wire(wf:f("qi('edit_admins_privileges_cont').innerHTML = `~s`;"
             "window.send_wait = false;",
             [unicode:characters_to_binary(Html, utf8)])),

а отак виглядатиме наш код, у випадку коли ми з n2o відправляємо кирилицю по вебсокетах
(власне формуємо html і додаємо в певний блок на сторінці) :

InnerHtml1 = tr:tr(Lang, <<"langs">>, <<"native_name">>),
InnerHtml2 = tr:tr(Lang, <<"fruits">>, <<"apple">>),

wf:wire(wf:f("var parent = qi('pagedivid');"
             "var div = document.createElement('div');"
             "div.id='mydivid';"
             "div.innerHTML='<p>~s</p><p>~s</p>';"
             "parent.insertBefore(div, qi('pagedivid').childNodes[1]);",
        [unicode:characters_to_binary(InnerHtml1,utf8), 
         unicode:characters_to_binary(InnerHtml2,utf8)])),

Пояснення:
unicode:characters_to_binary - слідкує за тим, щоб наша кирилиця не "поламалась"
(перетворює io lists в бінарник з відповідним кодуванням)
wf:f - форматує (prepare statement) - тобто підставляє наші значення замість міток ~s
(зліва направо, зверху вниз відповідно)
wf:wire - власне відправляє js код з сервера на клієнт(в браузер), цей код виконується в браузері

якось отак виглядатиме наше повідомлення для виводу двох-строчного alert-а:

wf:wire(wf:f("alert('~s');",["Hello !\\nWorld !"]))

та вивід кирилиці в консоль браузера:

wf:wire(wf:f("console.log('~s');", [<<"тест"/utf8>>]))

наступні два вирази ідентичні
(компілятор об'єднує спискові та бінарні строки-з-переносом):

wf:wire("new_toast('err', window.login_error);window.send_wait = false;"),

wf:wire("new_toast('err', window.login_error);"
        "window.send_wait = false;"),

наступні два вирази (функції) також ідентичні:

admin_add_admin_page0() -> <<"<div id=\"add_new_admin_cont\"><div class=\"spin_circle2\"></div></div>">>.

admin_add_admin_page0() ->
  <<"<div id=\"add_new_admin_cont\">"
      "<div class=\"spin_circle2\"></div>"
    "</div>">>.

Продовження