Bonjour à tous ! Avant de commencer je tiens à préciser que je suis débutant dans la programmation mais aussi dans l’utilisation des forums donc soyez indulgent svp !
J’ai chercher une solution à mon problème sur ce forum mais je n’ai pas trouver donc je me permet de montrer mon problème, j’espère que cela ne dérange personne.
Présentation de mon projet très rapidement : Je fais un jeu d’échecs en ligne en utilisant Next Js.
Pour créer la communication entre les 2 joueurs j’utilise socket.io.
Cependant j’ai une erreur et je ne comprends vraiment pas d’où elle vient (c’est peut-être tout bête mais je le rappel je débute)
Voici l’erreur :

Unhandled Runtime Error
TypeError: Cannot read properties of undefined (reading 'emit')

Source
srcpageshomejouerpartielindex.js (121:11) @ emit

  119 |   let codepartie = localStorage.getItem("codepartie");
  120 |   setCodepartie(codepartie);
> 121 |   socket.emit("message", "4", codepartie)
      |         ^
  122 |   
  123 | }
  124 | 
Call Stack
handle
srcpageshomejouerpartielindex.js (747:12)

J’ai essayé plein de façon d’implémenter socket io mais toujours la même erreur.
Voici des extraits de mon code (les parties en lien avec socket.io) :
Server.js :

const io = require("socket.io")(3000, {
    cors : {
        origin : "http://localhost:3001",
        methods : ["GET", "POST"],
    }})

io.on("connection", (socket) => {
    console.log("A user connected")
    socket.on("message", (message, codepartie) => {
        console.log(message, codepartie)
        io.to(codepartie).emit("message", message)
    })
})

Package.json du server :

{
  "dependencies": {
    "nodemon": "^3.1.0",
    "socket.io": "^4.7.5"
  },
  "name": "server",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "start": "nodemon server.js"
  },
  "author": "",
  "license": "ISC",
  "description": ""
}

Partie du UseEffect concernant socket.io dans la partie client :

    let codepartie = localStorage.getItem("codepartie");
    setCodepartie(codepartie);
    const socket = io("http://localhost:3000")
    socket.on('message', (message) =>{
      setInput(message)
    })
    setSocket(socket)

Fonction qui envoie un message (avec la ligne qui créer l’erreur (l-4)) :

  const handle = () => {
    let codepartie = localStorage.getItem("codepartie");
    setCodepartie(codepartie);
    socket.emit("message", "4", codepartie)
  }

next.config.js :

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
}

module.exports = nextConfig

package.json :

{
  "name": "hess_echecs",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "cookie": "^0.6.0",
    "express": "^4.18.3",
    "mysql2": "^3.6.5",
    "next": "14.0.4",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "socket.io": "^4.7.5",
    "socket.io-client": "^4.7.5",
    "ws": "^8.16.0"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "autoprefixer": "^10.4.16",
    "eslint": "^8",
    "eslint-config-next": "14.0.4",
    "postcss": "^8.4.32",
    "tailwindcss": "^3.4.0",
    "typescript": "^5"
  }
}

N’hésitez à me demander si vous avez besoin d’une autre ressource et vraiment merci d’avance pour ceux qui prendront le temps de m’aider.
Gabriel

J’ai essayé plein de façon d’implémenter socket io mais toujours la même erreur.