socket.io - 如何让 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捆绑东西的工作方式有关吗？我环顾四周，但没有任何有用的线索。

如果我的帖子缺少详细信息或信息，请在评论中说明，我将对其进行编辑以提供所需的详细信息。谢谢！

标签： socket.iosvelterollup

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>