Use version 2.5.0 with ReactJS

[chengtie]

I have to use an old version of socket.io 2.5.0 with Reactjs.

I don't know how to establish a connection. Here is my component:

import React, { Component } from "react";
import { io } from 'socket.io';

class Page extends Component<{}, {}> {
    socketIO: any = null;

    componentDidMount() {
        this.socketIO = io.connect('https://localhost:3000', { path: '/openai' });

        // Set up event listeners
        this.socketIO.on('connect', () => {
            console.log('Connected to server');
        });
    
        this.socketIO.on('id', (socketId) => {
            console.log('Received socket ID:', socketId);
            // You can handle the received socket ID here
        });
    
        this.socketIO.on('disconnect', () => {
            console.log('Disconnected from server');
        });
    }

    componentWillUnmount() {
        if (this.socketIO) {
            this.socketIO.disconnect();
        }
    }


    render() {
        return (
            <div>abc</div>
        );
    }
}

export default Page;

It always show Uncaught TypeError: Cannot read properties of undefined (reading 'connect') at the place of this.socketIO = io.connect('https://localhost:3000', { path: '/openai' });.

Does anyone know how to do that?

---

My backend is using socket.io 2.5.0, it has been serving an angularJS application successfully, so i don't want to upgrade the version of its socket.io. If I use a recent version of socket.io in the frontend of this reactjs application, this.socketIO = io('http://localhost:3000', { path: '/pathSocketIO' }); works. However, this.socketIO.on('id' cannot receive the emitting from the backend. So I think it may be due to a mismatch of versions, that's why I'm trying socket 2.5.0 for the frontend. Please correct me if i'm wrong.

[darrachequesne]

For future readers:

In version 2.5.0, you need to use import * as io from 'socket.io-client';.