Добавить socket к готовому коду

помогите пожалуйста разобраться с сокетами и добавить сокеты к готовому коду на react typescript mobx и typescript express prisma.io Для начала продемонстрирую код на backend:

import prisma from "../middleware/prisma-middleware";

class ComplementaryMessageService{

    async addMessage(user_id:string, id:string, text:string){
        const date = new Date()
        const member = await prisma.member.findFirst({
            where:{
                user_id:user_id
            }
        })
        const complementary = await prisma.complementaryComment.create({
            data:{
                complementary_id:id,
                member_id:member?.id,
                text:text,
                datetime:date.toISOString()
            }
        })
        return complementary
    }

    async getAllMessage(user_id:string, id:string){
        const member = await prisma.member.findFirst({
            where:{
                user_id:user_id
            }
        })
        const complementary = await prisma.complementaryComment.findMany({
            where:{
                complementary_id:id,
                member_id:member?.id
            },
            include:{
                member:{
                    include:{
                        user:{
                            select:{
                                colorProfile: true,
                                surname: true,
                                name: true,
                                lastname: true,
                                email: true,
                                passwordLink: true,
                                activationLink: true,
                                isActived: true,
                                file: true,
                                id: true
                            }
                        }
                    }
                }
            }
        })
        return complementary
    }
}

export default new (ComplementaryMessageService)

controller.ts

import complementaryMessageService from "../service/complementary-message-service"

class ComplementaryMessageController{

    async addMessage(req:any, res:any, next:any){
        try {
            const {user_id, id, text, } = req.body
            const classData = await complementaryMessageService.addMessage(user_id, id, text)
            return res.send(classData)
        } catch (e) {
            next(e)
        }
    }

    async getAll(req:any, res:any, next:any){
        try {
            const {user_id, id} = req.body
            const classData = await complementaryMessageService.getAllMessage(user_id, id)
            return res.send(classData)
        } catch (e) {
            next(e)
        }
    }
}

export default new ComplementaryMessageController()

router-message.ts

import { Router } from 'express';
import complementaryMessageController from '../controller/complementary-message-controller';

export const complementaryMessageRouter = Router();
complementaryMessageRouter.post('/addMessage', complementaryMessageController.addMessage)
complementaryMessageRouter.post('/getAllMessage', complementaryMessageController.getAll)

index.ts

import express from 'express'
const PORT = process.env.PORT || 5000
import cors from 'cors'
import * as dotenv from 'dotenv';
const app = express()
import {router} from './router'
import errorMiddleware from './middleware/error-middleware'
import bodyParser from 'body-parser'
import prisma from './middleware/prisma-middleware';
app.use(bodyParser.json())
app.use(express.json())
app.use('/', router)
dotenv.config();

app.use(cors(
    {
        credentials: true,
        origin: 'http://localhost:3000'
    }
))
app.use(errorMiddleware)
app.use('/images', express.static('uploads/images'))
app.use('/files', express.static('uploads/files'))

const start = async()=>{
    try {
        app.listen(PORT, ()=>console.log('server work on 5000'))
        await prisma.role.createMany({
            data: [
            { name: 'student'},
            { name: 'teacher'}, 
            ],
            skipDuplicates: true, 
        })
    } catch (e) {
        console.log(e)
    }
}

start()

теперь к frontend service.ts

import { AxiosResponse } from "axios";
import api from "../http";
import { ComplementaryMessage } from "../model/ComplementaryMessage";

export default class ComplementaryMessageService{
    static async addMessage(user_id: string, id:string, text:string): Promise<AxiosResponse<ComplementaryMessage>>{
        return await api.post<ComplementaryMessage>('complemetaryMessage/addMessage', {user_id, id, text})
    }

    static async getAllMessage(user_id: string, id:string): Promise<AxiosResponse<ComplementaryMessage>>{
        return await api.post<ComplementaryMessage>('complemetaryMessage/getAllMessage', {user_id, id})
    }
}

store:

async addMessageComplementary(user_id:string, id:string, text:string){
        try {
            this.setError([])
            const data = await ComplementaryMessageService.addMessage(user_id, id, text)
            return data
        } catch (e) {
            console.log(e)
            let error: any = e;
            this.setError(error.response.data.message)        
        }
    }

    async getAllMessageComplementary(user_id:string, id:string){
        try {
            this.setError([])
            const data = await ComplementaryMessageService.getAllMessage(user_id, id)
            return data
        } catch (e) {
            console.log(e)
            let error: any = e;
            this.setError(error.response.data.message)        
        }
    }

сам компонент

import { observer } from 'mobx-react-lite'
import React, { useContext, useEffect, useState } from 'react'
import { AiOutlineFileText } from 'react-icons/ai'
import { Context } from '..'
import { useParams } from 'react-router-dom'
import { PropagateLoader } from 'react-spinners'
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism';
import { decode } from 'html-entities';
import { API_URL } from '../http'
import checkFileAvailability from '../middleware/image'
import { BiSend } from 'react-icons/bi'
import { BsFillFileTextFill, BsPlus, BsThreeDotsVertical } from 'react-icons/bs'
import hexToRgb from '../middleware/colorToRGBA'
import ModalFileComplementary from './ModalFileComplementary'
import { FilesMap } from './FilesMap'
import ModalCreateTask from './ModalCreateTask'
import ModalAddToTheme from './ModalAddToTheme'

