Sending data from the client to the server and displaying to the terminal using `sockets`

Question

On the client side, it calls socket.current.emit in useEffect. I am trying to send the name and age to the server and display the data in the server side io.on terminal. I have no error, nothing is displayed in the terminal.

BACKEND

server.js

const express = require('express');
require('dotenv').config();

const app = express();
const port = process.env.PORT || 8000;

const server = app.listen(port, () => {
    console.log(`connect on the port ${port} - ${process.env.NODE_ENV}`);
});

const io = require('socket.io').listen(server);


io.on('connection', socket => {
    socket.on('hello', data => {
      console.log({name: data.name, age: data.age});
    });
});

FRONTEND

client

import React, { useState, useRef, useEffect } from 'react';
import io from 'socket.io-client';


const ChatUser = () => {

    const [values, setValues] = useState({
        chatters: [],
        idReceiver: '',
        idSender: ''
    });

    const [activeUser, setActiveUser] = useState('');
    const [message, setMessage] = useState('');
    const [chats, setChats] = useState([]);

    const socket = useRef();
    

    useEffect(() => {

        if(!socket.current) {
            socket.current = io(process.env.REACT_APP_API);
        }

        if(socket.current) {
            socket.current.emit('hello', {name: 'john', age: '23'});
        }
    }, []);


    return (
        <>  

        </>
    );
};

//env
REACT_APP_API=http://localhost:8000/api

Updated backend

My code in server.js Maybe I should put io.on in different place?

const express = require('express');
const morgan = require('morgan');
const bodyParser = require('body-parser');
const cors = require('cors');
const mongoose = require('mongoose');
require('dotenv').config();
const db = require('./connection');
const app = express();


// Connect to our Database and handle an bad connections
mongoose
    .connect(process.env.DATABASE, { 
        autoIndex: false
    })
    .then(() => console.log("DB server connect"))
    .catch(() => console.log("DB server disconnect"))


const authRoutes = require('./routes/auth');
const userRoutes = require('./routes/user');
const messageRoutes = require('./routes/message');
const countriesRoutes = require('./routes/countries');
const languagesRoutes = require('./routes/languages');
const tutorRoutes = require('./routes/tutor');

app.use(morgan('dev'));
app.use(bodyParser.json({limit: '50mb'}));

app.use((req,res,next)=>{
    res.header('Content-Type: application/json');
    res.header('Access-Control-Allow-Origin','*'); 
    res.header('Access-Control-Allow-Headers','Authorization, X-API-KEY, Origin, X-Requested-With, Content-Type, Access-Control-Allow-Request-Method');
    res.header('Access-Control-Allow-Methods','GET, PUT, POST, DELETE, OPTIONS');
    res.header('Allow','GET, PUT, POST, DELETE, OPTIONS');

    req.io = io;
    next();
});

if(process.env.NODE_ENV === 'development') {

    app.use(cors());

}

const port = process.env.PORT || 8000;

const server = app.listen(port, () => {
    console.log(`connect on the port ${port} - ${process.env.NODE_ENV}`);
});


const io = require('socket.io').listen(server, {
  cors: {
    origin: '*'
  }
});


io.on('connection', socket => {
    socket.on('hello', data => {
      console.log({name: data.name, age: data.age});
    });
});


//middleware
app.use('/api', authRoutes);
app.use('/api', userRoutes);
app.use('/api', countriesRoutes);
app.use('/api', languagesRoutes);
app.use('/api', tutorRoutes);
app.use('/api', messageRoutes);

Request header

