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捆绑东西有效吗？我环顾四周，但没有任何有用的线索。

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

Answer 1

创建全局商店export const socket = writable();

添加效用函数

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)
  }
}

在 _layout 中调用 getSocket

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

进口存储和使用

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