套接字 io 服务器已连接 = true，但客户端已连接 = false答案

【问题标题】：socket io server connected = true, but client connected = false套接字 io 服务器已连接 = true，但客户端已连接 = false
【发布时间】：2021-05-16 08:20:53
【问题描述】：

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

我的猜测是因为这个我不能使用发射事件有人可以解释发生了什么吗？

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

这是发生了什么的屏幕截图

server

和服务器的代码

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

这是客户端的截图

client

这是客户端的代码

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

【问题讨论】：

标签： node.js reactjs express socket.io

【解决方案1】：

我已经知道了，是因为服务器和客户端的版本不兼容

【讨论】：