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