node.js - 尝试将 Socket.io 连接到 Express 应用程序时，服务器响应 404

Question

我正在使用 vue-cli 的 webpack 模板构建 VueJS 应用程序。我已将前端和后端拆分为不同的 Heroku 应用程序并进行部署。

背景:我的客户端应用程序具有与描述相同的设置here

tl；上面的 Medium 文章:我们现在有了一个新的 Vue-cli/webpack 应用程序，以及一个用于创建为构建的应用程序文件提供服务的 Express 服务器的 server.js 文件。

问题:我在尝试在上述 server.js 文件上使用 socket.io 时遇到了问题。

这是 server.js 的样子:

var http = require('http'),
        path = require('path'),
        express = require('express'),
        app = express(),
        server = http.createServer(app),
        socketIO = require('socket.io'),
        port = process.env.PORT || 8080,
        history = require('connect-history-api-fallback'),
        serveStatic = require('serve-static')


app.use(serveStatic(path.join(__dirname, '/dist')))

server.listen(port, () => {
    // logs when running node server.js
    console.log('listening on port', port)
})

const io = socketIO(server);

io.on('connection', (socket) => {
  console.log('Connected!!!');
});

这就是我在 .vue 组件内部调用 socket.io 的方式:

const io = require('socket.io-client')
const socket = io('http://localhost:8080')

一旦取消注释最后一行，我就会收到一条友好的无法加载资源:服务器响应状态为404(未找到)http://localhost:8080/socket.io/?EIO=3&transport=polling&t=M9yJX8nsocket.io/?EIO=3&transport=polling&t=M9yHe0F

其他信息:

不确定是否相关，但仍然说 - 我正在使用“connect-history-api-fallback”将所有不存在的路由指向通配符 404 .vue 组件，该组件显示友好的用户消息并允许他们返回现有路由。这可能是部分原因吗？我读到的关于我的问题的内容是，我可能无法让 socket.io 在我的应用程序运行的同一服务器上运行。

我最初在尝试使用 Vue-Socket.io 连接我的 Vue 应用程序时遇到了这个问题。

上线

Vue.use(VueSocketio, socketio('http://socketserver.com:1923'));

我使用的 URL http://localhost:8080

我已经花了好几天的时间来解决这个问题，但仍然不清楚这个问题的根源在哪里。我真的很想理解并且非常感谢任何形式的反馈。我读到有人有相同/类似的问题，并尝试在没有本地主机 + 端口 url 的情况下调用 io() 。

这是第一个问题，希望得到正确的提问。

Answer 1

好吧，伙计们，我不知道为什么，但是按照 Socket IO 网站“文档”部分中的代码进行操作会导致相同的错误(Express 3/4 部分)。然后，我继续复制 Chat 演示并成功，因此我现在将 Socket.IO 导入到我的 Index.html 文件

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

server.js 如下所示:

var path = require('path'),
    app = require('express')(),
    http = require('http').Server(app),
    io = require('socket.io')(http),
    port = process.env.PORT || 8080,
    history = require('connect-history-api-fallback'),
    serveStatic = require('serve-static')

app.use(serveStatic(path.join(__dirname, '/dist')))

http.listen(port, () => {
    console.log('listening on port', port)
})

io.on('connection', (socket) => {
  console.log('Connected!!!');
});

我现在要关闭它，看看如何实现我正在寻找的功能 - 我现在有一个很好的起点。祝所有为此苦苦挣扎的人好运。干杯!