diff --git a/client/public/index.html b/client/public/index.html
index f7fe5a7b7a65ac587b0aa4bd81eaa1b5fc6dbd0e..cab5423d9e456564f1b841a5f3ada33e149c2be3 100644
--- a/client/public/index.html
+++ b/client/public/index.html
@@ -10,6 +10,7 @@
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Karantina&display=swap" rel="stylesheet">
+    <script src="./build/index.bundle.js" defer></script>
 </head>
 <body> 
     <section class="home">
diff --git a/client/src/Player.js b/client/src/Player.js
index 5db79ee0b8f1826e83bb10d9482af5caca2dc1de..843be20727f1a211cebf1eef56531ecbdbce9fbc 100644
--- a/client/src/Player.js
+++ b/client/src/Player.js
@@ -1,6 +1,7 @@
 class Player {
   image = new Image();
-  constructor(x, y, radius, imageFolder) {
+  constructor(x, y, radius, imageFolder, id) {
+    this.id = id;
     this.x = x;
     this.y = y;
     this.radius = radius;
diff --git a/client/src/main.js b/client/src/main.js
index fbadd45d7a5723ff441ae750f01656877560210a..eae0349c44bef3df04398fdf81a0c2963fb83296 100644
--- a/client/src/main.js
+++ b/client/src/main.js
@@ -1,5 +1,6 @@
 import Player from "./Player.js";
 import { Sushi } from "./Ressources.js";
+import { io } from "socket.io-client";
 
 const Main = (playerName, playerCharacter) => {
   const canvas = document.querySelector(".map");
@@ -9,6 +10,10 @@ const Main = (playerName, playerCharacter) => {
   canvas.height = document.documentElement.clientHeight;
   ctx.width = 6000;
   ctx.height = 3340;
+  const xStart = canvas.width / 2;
+  const xEnd = ctx.width - canvas.width / 2;
+  const yStart = canvas.height / 2;
+  const yEnd = ctx.height - canvas.height / 2;
 
   window.addEventListener("resize", (e) => {
     e.preventDefault();
@@ -16,15 +21,9 @@ const Main = (playerName, playerCharacter) => {
     canvas.height = document.documentElement.clientHeight;
   });
 
-  const image = new Image();
-  image.src = "/images/goku.png";
   const backgroundImage = new Image();
   backgroundImage.src = "/images/map.jpg";
 
-  let folder = playerCharacter;
-
-  const player = new Player(canvas.width / 2, canvas.height / 2, 20, folder);
-
   document.addEventListener("keydown", (event) => {
     event.preventDefault();
     // Mettre à jour la direction en fonction des touches enfoncées
@@ -71,57 +70,94 @@ const Main = (playerName, playerCharacter) => {
     }
   });
 
-  let sushis = [];
-
-  for (let i = 0; i < 1500; i++) {
-    const xStart = canvas.width / 2;
-    const xEnd = ctx.width - canvas.width / 2;
-    const yStart = canvas.height / 2;
-    const yEnd = ctx.height - canvas.height / 2;
-    const x = Math.random() * (xEnd - xStart) + xStart;
-    const y = Math.random() * (-yStart + yEnd) + yStart;
-    console.log(x, y);
-    const sushi = new Sushi(x, y, 5);
-    sushis.push(sushi);
-  }
-
-  let mouseX;
-  let mouseY;
+  const socket = io();
 
-  canvas.addEventListener("mousemove", (event) => {
-    event.preventDefault();
-    mouseX = event.clientX;
-    mouseY = event.clientY;
-
-    player.moveTo(mouseX, mouseY, canvas);
+  let sushis = [];
+  socket.on("sushis", (data) => {
+    for (let i = 0; i < data?.length; i++) {
+      const sushi = new Sushi(
+        data[i].x * (xEnd - xStart) + xStart,
+        data[i].y * (-yStart + yEnd) + yStart,
+        5
+      );
+      sushis.push(sushi);
+    }
   });
 
-  function update() {
-    ctx.save();
-    ctx.clearRect(0, 0, ctx.width, ctx.height);
-    ctx.beginPath();
-
-    // Déplacer le joueur en fonction de la direction
-    const cameraX = canvas.width / 2 - player.x;
-    const cameraY = canvas.height / 2 - player.y;
-    ctx.translate(cameraX, cameraY);
-    // Déplacer le contexte pour centrer la caméra ssur le joueur
-    // Dessiner le joueur et les autres éléments du jeu
-    ctx.drawImage(backgroundImage, 0, 0, ctx.width, ctx.height);
-    sushis.forEach((sushi) => {
-      sushi.draw(ctx);
+  let folder = playerCharacter;
+  let userId;
+
+  function getUserId() {
+    return new Promise((resolve, reject) => {
+      socket.on("user", (data) => {
+        userId = data;
+        resolve(userId);
+      });
     });
+  }
 
-    //player.move(ctx);
-    player.eatSushi(sushis);
-    player.draw(ctx);
-    player.move(ctx, mouseX, mouseY);
-    ctx.restore();
-    // Déplacer le contexte pour centrer la caméra sur le joueur
-    //ctx.translate(-cameraX, -cameraY);
-    requestAnimationFrame(update);
+  async function myFunction() {
+    try {
+      const userId = await getUserId();
+      const player = new Player(
+        Math.random() * (xEnd - xStart) + xStart,
+        Math.random() * (-yStart + yEnd) + yStart,
+        20,
+        folder,
+        userId
+      );
+
+      socket.emit("newUser", player);
+
+      let allUsers = [];
+      socket.on("allUsers", (datas) => {
+        allUsers = datas;
+      });
+
+      let mouseX;
+      let mouseY;
+
+      canvas.addEventListener("mousemove", (event) => {
+        event.preventDefault();
+        mouseX = event.clientX;
+        mouseY = event.clientY;
+
+        player.moveTo(mouseX, mouseY, canvas);
+      });
+
+      function update() {
+        ctx.save();
+        ctx.clearRect(0, 0, ctx.width, ctx.height);
+        ctx.beginPath();
+        const cameraX = canvas.width / 2 - player.x;
+        const cameraY = canvas.height / 2 - player.y;
+        ctx.translate(cameraX, cameraY);
+        ctx.drawImage(backgroundImage, 0, 0, ctx.width, ctx.height);
+        sushis.forEach((sushi) => {
+          sushi.draw(ctx);
+        });
+        allUsers.forEach((user) => {
+          const otherPlayer = new Player(
+            user.x,
+            user.y,
+            user.radius,
+            user.imageFolder,
+            user.id
+          );
+          otherPlayer.draw(ctx);
+        });
+        player.eatSushi(sushis);
+        player.move(ctx, mouseX, mouseY);
+        ctx.restore();
+        socket.emit("updateUser", player);
+        requestAnimationFrame(update);
+      }
+      update();
+    } catch (error) {
+      console.error(error);
+    }
   }
-  update();
+  myFunction();
 };
 
 export default Main;
diff --git a/package.json b/package.json
index d4cc7bad9c5acb5159b95c575d12c35a07250f12..3cd48cb5fee8e0f13dec38a1b6c33a78d0355780 100644
--- a/package.json
+++ b/package.json
@@ -20,7 +20,9 @@
         "@babel/preset-env": "^7.20.2",
         "@types/node": "^18.15.11",
         "babel-loader": "^9.1.2",
+        "nodemon": "^2.0.22",
         "prettier": "^2.8.3",
+        "ts-node": "^10.9.1",
         "webpack": "^5.75.0",
         "webpack-cli": "^5.0.1",
         "webpack-dev-server": "^4.11.1"
@@ -29,6 +31,7 @@
         "dotenv": "^16.0.3",
         "express": "^4.18.2",
         "fs": "^0.0.1-security",
-        "nodemon": "^2.0.22"
+        "socket.io": "^4.6.1",
+        "socket.io-client": "^4.6.1"
     }
 }
diff --git a/server/index.js b/server/index.js
index a953293e25ac3322923c7c74f8482fd8a1309ac7..bf2ed3a134596b60d959cc83c1d5cde3ac1770d2 100644
--- a/server/index.js
+++ b/server/index.js
@@ -2,11 +2,37 @@ import express from "express";
 import http from "http";
 const app = express();
 const httpServer = http.createServer(app);
+import { Server as IOServer } from "socket.io";
 
 app.use("/", express.static("client/public"));
 
+let users = [];
+
+let sushis = [];
+for (let i = 0; i < 1500; i++) {
+  sushis.push({ x: Math.random(), y: Math.random() });
+}
+
+const io = new IOServer(httpServer);
+io.on("connection", (socket) => {
+  io.emit("user", socket.id);
+  io.emit("sushis", sushis);
+
+  socket.on("newUser", (data) => {
+    users.push(data);
+    socket.emit("allUsers", users);
+  });
+  socket.on("updateUser", (data) => {
+    for (let i = 0; i < users.length; i++) {
+      if (users[i].id === data.id) {
+        users[i] = data;
+      }
+    }
+    socket.emit("allUsers", users);
+  });
+});
+
 const port = 8000;
-console.log(port);
 httpServer.listen(port, () => {
   console.log(`Think http://localhost:${port}, Think !/`);
 });
diff --git a/webpack.config.js b/webpack.config.js
index 11d9bf42d9ae0894a1aa7bdd4e4914b4ad656ba7..406671449465d4e65e72d1f6e0e9259608dd8bfe 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -2,11 +2,14 @@ import path from "path";
 
 export default {
   // Fichier d'entrée :
-  entry: "./client/src/index.js",
+  entry: {
+    index: "./client/src/index.js",
+    main: "./client/src/main.js",
+  },
   // Fichier de sortie :
   output: {
     path: path.resolve(process.cwd(), "./client/public/build"),
-    filename: "main.bundle.js",
+    filename: "[name].bundle.js",
     publicPath: "/build/",
   },
   // compatibilité anciens navigateurs (si besoin du support de IE11 ou android 4.4)
@@ -15,7 +18,7 @@ export default {
   module: {
     rules: [
       {
-        test: /\.js$/, // tous les fichiers js ...
+        test: /.js$/, // tous les fichiers js ...
         exclude: /node_modules/, // ... sauf le dossier node_modules ...
         use: {
           // ... seront compilés par babel !