Вступление

Когда я создавал Утвердить шаблон веб -окетов , Я думал, что я единственный сумасшедший человек, который подтолкнул и запустил расчет 1 + 1 на стороне сервера, пока не увидел это видео Анкет

Phoenix LiveViewis Решение на стороне сервера с использованием Эликсир язык программирования.

Мой Утверждение Решение WebSockets делится той же идеей с Phoenix liveview Анкет

Тем не менее, решение одобрения составляет 100% JavaScript. Для тех разработчиков JavaScript/TypeScript, которые не готовы выучить другой язык программирования, решение одобрения для вас.

Этот пост представляет собой пошаговую инструкцию о том, как создать приложение для одобрения на основе веб -питания.

Создайте проект

Чтобы начать, запустите следующие команды в терминале или командной оболочке.

npx degit apprunjs/apprun-websockets my-app
cd my-app
npm install
npm start

Вы увидите одно страничное приложение с помощью Bootstrap.

Структура проекта

Проект имеет типичную структуру проекта Express JS.

Фигура 1. Структура проекта

• сервер В каталоге есть код на стороне сервера
• Server/index.js это веб -сервер
• SRC В каталоге есть код на стороне клиента
• public В каталоге есть статические активы
• public/index.html это веб -страница приложения по умолчанию

Проект также имеет несколько сценариев NPM.

• NPM Start: Клиент : Скомпилируют и смотрят приложение на стороне клиента
• NPM Start: Server : Запускает веб -сервер
• npm start : Запускает клиент и сервер
• NPM Run Build : Создайте приложение на стороне клиента для производства

Понять архитектуру

Сторона клиента

На Главная Страница спа, есть два счетчика. Один работает локально в браузере. Один работает на сервере.

import { app, Component } from 'apprun';

export default class HomeComponent extends Component {
  state = 0;
  view = state => {
    const add = (state, num) => state + num;
    return 

      
{state}
      

        -1
        +1
        
Run the counter locally
      
      

      

        -1
        +1
        
Run the counter on server through web sockets
      
    
  };
  update = {
    '@add': (_, state) => state
  }
}

Все они используют модель программирования, управляемую событиями, для запуска обновления состояния и повторного жизненного цикла. Местный счетчик использует местную директиву событий. Счетчик сервера использует глобальное событие//ws:, что означает отправку его в север. Параметры события @Add, 1 или @Add -1.

main.tsx Имеет пять строк кода для отправки события на сервер через веб -сокет. Имя события @Add. Параметр события составляет 1 или -1.

const ws = new WebSocket(`ws://${location.host}`);
app.on('//ws:', (event, state, ...args) => {
  const msg = { event, state, args };
  ws.send(JSON.stringify(msg));
});

Серверная сторона

На стороне сервера index.js создает экспресс-сервер и прослушивает связь веб-сокетов. Когда он получает сообщения, он публикует сообщения с помощью утверждения.

const apprun = require('apprun').app;
require('./add');
const express = require('express');
const { createServer } = require('http');
const app = express();
const server = createServer(app);
const wss = new WebSocket.Server({ server });
wss.on('connection', function(ws) {
  ws.on('message', function (data) {
    try {
      const json = JSON.parse(data);
      apprun.run(json.event, json);
      ws.send(JSON.stringify(json));
    } catch (e) {
      console.error(e);
    }
  });
});

Да. Apprun работает на сервере, чтобы обеспечить программирование на стороне событий на стороне сервера.

add.js это модуль на стороне сервера, который обрабатывает событие @ADD. Он делает расчет для обновления Государство Анкет Тогда в index.js , он отправляет результаты обратно в веб -сокет в качестве события, используя то же имя события @Add.

const app = require('apprun').app;
app.on('@add', function (data) {
  data.state += data.args[0];
});

Вернуться к клиенту

main.tsx получает мероприятие из веб -сокета. Он просто должен публиковать так, как есть. Событие – это глобальное событие, которое имеет название @Add. Затем домашняя страница обрабатывает событие @ADD, чтобы рассчитать состояние на сервере.

ws.onmessage = function (msg) {
  const {event, state} = JSON.parse(msg.data);
  app.run(event, state);
}

Мы можем обобщить процесс на диаграмме ниже.

Фигура 2. События между клиентом и сервером

Следующие шаги

Вы можете использовать Утверждение – шаблон Websockets как начальная точка. В шаблоне есть все, что вам нужно для создания ваших приложений Phoenix LiveView.

Или вы можете скопировать около 20 строк кода JS из main.tsx и index.js в ваше существующее приложение, чтобы начать использовать мощность веб -питания. Например, Приложения, управляемые базой данных с использованием веб-питания Анкет

Живая демонстрация

Вывод

Поскольку мы используем JavaScript, наши приложения являются полнофункциональным спа-центром. Мы можем иметь Bootstrap, D3, ChartJS и даже плагины jQuery Анкет

Решение с одобрением веб -питания настолько просто, что оно даже не стоит быть пакетом NPM. Используйте Утверждение – шаблон Websockets или скопируйте около 20 строк кода в свою кодовую базу, у вас будут приложения Phoenix LiveView.

И последнее, что можно упомянуть, это то, что Phoenix Liveview выполняет рендеринг на стороне сервера (SSR), который также является тривиально с использованием утверждения Анкет Тем не менее, я предпочитаю веб -приложение Progress Web (PWA) по сравнению с SSR, потому что PWA предоставляет офлайн, значок домашнего экрана и многие другие функции. Есть также Шаблон утверждения для PWA Анкет

Оригинал: “https://dev.to/yysun/create-a-phoenix-liveview-like-app-in-js-with-apprun-dc8”