Как обновить магазин Svelte в серверной части моего SPA?

Я хочу, чтобы мой Svelte SPA взаимодействовал с некоторыми данными из БД. Для этого я использовал Sapper, поэтому я могу открыть соединение с БД в server.js и прослушать его через его механизм pub / sub. Как я могу затем разобрать сообщение в моем реактивном хранилище? здесь channelArray - это просто доступный для записи ([]), импортированный из '/.store.js'. С помощью этого кода я могу анализировать данные приложения в хранилище, но только при инициализации?

// server.js


import sirv from 'sirv';
import polka from 'polka';
import compression from 'compression';
import * as sapper from '@sapper/server';
import { channelArray, chNum } from './components/store.js';

const { PORT, NODE_ENV } = process.env;
const dev = NODE_ENV === 'development';



polka() // You can also use Express
    .use(
        compression({ threshold: 0 }),
        sirv('static', { dev }),
        sapper.middleware()
    )
    .listen(PORT, err => {
        if (err) console.log('error', err);
    });



const Redis = require('ioredis');
const chpattern = "vac:*";
const sub = new Redis();


sub.psubscribe(chpattern);  
sub.on("pmessage", function (pattern, channel, message) { 
      console.log(`REDIS updated, number of channels`);
      chNum.subscribe(value => {console.log(value)});
      console.log(`Channel ${channel} Received msg: ${message}`);
  var ch = parseInt( channel.slice(4) );
  //if (ch >= 0 && ch < chNum ) { 
  if (ch >= 0 ) { 
      console.log('REDIS updated');
          channelArray[ch].value = message;
          channelArray[ch].lastupdate = Date.now();
  } 
});

И соответствующая часть index.html


<script>
       import Ctrlbox from '../components/Ctrlbox.svelte';
       import { channelArray, chNum } from '../components/store.js';
       import Blinkbox from '../components/blinkbox.svelte'

       let ch = 0;

       const addChannel = () => {
        $channelArray = [...$channelArray, {
        id: ch++,
            value: 0,
            lastupdate: new Date()
        }];
       };


       const box = [0,1,2];

       for (var i=0; i< box.length; i++) {
           addChannel();
       }
       chNum.set(ch);


</script>

node.js store svelte sapper svelte-3
person Victor Modamio    schedule 22.05.2020    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Мне кажется, что вы напрямую манипулируете магазином. Я не думаю, что это лучший подход. Согласно документам writable имеет методы set и update. Вы используете set, когда хотите изменить значение переменной и не заботитесь о предыдущем значении. update используется, если вам нужно предыдущее значение, например, для увеличения.

Кажется, что update подойдет вашему варианту использования, так как вы, похоже, заботитесь о предыдущем состоянии. Итак, я бы предложил следующее:

 const addChannel = () => {
   channelArray.update(oldState => ([
     ...oldState,
     { id: ch++,
     value: 0,
     lastupdate: new Date() }
   ]));
 };
person Gh05d    schedule 22.05.2020
comment
У меня то же самое с обновлением. Похоже, что сервер не видит никаких изменений в магазине. Во всяком случае, меня интересует, возможен ли такой подход: взаимодействие с хранилищем на сервере node.js. - person Victor Modamio; 22.05.2020
comment
Я предполагаю, что тогда вам придется переместить функцию обновления также на сервер и выполнить ее там, когда клиент отправит вам сообщение, на которое вы ответите обновленным значением хранилища. Звучит сложно. - person Gh05d; 22.05.2020
comment
$channelArray= ... - правильный синтаксис. Это сокращение для работы с записываемыми файлами. - person Andreas Dolk; 23.05.2020

arrow_upward
0
arrow_downward

Пока это на бэкэнде

import { channelArray, chNum } from './components/store.js';

технически работает, это не то, что вы ожидаете. Импортированный channelArray на серверной части не такой же, как на веб-интерфейсе, это разные экземпляры writable, и между ними нет связи или привязки.

Вам нужно будет добавить какую-то связь между фронтендом и сервером. Запросы AJAX или сокет io, что лучше всего подходит. Какой-нибудь REST API, наверное, самое простое решение.

Я прошел через это с помощью электронного приложения, но там я могу использовать встроенный IPC, чтобы интерфейс и серверная часть могли обмениваться данными.

person Andreas Dolk    schedule 22.05.2020
comment
Точно! Я понимаю, что: если я обновляю свою запись в интерфейсе, скажем, помещаю 3 элемента в массив, server.js не знает. У меня есть это приложение, работающее и в Electron, но я хотел, чтобы он работал в уже существующем браузере (потребуется много приложений, работающих на одном ПК, и мне не нужны несколько электронных приложений). - person Victor Modamio; 23.05.2020
comment
Могу я спросить: можно ли использовать один и тот же channelArray как во внешнем, так и в серверном интерфейсе с помощью контекстного API Svelte? Не знаю, смогу ли я использовать эту функцию в моем server.js - person Victor Modamio; 23.05.2020
comment
Нет. Вы запускаете две разные среды javascript. Один из них - это движок nodejs, сервер (бэкэнд), а другой работает внутри вашего браузера. Один запускает внутренний код, другой - стройное приложение (скрипт bundle.js). Между ними нет связи или канала. Сервер не имеет доступа к данным внутри браузера и наоборот. Очень и очень распространенное решение - REST API. Маршрутизация на бэкэнде, и многие используют аксиомы на клиенте. JSON.stringify и JSON.parse и все. - person Andreas Dolk; 23.05.2020