在 socket.io 中使用套接字时遇到错误答案

【问题标题】：Encountering error while using sockets in socket.io在 socket.io 中使用套接字时遇到错误
【发布时间】：2021-10-06 13:44:51
【问题描述】：

我正在通过创建一个聊天应用程序使用 socket.io 来学习套接字，但我遇到了一些问题。 Node.js 服务器没有记录应该在套接字连接和客户端加入房间时记录的数据。

这是代码：

服务器-

import express from 'express'
import cors from 'cors'
import {Server} from 'socket.io'
import dotenv from 'dotenv'
import {createServer} from 'http'

const app = express()
dotenv.config()
const port = process.env.PORT
app.use(cors())
app.use(express.json())

app.listen(port, () => {
  console.log(`Server Running on Port ${port}`)
})

const server = createServer(app)

const io = new Server(server)

io.on("connection", (socket) => {
    console.log(socket.id)

    socket.on('join_room', (data) => {
        socket.join(data)
        console.log("User joined room: " + data)
    })

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

客户-

import './App.css'
import { io } from 'socket.io-client'
import { Fragment, useEffect, useState } from 'react'

var socket
const CONNECTION_PORT = "http://localhost:8000/"

function App() {
  const [logged, setLogged] = useState(false)
  const [room, setRoom] = useState('')
  const [username, setUsername] = useState('')

  useEffect(() => {
    socket = io(CONNECTION_PORT)
  }, [CONNECTION_PORT])

  const connectToRoom = (e) => {
    e.preventDefault()
    setLogged(true)
    socket.emit('join_room', room)
  }

  return(
    <Fragment>
      <div className="App">
        {!logged ?
        (
          <form className="login" onSubmit={connectToRoom}>
            <div className="inputs">
              <input type="text" placeholder="Name" onChange={(e) => setUsername(e.target.value)} />
              <input type="text" placeholder="Room" onChange={(e) => setRoom(e.target.value)} />
            </div>
            <div className="buttons">
              <button className>Enter Chat</button>
            </div>
          </form>
        )
        :
        (
          <h1>You are logged in</h1>
        )}
      </div>
    </Fragment>
  )
}

export default App

我不确定问题出在服务器端还是客户端。我尝试使用 commonjs 模块运行服务器，但也没有用。

任何帮助将不胜感激。

编辑 -

在网络和控制台选项卡中发现此错误：GET http://localhost:8000/socket.io/?EIO=4&transport=polling&t=Nhy6D3-404（未找到）

还没有解决问题

编辑 2 -

通过在客户端 package.json 中添加代理来修复它

【问题讨论】：

您是否在浏览器的开发工具的“网络”选项卡中看到任何 WebSocket 活动？
我在那里发现了一个错误 - GET localhost:8000/socket.io/… 404（未找到） - 我在服务器中做错了什么吗？

标签： javascript node.js reactjs sockets socket.io

【解决方案1】：

您可以尝试在客户端上删除 CONNECTION_PORT 吗？

socket = io();

这就是连接到服务器套接字所需的全部内容。见this example in the socket.io docs。

【讨论】：