chikanlegbees
chikanlegbees
PostsComments
KPCKevin Powell - Community
Created by chikanlegbees on 12/13/2024 in #back-end
Socket.io on backend and socket.io client on react front end issue
// front end
import { io } from "socket.io-client";

const socket = io("http://localhost:3000");

socket.on("connect", () => {
  console.log("Connected to the server with ID:", socket.id);
});

// Export the socket instance to use it in components
export default socket;
// front end
import { io } from "socket.io-client";

const socket = io("http://localhost:3000");

socket.on("connect", () => {
  console.log("Connected to the server with ID:", socket.id);
});

// Export the socket instance to use it in components
export default socket;
anybody here familiar with socket.io and socket.client?? 
// backend
const app = express();
const server = createServer(app);
const io = new Server(server, { cors: { origin: "http://localhost:5178" } });

io.on("connection", (socket) => {
  console.log("A user connected:", socket.id);
});

app.use(cors());
app.use(express.json());
app.use(express.urlencoded({ extended: true }));
export { server, app };


import { server } from "./app.js";
import "dotenv/config";
server.listen(process.env.PORT, () => console.log("listening on port 3000"));
// backend
const app = express();
const server = createServer(app);
const io = new Server(server, { cors: { origin: "http://localhost:5178" } });

io.on("connection", (socket) => {
  console.log("A user connected:", socket.id);
});

app.use(cors());
app.use(express.json());
app.use(express.urlencoded({ extended: true }));
export { server, app };


import { server } from "./app.js";
import "dotenv/config";
server.listen(process.env.PORT, () => console.log("listening on port 3000"));
for some reason when i run both my server and front end i dont see any console logs 😦 Request URL: ws://localhost:5178/ Request Method: GET Status Code: 101 Switching Protocols this is what i see in the network tab my backend is running on port 3000 I’m new to socket.io and I’m not understanding why I’m not seeing my console logs on the front end or backend I’m not seeing any cors errors in the console either For some reason my network tab logs the above sending a request to a different port even tho my server is on port 3000 My app.js file contains the server creation and everything I’m exporting the server to server.js file where I’m listening to the app I did this as I was testing my express app using super test I’d love some guidance https://github.com/moahnaf11/Messaging-App-Backend Relevant field app.js and server.js
20 replies
KPCKevin Powell - Community
Created by chikanlegbees on 12/13/2024 in #front-end
Scrollbar and overflow-y-auto issue
hey guys im working on a messaging app project rn and im facing a css issue ! ive tried all sorts of stuff to resolve it on my own but to no success tech: React and TailwindCSS for styling ill post a vid below so u guys can take a look basically i have 
<main min-height:100vh grid cols 1fr,2fr (2 column grid container)>
  <section height:100vh flex-column (1st column)>
    <section flex-grow:1 overflow-y-auto>
  <div height:100vh (2nd column) (on mobile absolute position over main inset-0)>
<main min-height:100vh grid cols 1fr,2fr (2 column grid container)>
  <section height:100vh flex-column (1st column)>
    <section flex-grow:1 overflow-y-auto>
  <div height:100vh (2nd column) (on mobile absolute position over main inset-0)>
im trying to get rid of the scrollbar and keep everything within 100vh of screen display so whats happening is that my main since its min-height:100vh its allowed to expand but ive tried setting it to height:100vh but then my section first column doesnt stay within the padding of main it overflows main i dont get why like arent grid cols expanding to the height of the main grid container? why does my section expand to more than that? ive tried putting height: 100% and height: 100vh on section (1st col) too but that causes it to expand way beyond main not allowing the section with overflow y to work im rly lost and would appreciate some help what i want is my section (1st col) to stay within the first col in mainand not overflow main and i want the section (overflow-y-auto) which is the child of section in the first col of main to apply overflow-y-auto when it content is about to overflow the parent section relevant files: Chat.jsx :https://github.com/moahnaf11/Messaging-App-Frontend/blob/main/src/Chat.jsx line 86: main line 87: section 1st col in grid line 165: section child of section in line 87 with overflow-y-auto line: 250:div(2nd col) Conversation.jsx: https://github.com/moahnaf11/Messaging-App-Frontend/blob/main/src/Conversation.jsx line: 215: div rendered inside of the div(2nd col in grid) in line 250 Chat.jsx Here u can see the section 1st col overflow as main is min-h-100vh i want to remove the scrollbar
8 replies