How to receive response from this socket.io in react js?

Question

useEffect(() => { socket.emit("chatList", { senderId: userId, pageNo: 1, limit: 10, }); }, []);

here is the full code!

import React, { useState, useEffect } from "react";
import Sidebar from "../../../../components/sidebar";
import { Card, Input } from "antd";
import "./style.css";
import { Typography } from "antd";
import { SendOutlined } from "@ant-design/icons";
import socketIO from "socket.io-client";
import { useDispatch, useSelector } from "react-redux";

const accessToken = localStorage.getItem("token");
const socket = socketIO.connect(
  `http://ec2-35-182-44-148.ca-central-1.compute.amazonaws.com:4001/?accessToken=${accessToken}`
);

const { Title } = Typography;

function Message() {
  const userData = useSelector((state) => state.loginData?.user);
  const itemList = [
    "Sam Becker",
    "Brian Smith",
    "Margaret lyle",
    "Ruth gilman",
    "Lester Wolford",
    "Jeanate Cambell",
  ];
  const date = new Date();
  const showTime = date.getHours() + ":" + date.getMinutes();
  const { firstName, userId } = userData;
  const [filteredList, setFilteredList] = useState(itemList);
  const [activeUser, setaActiveUser] = useState("");
  const [message, setMessage] = useState("");
  const [messages, setMessages] = useState([]);
  const [users, setUsers] = useState([]);

  const filterBySearch = (event) => {
    const query = event.target.value;
    var updatedList = [...itemList];
    updatedList = updatedList.filter((item) => {
      return item.toLowerCase().indexOf(query.toLowerCase()) !== -1;
    });
    setFilteredList(updatedList);
  };

  const handleSendMessage = () => {
    // if (message != "") {
    //   setMessages((msg) => [...msg, message]);
    // }
    socket.emit("sendMessage", {
      message: message,
      senderId: userId,
      receiverId: "636a1d91fce96e018a7041b6",
    });

    setMessage("");
  };

  useEffect(() => {
    socket.emit("chatList", {
      senderId: userId,
      pageNo: 1,
      limit: 10,
    });
  }, []);

  useEffect(() => {
    socket.on("chatHistory", (data) => setMessages([...messages, data]));
  }, [socket, messages]);

  return (
    <div style={{ background: "#E4E4E4", minHeight: "100vH" }}>
      <div className="container-fluid">
        <div className="pt-5 d-flex">
          <Sidebar />
          <Card className="card-root">
            <div className="ms-4 w-100 parent">
              <div className="left-child">
                <Input
                  className="input"
                  placeholder="Search messages"
                  onChange={filterBySearch}
                />
                <div className="friend-list">
                  {filteredList?.map((item) => {
                    return (
                      <div className="user-list">
                        <div className="list-top-item">
                          <span
                            style={{ display: "flex", alignItems: "center" }}
                          >
                            <img
                              src=""
                              width={30}
                              height={30}
                              className="br-25 caregiver-img"
                            />
                            <Title
                              onClick={() => {
                                setaActiveUser(item);
                              }}
                              className="list-user-item"
                              level={3}
                            >
                              {item}
                            </Title>
                          </span>
                          <span className="blue-mark">1</span>
                        </div>
                        <div className="list-item">
                          <span className="sample-text">
                            Accumsan sit id urna sn sit....
                          </span>
                          <span className="sample-time">05:12AM</span>
                        </div>
                      </div>
                    );
                  })}
                </div>
              </div>
              <div className="right-child">
                <div className="form">
                  {activeUser && (
                    <>
                      <span style={{ display: "flex", alignItems: "center" }}>
                        <img
                          src=""
                          width={30}
                          height={30}
                          className="br-25 caregiver-img"
                        />
                        <Title level={3} className="active-chat">
                          {activeUser}
                        </Title>
                      </span>

                      <hr className="heading-line " />
                    </>
                  )}

                  <div>
                    <div className="messages">
                      <div className="message__container">
                        {messages?.map((message) => (
                          <div className="message__chats" key={message.id}>
                            <span className="sender-time">
                              <b style={{ marginRight: "5px" }}>You</b>{" "}
                              {showTime}
                            </span>
                            <div className="message__sender">
                              <p>{message}</p>
                            </div>
                          </div>
                        ))}
                      </div>
                    </div>
                  </div>
                  {activeUser && (
                    <div className="send">
                      <div className="inputMessageBox">
                        <Input
                          className="inputMessage"
                          placeholder="Type Message"
                          value={message}
                          onChange={(e) => setMessage(e.target.value)}
                        />
                        <span
                          className="send-Icon"
                          onClick={() => handleSendMessage}
                        >
                          <SendOutlined onClick={() => handleSendMessage()} />
                        </span>
                      </div>
                    </div>
                  )}
                </div>
              </div>
            </div>
          </Card>
          <div></div>
        </div>
      </div>
    </div>
  );
}

export default Message;

I try adding arrow function with data parametre after payload but not able to see any response. Is my connection to socket.io good or wrong? This also triggers too many API calls. I am using first time socket.io any help is appreciated.I want to see chat history, I am sharing the docs below....

Socket URL : http://ec2-35-182-44-148.ca-central-1.compute.amazonaws.com:4001/

Connection : You need to pass accessToken Query Params : accessToken

Get Chat List:

EMIT: chatList

Payload: {
    "senderId":"636a1dd0fce96e018a7041c0",
    "pageNo":1,
    "limit":10    
}

ON: chatListFromServer

Get Chat History:

EMIT: chatHistory

payload:{
    "senderId":"636a1dd0fce96e018a7041c0",
    "receiverId":"636a1d91fce96e018a7041b6",
    "pageNo":1,
    "limit":10  
}

ON: chatHistoryFromServer Send Message:

EMIT: sendMessage

payload:{
    "message":"Heyyyyyyy",
    "senderId":"636a1dd0fce96e018a7041c0",
    "receiverId":"636a1d91fce96e018a7041b6"
}

ON: messageFromServer Read Message:

EMIT: readMessage

payload:{
    "messageId":"636a1dd0fce96e018a7041c0",
}

Answer 1

I'm not sure if this the right approach but it worked for me.

Assuming the socket has been setup to connect to some url

 let [socket, setSocket] = useState(null)
useEffect(() => setSocket(io(socket_connect_url), [])

Then you could setup a hook to detect the event 'someEvent' like so,

useEffect(() => {
    if(!socket) return;
    socket.on('someEvent', (recv) =>{
        try{
            // Process recv message here
            console.log(recv);
        }catch(err){
            console.log(err)
        }
    }, [socket])
  })