如何将 socket.io 客户端保留在前端代码中

Question

我刚刚学习webdev，想尝试使用Express和socket.io制作多人游戏

我可以创建一个带有 socket.io 的服务器来监听。这部分工作正常。

但是，当我尝试连接客户端时，这仅在我让包含以下内容的 HTML 文件由服务器提供时才有效，如下所示：

服务器代码：

const express = require('express')
const app = express()
const http = require('http')
const server = http.createServer(app)
const { Server } = require('socket.io')
const io = new Server(server)

const port = 3000

io.on('connection', (sock) => {
    console.log('client connected')
})

// This seems to be necessary, but I don't want it to be!!!
app.get('/', (req, res) => {
    res.sendFile(__dirname + '/index.html')
})

server.listen(port, () => {
    console.log(`Server listening on port ${port}`)
})

这个 index.html 在底部有以下内容：

<script src="/socket.io/socket.io.js"></script>
<script>const socket = io()</script>

但是我想让我的所有前端代码与服务器分开。我为前端和后端创建了一个单独的存储库。我希望前端包含所有 UI 逻辑并仅使用数据调用 (AJAX) 从服务器获取 Json 数据。所以我只想把这个 index.html 文件放在我的前端代码中。

但是，如果我这样做，连接将无法正常工作。

我可以正常启动服务器。 我从 WebStorm 打开 index.html，它还为此创建了一个服务器，我将其配置为也侦听端口 3000

但它找不到 /socket.io/socket.io.js 并且我在控制台中收到以下错误。 如果 WebStorm 在不同的端口上运行，它也不起作用。

The resource from “http://localhost:3000/socket.io/socket.io.js” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff).

我如何才能将此 html 仅保留在我的客户端 repo 中并且仍然可以使用 socket.io，或者这不可能？

Answer 1

您不能让多个服务器监听同一个端口。在不同的端口上运行服务器，或者：

• 有一个反向代理将请求转发到您的 Socket.io 服务器（需要special handling）和您的前端服务器或
• 在脚本 src 和 configure CORS 中放入绝对 URL。