const StudentTaskIsForm = () => {
    const [openModalFile, setOpenModalFile] = useState(false)
    const {store} = useContext(Context)
    const id = useParams()
    const [isHovered, setIsHovered] = useState(false);
    const [course, setCourse] = useState<any>()
    const [task, setTask] = useState<any>()
    const [role, setRole] = useState<any>()
    const [loading, setLoading] = useState<boolean>(true)
    const [checkFile, setCheckFile] = useState<boolean>(false)
    const [complementary, setComplementary] = useState<any>()
    const [complementaryMessage, setComplementaryMessage] = useState<any>()
    const [dateNow, setDateNow] = useState<any>()
    const [openModalTask, setOpenModalTask] = useState(false)
    const [openModalTheme, setOpenModalTheme] = useState(false)
    const [complementaryMessageText, setComplementaryMessageText] = useState<string>()
    useEffect(() => {
        if(id.id)
        store.viewTaskOne(id.id, store.user.id).then((data)=>{
          setRole(data?.data.role.name)
            if(data?.data.role.name==='student'){
              if(id.id)
              store.viewComplementaryOne(id.id, store.user.id).then((compData)=>{ 
                if(compData?.data.id)
                store.getAllMessageComplementary(store.user.id, compData?.data.id).then((messageComp)=>{//вывод всех комментариев с базы
                  setComplementaryMessage(messageComp?.data)
                  setComplementary(compData?.data)
                  setCourse(data?.data.class)
                  setTask(data?.data.class.task[0])
                  handleCheckImage()
                  const currentDate = new Date(Date.now());
                  setDateNow(currentDate.toISOString())
                  setLoading(false)
                })
              })
            }else{
                setCourse(data?.data.class)
                setTask(data?.data.class.task[0])
                handleCheckImage()
                setLoading(false)
            }
        })
    // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [id.id, store])
   //тут есть код, но вам он не нужен
  const handleAddMessageComplemenatry = () =>{ //добавление комментария в базу
    if(complementaryMessageText){
      store.addMessageComplementary(store.user.id, complementary.id, complementaryMessageText).then((data)=>{
        if(data)
          setComplementaryMessageText('')
      })
    }
  }

  const handleKeyPress = (event: React.KeyboardEvent<HTMLInputElement>) => {
    if (event.key === 'Enter') {
      if(complementaryMessageText){
        store.addMessageComplementary(store.user.id, complementary.id, complementaryMessageText).then((data)=>{
          if(data){
            setComplementaryMessageText('')
          }
        })
      }
    }
  };

  return (
    //тут тоже есть код но вам он не обязателен
                <p style={{fontWeight:'600'}}>Комментарии</p>
                {complementaryMessage&&( // вывод всех комментариев, которые есть
                  <>
                    {complementaryMessage.map((comp:any)=>(
                      <div className='comment'>
                        <div style={{display:'flex'}}>
                          <div className="task-body__body__left__comment-input__image-cont"
                          style={{background:comp.member.user.colorProfile, width:'41px', height:'40px'}}>
                            {checkFile?(
                              <img src={API_URL + 'images/'+comp.member.user.file} 
                              style={{objectFit:'cover', width:'41px', height:'100%'}}alt="" />
                            ):(
                              <div>
                                <p style={{marginTop:'8px'}}>{comp.member.user.email[0].toUpperCase()}</p>
                              </div>
                            )}
                          </div>
                          <div style={{marginTop:'-15px', marginLeft:'5px'}}>
                            <div>
                              <p style={{fontWeight:'600', fontSize:'16px'}}>{comp.member.user.surname} {comp.member.user.name} {comp.member.user.lastname}</p>
                              <p style={{color:'#AEB5C8', fontSize:'14px', marginTop:'-15px'}}>{comp.member.user.email}</p>
                            </div>
                            <p style={{fontSize:'14px', marginTop:'-10px', color:'#9A9A9A'}}>{displayTextCommentComp}</p> 
                            <p style={{marginTop:'-5px'}}>{comp.text}</p>
                          </div>
                        </div>
                      </div>
                    ))}
                  </>
                )}
                <div className="task-body__body__left__comment-input">
                  <div className="task-body__body__left__comment-input__image-cont"
                  style={{background:store.user.colorProfile, width:'49px', height:'40px'}}>
                    {checkFile?(
                      <img src={API_URL + 'images/'+store.user.file} 
                      style={{objectFit:'cover', width:'41px', height:'100%'}}alt="" />
                    ):(
                      <div>
                        <p style={{marginTop:'8px'}}>{store.user.email[0].toUpperCase()}</p>
                      </div>
                    )}
                  </div>
                  <input type="text" 
                  placeholder='Добавить комментарий' 
                  style={{border:`1px solid ${course.decor}`}} onChange={(e)=>setComplementaryMessageText(e.target.value)} 
                  value={complementaryMessageText} onKeyPress={handleKeyPress}/>
                  <BiSend style={{color:course.decor, fontSize:'28px', marginTop:'5px', marginRight:'-40px'}} onClick={handleAddMessageComplemenatry}/> //здесь добавляется комментарий, который нам нужен
                </div>
            </div>
            )}
            {openModalFile&&(
              <ModalFileComplementary show={openModalFile} onClose={handleCloseModalFile} id={complementary.id}/>
            )}
        </div>  
    </div>
  )
}
export default observer(StudentTaskIsForm)

если поможете, буду безумно благодарна, хочется разобраться именно на примере моего кода