Question

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

背景我的客户端应用程序具有与here

所述相同的设置

tl;博士上面的中篇文章： 我们现在有一个新的Vue-cli / webpack应用程序，以及一个server.js文件，用于创建一个服务于构建的应用程序文件的Express服务器。

问题： 我一直在试图在上述server.js文件中使用socket.io时遇到问题。

以下是.vue的样子：

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

这就是我在Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:8080/socket.io/?EIO=3&transport=polling&t=M9yJX8nsocket.io/?EIO=3&transport=polling&t=M9yHe0F组件中调用socket.io的方式：

.vue

一旦取消注释最后一行，我就会收到友好的Vue.use(VueSocketio, socketio('http://socketserver.com:1923'));

其他信息：

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

我在尝试首次使用Vue-Socket.io

连接我的Vue应用时遇到了问题

在线

io()

我使用的网址{{1}}

我已经花了几天时间解决这个问题，但仍然没有明确这个问题的根源。我真的很想了解并且非常感谢任何形式的反馈。我读到了有相同/类似问题的人，并尝试在没有我的localhost +端口URL的情况下调用{{1}}。

这里的第一个问题，希望它得到适当的询问。

Answer 1

好的，大家好，我不知道为什么，但是按照Socket IO网站“Docs”部分中的代码导致了同样的错误（Express 3/4部分）。然后我继续复制聊天演示和成功，所以我现在在我的Index.html文件中导入Socket.IO

<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!!!');
});

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

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

1 个答案: