Node.js 套接字io服务器已连接=true，但客户端已连接=false

我是websocket的新手，目前我想使用socket.io创建一个聊天应用程序 我遵循socket.io网站上的文档，成功地将服务器连接到客户端 但是，当我想从服务器发送到客户机或反之亦然时，我发现我的客户机没有连接到服务器，因为属性disconnected=true

我的猜测是，由于这个原因，我不能使用emit事件 有人能解释一下发生了什么事吗

注意：两者都使用socket.io的2.2.0版本

这是正在发生的事情的截图

以及服务器的代码

const app = require('express')()
const http = require('http').createServer(app)
const io = require('socket.io')(http)

io.on('connection', socket => {
  console.log(socket.connected)
  socket.on('message', ({ name, message }) => {
    console.log(name)
    console.log(message)
    io.emit('message', { name, message })
  })
})

http.listen(4000, function () {
  console.log('listening on port 4000')
})    

这是客户的屏幕截图

import React, { useEffect, useRef, useState } from "react"
import io from "socket.io-client"
import "./App.css"

function App() {
  const [state, setState] = useState({ message: "", name: "" })
  const [chat, setChat] = useState([])

  const socketRef = useRef()

  useEffect(
    () => {
      socketRef.current = io("http://127.0.0.1:4000")

      socketRef.current.connect()
      console.log(socketRef.current)

      socketRef.current.on('connect', function () {
        console.log("masuk")
      });
      socketRef.current.on("message", ({ name, message }) => {

        setChat([...chat, { name, message }])
      })
      return () => socketRef.current.disconnect()
    },
    [chat]
  )

  const onTextChange = (e) => {
    setState({ ...state, [e.target.name]: e.target.value })
  }

  const onMessageSubmit = (e) => {
    const { name, message } = state
    console.log(name)
    console.log(message)
    socketRef.current.emit("message", { name, message })
    e.preventDefault()
    setState({ message: "", name })
  }

  const renderChat = () => {
    return chat.map(({ name, message }, index) => (
      <div key={index}>
        <h3>
          {name}: <span>{message}</span>
        </h3>
      </div>
    ))
  }

  return (
    <div className="card">
      <form onSubmit={onMessageSubmit}>
        <h1>Messenger</h1>
        <div className="name-field">
          <TextField name="name" onChange={(e) => onTextChange(e)} value={state.name} label="Name" />
        </div>
        <div>
          <TextField
            name="message"
            onChange={(e) => onTextChange(e)}
            value={state.message}
            id="outlined-multiline-static"
            variant="outlined"
            label="Message"
          />
        </div>
        <button>Send Message</button>
      </form>
      <div className="render-chat">
        <h1>Chat Log</h1>
        {renderChat()}
      </div>
    </div>
  )
}

export default App

这是客户机的代码

import React, { useEffect, useRef, useState } from "react"
import io from "socket.io-client"
import "./App.css"

function App() {
  const [state, setState] = useState({ message: "", name: "" })
  const [chat, setChat] = useState([])

  const socketRef = useRef()

  useEffect(
    () => {
      socketRef.current = io("http://127.0.0.1:4000")

      socketRef.current.connect()
      console.log(socketRef.current)

      socketRef.current.on('connect', function () {
        console.log("masuk")
      });
      socketRef.current.on("message", ({ name, message }) => {

        setChat([...chat, { name, message }])
      })
      return () => socketRef.current.disconnect()
    },
    [chat]
  )

  const onTextChange = (e) => {
    setState({ ...state, [e.target.name]: e.target.value })
  }

  const onMessageSubmit = (e) => {
    const { name, message } = state
    console.log(name)
    console.log(message)
    socketRef.current.emit("message", { name, message })
    e.preventDefault()
    setState({ message: "", name })
  }

  const renderChat = () => {
    return chat.map(({ name, message }, index) => (
      <div key={index}>
        <h3>
          {name}: <span>{message}</span>
        </h3>
      </div>
    ))
  }

  return (
    <div className="card">
      <form onSubmit={onMessageSubmit}>
        <h1>Messenger</h1>
        <div className="name-field">
          <TextField name="name" onChange={(e) => onTextChange(e)} value={state.name} label="Name" />
        </div>
        <div>
          <TextField
            name="message"
            onChange={(e) => onTextChange(e)}
            value={state.message}
            id="outlined-multiline-static"
            variant="outlined"
            label="Message"
          />
        </div>
        <button>Send Message</button>
      </form>
      <div className="render-chat">
        <h1>Chat Log</h1>
        {renderChat()}
      </div>
    </div>
  )
}

