Client Server connection

Author: craig-dsilva

chat-app/client/package-lock.json

@@ -11,7 +11,8 @@
   },
   "dependencies": {
     "react": "^19.2.6",
-    "react-dom": "^19.2.6"
+    "react-dom": "^19.2.6",
+    "socket.io-client": "^4.8.3"
   },
   "devDependencies": {
     "@babel/core": "^7.29.0",

chat-app/client/package.json

@@ -1,9 +1,14 @@
-import './App.css'
+import { io } from "socket.io-client";
+import "./App.css";
 
 const App = () => {
-return (
-  <></>
-)
-}
+  const socket = io("http://localhost:3000");
 
-export default App
+  socket.on("connect", () => {
+    console.log(socket.id);
+  });
+
+  return <></>;
+};
+
+export default App;

chat-app/client/src/App.jsx

@@ -1,10 +1,14 @@
 import express from 'express';
-import { createServer } from 'node:http';
+import { createServer } from 'http';
 import { Server } from 'socket.io';
 
 const app = express();
 const server = createServer(app);
-const io = new Server(server);
+const io = new Server(server, {
+  cors: {
+    origin: ['http://localhost:5173'],
+  },
+});
 
 app.get('/', (req, res) => {
   res.send('<h1>Hello world</h1>');