Sapper中的Websockets

Question

我在Svelte中有一个可读的存储，如下所示：

const state = {};
export const channels = readable(state, set => {
        let st = state;
        let socket = new WebSocket("ws://127.0.0.1:5999");
    
        socket.onmessage = function (event) {
          var datastr = event.data.split(':');
          st[datastr[0]].value = datastr[1];
          st[datastr[0]].timestamp = Date.now();
                    set(st)
        };
          return () => {
                    socket.close()
                }
    
});

当我将它导入我的Svelte应用程序时，它就起作用了。但是如果我把这个App.svelte作为我的index.svelte运行在Sapper上，它一开始就不能工作了。它显示未定义错误500 websocket。一旦我在浏览器中重新加载页面开始工作...我尝试解析一个创建商店的函数：

export const getChannel = () => {
 // here my store
return {...store}
}

然后在onMount()中创建存储，如下所示：

onMount( ()=> {
    const channel = getChannel();
});

但似乎没有起到作用..。我错过了什么？注意:如果只需用一个简单的可写对象替换存储，并创建websocket onMount()，它就可以正常工作。我只是想把商店里所有的沟通都作为一个可读的……

Answer 1

在Sapper中，组件中的代码(或导入到组件中的代码)在服务器端渲染期间在Node中执行，除非它被放入onMount (它不会在服务器上运行，因为没有“挂载”发生)或if (process.browser) {...}块，或者其他类似的东西。

这包括对$channels的引用，这会导致在初始化期间调用channels.subscribe(...)。

由于Node中没有全局WebSocket，因此创建订阅将失败。最简单的解决方法可能是简单的功能检查：

const state = {};
export const channels = readable(state, (set) => {
  if (typeof WebSocket === 'undefined') return;

  let st = state;
  let socket = new WebSocket("ws://127.0.0.1:5999");

  socket.onmessage = function (event) {
    var datastr = event.data.split(":");
    st[datastr[0]].value = datastr[1];
    st[datastr[0]].timestamp = Date.now();
    set(st);
  };
  return () => {
    socket.close();
  };
});