Socket IO - server not connecting with my react client

Viewed 3578

I've been breaking my head trying to connect my client to server using socket.io but to no avail. My server is in node and client is written in react. It does not showing in my server when a user connects or disconnects. Here is my code -

Server:

const express = require('express')
const socketio = require('socket.io')
const http = require('http')
const cors = require('cors')

const PORT = process.env.PORT || 5000

const router = require('./router')

const app = express()
const server = http.createServer(app)
const io = socketio(server)

app.use(cors())
app.use(router)

io.on('connection', socket => {
    console.log('User has connected.')
    socket.on('disconnect', () => {
        console.log("User has disconnected.")
    })
})

app.listen(PORT, () => console.log(`Server running on port ${PORT}`))

Client(React):

import React, { useState, useEffect } from "react"
import queryString from 'query-string'
import io from "socket.io-client"

import './chat.styles.css'

let socket

const Chat = ({location}) => {
    const [name, setName] = useState('')
    const [room, setRoom] = useState('')
    const ENDPOINT = 'http://localhost:5000/'

    useEffect(() => {
        const { name, room } = queryString.parse(location.search);

        socket = io(ENDPOINT)

        setRoom(room)
        setName(name)

      }, [ENDPOINT, location.search])

    return (
        <div className='chat'>
            <h1>Test</h1>
        </div>
    )
}

export default Chat
1 Answers

I found the error. In the server code i accidentally put

app.listen(PORT, () => console.log(`Server running on port ${PORT}`))

instead of

server.listen(PORT, () => console.log(`Server running on port ${PORT}`))
Related