如何在我的SPA的服务器部分更新Svelte存储？

Question

我想让我的Svelte SPA与DB中的一些数据进行交互，为此，我使用了Sapper，所以我可以在server.js中打开与DB的连接，并通过其pubsub机制来监听。为此，我使用了Sapper，所以我可以在server.js中打开与DB的连接，并通过它的pubsub机制监听它。在这里，channelArray只是一个从'.store.js'中导入的writable([])，有了这段代码，我就可以解析到App的数据到商店，但只有在初始化的时候才可以。

// 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>

Answer 1

在我看来，你是在直接操作存储。我认为这不是最好的方法。根据 文件 a writable 拥有 set 和 update 方法。你用 set 当你想改变变量的值而又不关心之前的值时。update 如果你关心之前的值，那么就会使用这个变量，例如增量。

似乎 update 会符合你的用例，因为你似乎很在意以前的状态。所以我建议这样做。

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

Answer 2

虽然这个在后端

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

在技术上是可行的，但并不是您所期望的那样。导入的 channelArray 后端和前端是不一样的，它们是不同的实例。writable 而它们之间没有任何连接或绑定。

你需要在前台和后台之间添加某种通信。AJAX请求或者socket io，不管是什么都可以。一些REST API可能是最简单的解决方案。

我通过一个电子应用来解决这个问题，但是在那里我可以使用内置的IPC，这样前端和后端可以交换数据。