export default App

import React，{useffect，useRef，useState}来自“React”
从“socket.io客户端”导入io
导入“/App.css”
函数App（）{
const[state，setState]=useState（{message:，name:}）
const[chat，setChat]=useState（[]）
const socketRef=useRef（）
使用效果(
() => {
socketRef.current=io（“http://127.0.0.1:4000")
socketRef.current.connect（）
console.log（socketRef.current）
socketRef.current.on（'connect'，函数（）{
console.log（“masuk”）
});
socketRef.current.on（“message”，（{name，message}）=>{
setChat（[…chat，{name，message}]）
})
return（）=>socketRef.current.disconnect（）
},
[聊天]
)
const onTextChange=（e）=>{
setState（{…state[e.target.name]：e.target.value}）
}
const onMessageSubmit=（e）=>{
常量{name，message}=state
console.log（名称）
console.log（消息）
emit（“message”，{name，message}）
e、 预防默认值（）
setState（{message:，name}）
}
常量renderChat=（）=>{
return chat.map（（{name，message}，index）=>(
{name}:{message}
))
}
返回(
信息员
onTextChange（e）}value={state.name}label=“name”/>
onTextChange（e）}
值={state.message}
id=“概述的多行静态”
variant=“概述”
label=“消息”
/>
发送消息
聊天日志
{renderChat（）}
)
}
导出默认应用程序

我已经得到了它，这是因为服务器和客户端之间的版本不兼容

import React, { useEffect, useRef, useState } from "react"
import io from "socket.io-client"
import "./App.css"

function App() {
  const [state, setState] = useState({ message: "", name: "" })
  const [chat, setChat] = useState([])

  const socketRef = useRef()

  useEffect(
    () => {
      socketRef.current = io("http://127.0.0.1:4000")

      socketRef.current.connect()
      console.log(socketRef.current)

      socketRef.current.on('connect', function () {
        console.log("masuk")
      });
      socketRef.current.on("message", ({ name, message }) => {

        setChat([...chat, { name, message }])
      })
      return () => socketRef.current.disconnect()
    },
    [chat]
  )

  const onTextChange = (e) => {
    setState({ ...state, [e.target.name]: e.target.value })
  }

  const onMessageSubmit = (e) => {
    const { name, message } = state
    console.log(name)
    console.log(message)
    socketRef.current.emit("message", { name, message })
    e.preventDefault()
    setState({ message: "", name })
  }

  const renderChat = () => {
    return chat.map(({ name, message }, index) => (
      <div key={index}>
        <h3>
          {name}: <span>{message}</span>
        </h3>
      </div>
    ))
  }

  return (
    <div className="card">
      <form onSubmit={onMessageSubmit}>
        <h1>Messenger</h1>
        <div className="name-field">
          <TextField name="name" onChange={(e) => onTextChange(e)} value={state.name} label="Name" />
        </div>
        <div>
          <TextField
            name="message"
            onChange={(e) => onTextChange(e)}
            value={state.message}
            id="outlined-multiline-static"
            variant="outlined"
            label="Message"
          />
        </div>
        <button>Send Message</button>
      </form>
      <div className="render-chat">
        <h1>Chat Log</h1>
        {renderChat()}
      </div>
    </div>
  )
}

export default App