WebSocket 连接到 'ws://localhost:5000/socket.io/?EIO=3&transport=websocket' 失败：

Question

I am building a real-time chat application using react js, node, and socket.io. But I am getting the error that the WebSocket connection has failed.

I'm trying to console log the name of the room I enter and submit it should be on the console. But it's showing this error: WebSocket connection to 'ws://localhost:5000/socket.io/?EIO=3&transport=websocket' failed:

My server is up and running.

Here is my client-side .

import {UserContext} from '../../UserContext';
import {Link} from 'react-router-dom';
import RoomList from './RoomList';
import io from 'socket.io-client';

let socket;

const Home = () => {
    const ENDPT = 'localhost:5000';
    useEffect(() => {
        socket = io(ENDPT ,{
            cors: {
            origin: "http://localhost:5000",
            credentials: true
          },transports : ['websocket'] });
        return () => {
            socket.emit('disconnect');
            socket.off();
        }
    }, [ENDPT]);
    const { user,setUser } = useContext(UserContext);
    const [room , setRoom] = useState('');
    const handleSubmit = (e) => {
        e.preventDefault();
        socket.emit('creat-room' , room);
        console.log(room);
        setRoom('');
    }
    const rooms = [
        {
            name:"room1",
            _id:"123"
        },
        {
            name:"room2",
            _id:"456"
        }
    ]
    const setAsJohn = () => {
        const john = {
            name : "john",
            email : "john@emai.com",
            password: "123",
            id: "123",
        }
        setUser(john);
    }
    const setAsTom = () => {
        const tom = {
            name : "tom",
            email : "tom@emai.com",
            password: "456",
            id: "456",
        }
        setUser(tom);
    }
    return (
        <div>

            <div className="row">
                <div className="col s12 m6">
                <div className="card blue-grey darken-1">
                    <div className="card-content white-text">
                    <span className="card-title">Welcome {user ? user.name : ""}</span>
                    
                    <form onSubmit={handleSubmit}>
                        
                        <div className="row">
                            <div className="input-field col s12">
                            <input id="room" type="text" className="validate" placeholder='Enter room name' value={room} onChange={e => setRoom(e.target.value)}/>
                            <label htmlFor="room">Room</label>
                            </div>
                        </div>
                        <div className='btn'>Creat Room</div>
                        </form>


                    </div>
                    <div className="card-action">
                        <a href='#' onClick={setAsJohn}>John</a>
                        <a href='#' onClick={setAsTom}>Tom</a>
                    </div>
                </div>
                </div>

                <div className='col s6 m5 offset-1'>
                    <RoomList rooms={rooms}/>
                </div>
            </div>

            

            <Link to={"/chat"}>
                <button>Go to Chat</button>
            </Link>
        </div>
    )
}

export default Home

Here is my server-side code

const express = require('express');
const app = express();
const http = require('http');
const server = http.createServer(app);
const socketio = require('socket.io');
const io = socketio(http);
const PORT = process.env.PORT || 5000;

app.get("/" , (req,res) => {
    res.send("Helloji")
})

io.on('connection', (socket) => {
    console.log('a user connected');
    socket.on('creat-room' , name =>{
        console.log('Then room name received is ' , name);  
    })
});


server.listen(PORT, () => {
    console.log(`listening on http://localhost:${PORT}`);
});```

Answer 1

There is something with your backend try to use ws package while using express and also Read this article How to Set Up a Websocket Server with Node.js and Express