comty/src/pages/chats/index.js

import React from 'react'
import * as ycore from 'ycore'
import * as antd from 'antd'
import * as Icons from '@ant-design/icons'
import io from 'socket.io-client'
import config from 'config'
import ReactEmoji from 'react-emoji';
import { USER_CONNECTED, LOGOUT } from './Events'
import ChatContainer from './chats/ChatContainer'


const userData = ycore.userData()

const prefix = '[Messaging Socket] '
const socketUrl = io(`${config.sync_server}/messaging_socket`);

export default class Chats extends React.Component{
  constructor(props) {
	  super(props);
	
	  this.state = {
	  	socket:null,
      user:null,
      conn: false
	  };
	}

	componentDidMount() {
    this.initSocket()
	}

	/*
	*	Connect to and initializes the socket.
	*/
	initSocket = async ()=>{
		const socket = socketUrl

    if(!this.state.conn){
      await socket.on('connect', ()=>{
        console.log(prefix, "Connected");
        this.setState({ conn: true })
        const payload = { id: userData.UserID, name: userData.username, avatar: userData.avatar }
        this.setUser(payload)
      })
    }

    this.setState({socket})

    socket.on('disconnect', () => {
			this.setState({ conn: false })
    })

    socket.on('reconnecting', () =>{
      console.log(prefix, 'Trying to reconnect')
    })
	}

	/*
	* 	Sets the user property in state 
	*	@param user {id:number, name:string}
	*/	
	setUser = (user)=>{
		const { socket } = this.state
		socket.emit(USER_CONNECTED, user);
		this.setState({user})
	}

	render() {
		const { socket, user } = this.state
		return (
			<div className="container">
				{
					!user ?	
					<h2>initializes....</h2>
					:
          <ChatContainer socket={socket} user={user} />
				}
			</div>
		);
	}
  
}