如何让 Socket.io 与 Svelte 一起工作？

Question

我正在尝试让 socket.io 与我最近开始试验的 Svelte 一起工作，它是按照https://svelte.dev/ 上给出的说明安装的库存形式。

我不知道为什么bundle.js:4497 GET http://localhost:5000/socket.io/?EIO=3&transport=polling&t=N72840H 404 (Not Found)无论我尝试了我在早期“基本”Node.js 服务器上所做的工作的什么组合，我都会收到错误，其相关代码如下所示：

const express = require('express');
const app = express();
const server = http.createServer(app)
const io = require('socket.io')(server,{
    transports: ['websockets', 'polling'],
    upgrade:false,
    cookie:false
});
const sockets = require('./models/socket')(io)

我已经在各个地方尝试了上述建议的多种组合，其中包括以下替代方案：

require('http').Server(app)

......为什么.Server()而不是.createServer()？从来没有人解释过。我试着app和express和server or app.listen和没有，一些教程/职位有他们，别人不一样-不知道是否有任何这是前提条件或没有。许多例子有localhost，许多没有。有时在冒号后有一个数字，有时没有。

在前端（在.svelte文件中）尝试使用import io from 'socket.io-client'，在 index.html 文件中使用 cdn，在头部使用<script src="../socket.io/socket.io.js"></script>（无点、1 个点、无斜线等）。最后一个不同，因为在尝试连接之前没有找到它io()，这是持久性错误产生的地方。

在io()有时被建议作为io.connect()，或io.connect('localhost')，或io.connect('localhost:3000 or 8080 or some other)。天知道为什么。

这与Rollup.js捆绑东西的工作方式有关吗？我环顾四周，但没有任何有用的线索。

如果我的帖子缺少细节或信息，请在评论中说出来，我会编辑它以提供所需的尽可能多的细节。谢谢！

Answer 1

1. 创建全球商店 export const socket = writable();
2. 添加实用函数

import { socket } from "../../store";
import {API_URL} from "../../config"

export const getSocket = async () => {
  const script = document.createElement("script");
  script.src = "/socket-3-0-0.js";
  document.head.appendChild(script);
  
  script.onload = () => {
    const client = io(API_URL)
    socket.set(client)
  }
}

3. 在 _layout 中调用 getSocket

<script>
    onMount(async () => {
        getSocket();
    }
</script>

4. 导入存储和使用

<script>
    import { socket } from "../store";
    $socket?.on("blah", function() {});
</script>

更新：

1. 你可以在 _layout.svelte 中这样做：

   <script lang="ts">
     function getIoClient(tokens) {
       if (typeof io !== 'undefined') {
         return io(API_URL, {
           transports: ["websocket", "polling", "flashsocket"],
           withCredentials: true,
           query: {
             ...tokens,
           },
         })
       }
     }
   
     async function initSocket() {
       if ($loggedIn) {
         const auth = await getAuth()
   
         socket.set(
           getIoClient({
             id_token: auth?.id_token,
             refresh_token: auth?.refresh_token,
             access_token: auth?.access_token,
             expiry_date: auth?.expiry_date,
           })
         )
       }
     }
   
     async function socketLoaded() {
       await initSocket()
     }
   </script>
   
   <svelte:head>
     {#if $loggedIn}
       <script src="/socket-3-1-3.js" on:load={socketLoaded}></script>
     {/if}
   </svelte:head>