Accept: */*
Accept-Encoding: gzip, deflate, br
Accept-Language: pl-PL,pl;q=0.9,en-US;q=0.8,en;q=0.7
Connection: keep-alive
Host: localhost:8000
Origin: http://localhost:3000
Referer: http://localhost:3000/
sec-ch-ua: " Not A;Brand";v="99", "Chromium";v="90", "Google Chrome";v="90"
sec-ch-ua-mobile: ?0
Sec-Fetch-Dest: empty
Sec-Fetch-Mode: cors
Sec-Fetch-Site: same-site
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.93 Safari/537.36

404 not found - in terminal

GET /socket.io/?EIO=4&transport=polling&t=NtFERz- 404

Answer 1

You did not combine the express and socket correctly to set up the server.

Also you can see this video:

React and Socket.io with Express in 15 minutes

SERVER - BACK-END

Follow the steps below:

1. The Built-in HTTP Module
   • Node.js has a built-in module called HTTP, which allows Node.js to transfer data over the Hyper Text Transfer Protocol (HTTP). The HTTP module can create an HTTP server that listens to server ports and gives a response back to the client.
   • Use the createServer() method to create an HTTP server:

const http = require("http");
const express = require("express");
const app = express();

const server = http.createServer(app);

2. Create a utility file with a custom name, here is the name of this socketUtils.js :
   • Here we set up the socket with custom configs, and instantiate.

// <root-project-dir>/utils/socketUtils.js

const socketIO = require("socket.io");

exports.sio = (server) => {
  return socketIO(server, {
    transports: ["polling"],
    cors: {
      origin: "*",
    },
  });
};

exports.connection = (io) => {
  io.on("connection", (socket) => {
    console.log("A user is connected");

    socket.on("message", (message) => {
      console.log(`message from ${socket.id} : ${message}`);
    });

    socket.on("disconnect", () => {
      console.log(`socket ${socket.id} disconnected`);
    });
  });
};

3. Well now it's time to use the socketUtils.js file:

const http = require("http");
const dotenv = require("dotenv");
const cors = require("cors");

dotenv.config({
  path: "./config.env",
});

const express = require("express");
const app = express();
const socketUtils = require("./utils/socketUtils");

const server = http.createServer(app);
const io = socketUtils.sio(server);
socketUtils.connection(io);

4. Create a socket middleware:
   • To access the socket globally in each request, we create a middleware.

const socketIOMiddleware = (req, res, next) => {
  req.io = io;

  next();
};

5. Use the listen() method:
   • You can write other middleware according to the priority that exists with the routes you need and then put the listen() method at the end.

// CORS
app.use(cors());

// ROUTES
app.use("/api/v1/hello", socketIOMiddleware, (req, res) => {
  req.io.emit("message", `Hello, ${req.originalUrl}`);
  res.send("hello world!");
});

// LISTEN
const port = process.env.PORT || 8000;
server.listen(port, () => {
  console.log(`App running on port ${port}...`);
});

The final file should look like this:

// <root-project-dir>/index.js

const http = require("http");
const dotenv = require("dotenv");
const cors = require("cors");

dotenv.config({
  path: "./config.env",
});

const express = require("express");
const app = express();
const socketUtils = require("./utils/socketUtils");

const server = http.createServer(app);
const io = socketUtils.sio(server);
socketUtils.connection(io);

const socketIOMiddleware = (req, res, next) => {
  req.io = io;

  next();
};

// CORS
app.use(cors());

// ROUTES
app.use("/api/v1/hello", socketIOMiddleware, (req, res) => {
  req.io.emit("message", `Hello, ${req.originalUrl}`);
  res.send("hello world!");
});

// LISTEN
const port = process.env.PORT || 8000;
server.listen(port, () => {
  console.log(`App running on port ${port}...`);
});

Finally, to test the server, you can use SocketIO Client Tool online tool, which is very useful.

---

CLIENT - FRONT-END

After setting up the server, you can use it as follows in the React app and emit an event:

import { useEffect, useRef } from "react";
import "./App.css";

import { io } from "socket.io-client";

function App() {
  const socket = useRef();

  useEffect(() => {
    socket.current = io("ws://localhost:9013");

    socket.current.on("connnection", () => {
      console.log("connected to server");
    });
  }, []);

  const handleClick = () => {
    socket.current.emit("message", new Date().getTime());
  };

  return (
    <div className="App">
      <p>Socket.io app</p>

      <button type="button" onClick={handleClick}>
        Emit a time message
      </button>
    </div>
  );
}

export default App;

Finally, you can access the source code in GitHub repo via the link below: https://github.com/mohammadoftadeh/simple-react-socket-io

Answer 2

Change REACT_APP_API env variable from http://localhost:8000/api to http://localhost:8000 i.e. remove the /api.

Answer 3

Use the http package.

const app = require('express')();
const server = require('http').createServer(app);
const io = require('socket.io')(server);

io.on('connection', socket => {
    ....
});

server.listen(3000, () => {
    ....
});