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

Question

我正在使用 react js、node 和 socket.io 构建一个实时聊天应用程序。但是我收到了 WebSocket 连接失败的错误。

我正在尝试控制台记录我输入的房间的名称并提交它应该在控制台上。但它显示此错误：WebSocket connection to 'ws://localhost:5000/socket.io/?EIO=3&transport=websocket' failed:

我的服务器已启动并正在运行。

这是我的客户端。

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

这是我的服务器端代码

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

您的后端有一些东西在使用 express 时尝试使用ws 包并阅读这篇文章How to Set Up a Websocket Server with Node.js and Express