Сервер отвечает 404 при попытке подключить Socket.io к приложению Express
Я создаю приложение VueJS, используя шаблон веб-пакета vue-cli. Я разделил переднюю и заднюю части на разные приложения Heroku и развернул их.
Задний план: Мое клиентское приложение настроено так же, как описано здесь
tl; dr в указанной выше статье на Medium: Теперь у нас есть новое приложение Vue-cli / webpack и файл server.js, используемый для создания сервера Express, который обслуживает файлы созданного приложения.
Проблема: У меня возникли проблемы при попытке использовать socket.io в указанном файле server.js.
Вот как выглядит 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.info('listening on port', port)
})
const io = socketIO(server);
io.on('connection', (socket) => {
console.info('Connected!!!');
});
И вот как я вызываю 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
Дополнительная информация:
Не уверен, актуально ли это, но все же говорю - я использую "connect-history-api-fallback", чтобы указать все несуществующие маршруты на компонент 404 .vue с подстановочными знаками, который отображает удобное сообщение пользователя и позволяет им вернуться к существующим маршрутам. .
Может ли это быть частью причины? Что я прочитал о своей проблеме, так это то, что у меня, вероятно, проблемы с запуском socket.io на том же сервере, на котором работает мое приложение.
Первоначально у меня возникла проблема при попытке сначала подключить мое приложение Vue с Vue-Socket.io
на линии
Vue.use(VueSocketio, socketio('http://socketserver.com:1923'));
Где в качестве URL я использовал http://localhost:8080
Я потратил несколько дней на решение проблемы, но до сих пор не могу понять, в чем корень проблемы. Я действительно пытаюсь понять и буду очень признателен за любую форму обратной связи. Я читал о людях, имеющих такую же / похожую проблему, и пытался вызвать в io() без моего адреса localhost + port.
Первый вопрос здесь, надеюсь, он правильно задан.
Ответы 1
Хорошо, ребята, я не знаю почему, но следование коду, помещенному в раздел «Документы» на сайте Socket IO, привело к той же ошибке (раздел Express 3/4). Затем я скопировал демонстрацию чата и имел успех, поэтому сейчас я импортирую 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.info('listening on port', port)
})
io.on('connection', (socket) => {
console.info('Connected!!!');
});
Я собираюсь закрыть это сейчас и посмотреть, как реализовать функциональность, которую я ищу - теперь у меня есть хорошая отправная точка. Удачи всем, кто борется с этим. Ваше здоровье!