Sapper 中的 Websocket答案

【问题标题】：Websockets in SapperSapper 中的 Websocket
【发布时间】：2020-11-27 11:27:46
【问题描述】：

我在 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 作为我在 Sapper 上运行的 index.svelte，它一开始就不起作用。它说错误 500 websocket 未定义。一旦我在浏览器中重新加载页面开始工作...... 我试图解析一个创建商店的函数：

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

然后像这样在 onMount() 中创建商店：

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

但似乎没有奏效......我错过了什么？注意：如果只是用简单的可写替换存储，并创建 websocket onMount()，它可以正常工作。我只是想把商店内的所有通信都作为可读的......

【问题讨论】：

标签： javascript websocket svelte sapper

【解决方案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();
  };
});

【讨论】：