我已经使用Railway部署了一个socket.io消息应用程序,但在根URL连接时出现404错误

我最近使用Node.js、React、Express和Socket.io构建了我的第一个消息应用程序。它在本地主机的开发环境中运行良好,但在生产中,我在尝试连接到根URL时遇到了404错误。

该应用程序部署在Railway上,构建或部署日志中没有出现任何问题,但当我尝试导航到实时URL时,会出现404错误。服务器记录它成功侦听了Railway上部署日志中的端口。

Chat GPT在我的代码中找不到任何问题,除了基本的404之外,我在浏览器控制台中也没有收到任何有用的错误消息。我试着研究Socket.io是否与Railway.app兼容,但一无所获。

这是应用程序和我的代码。如果您需要任何其他代码片段,请告诉我:

Repo

Deployed URL

客户端/主页.tsx

import React from 'react'
import { useState } from 'react'
import { useNavigate } from 'react-router-dom'

import { io } from 'socket.io-client'

export const socket = io('https://messaging-app-websockets.up.railway.app/', {
  transports: ['websocket'],
})

socket.on('connect', () => {
  console.log(socket.id)
})

socket.on('disconnect', () => {
  console.log('Disconnected', socket.id)
})

function Home() {
  const navigate = useNavigate()
  const [username, setUsername] = useState('')

  function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault()

    localStorage.setItem('username', username)
    socket.emit('newUser', { username, id: socket.id })
    navigate('/chat')
  }

  return (
    <form onSubmit={handleSubmit}>
      <h2>Sign in to start messaging</h2>
      <label htmlFor="username">Username</label>
      <input
        type="text"
        minLength={5}
        name="username"
        id="username"
        value={username}
        onChange={(e) => setUsername(e.target.value)}
      />
      <button>Sign in</button>
    </form>
  )
}

export default Home

服务器/索引

import * as Path from 'node:path'
import * as URL from 'node:url'
import express from 'express'
import cors from 'cors'
import { createServer } from 'http'
import { Server } from 'socket.io'
import dotenv from 'dotenv'
import { User } from '../types/User'

const __filename = URL.fileURLToPath(import.meta.url)
const __dirname = Path.dirname(__filename)

const server = express()
const app = express()
const httpServer = createServer(app)
console.log(httpServer)
const io = new Server(httpServer, {
  cors: { origin: 'https://messaging-app-websockets.up.railway.app/' },
})

dotenv.config()

const port = process.env.PORT || 3000

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

server.use(express.json())
server.use(express.static(Path.join(__dirname, 'public')))
server.use(cors())

if (process.env.NODE_ENV === 'production') {
  server.use(express.static(Path.resolve('public')))
  server.use('/assets', express.static(Path.resolve('./dist/assets')))
  server.get('*', (req, res) => {
    res.sendFile(Path.resolve('./dist/index.html'))
  })
}

let users = [] as User[]

io.on('connection', (socket) => {
  console.log(`client ${socket.id} just connected`)

  socket.on('message', (data) => {
    io.emit('messageResponse', data)
  })

  socket.on('newUser', (data) => {
    users.push(data)
    io.emit('newUserResponse', users)
  })

  socket.on('disconnect', () => {
    console.log(`client ${socket.id} disconnected`)
    users = users.filter((user) => user.id !== socket.id)
    io.emit('newUserResponse', users)
    socket.disconnect()
  })
})

export default server

提前感谢!