chikanlegbees Posts - Answer Overflow

chikanlegbees

•Created by chikanlegbees on 3/28/2025 in #front-end

Issue with scrolling on mobile even after height is viewport height ! Likely address bar issue

So I’ve got 2 videos I’m gonna send below first one is from the dev tools in mobile view so that doesn’t account for the address bar we have in chrome mobile layouts Second one is a screen recording of the app from mobile browser so address bar is present on that one Now the issue is my app page is set to full vh so 100vh right… and that means there’s shouldn’t be any scroll bars when the page loads as the page is just the viewport height and not more Now in my first video all is well! No scroll bars r shown and that’s from the dev tools in chrome So when I scroll my date headers in the messages go behind the header where the receivers username is as u can see in the video which is what I want Now when I open the app in phone u can see that I’m able to scroll in the page even though it’s set to 100vh height now I’ve done a lot of research and I’ve found that chrome on phone doesn’t take into account the address bar so that causes issues with the layout That gives me a big as u can see in the second recording that my date headers in messages overlap over the persons username in the chat window… now how could I fix that? Now I’ve come across units like dvh / svh / lvh I wanted to ask what is the best unit in this case. I’ve read that dvh causes a slight flicker when the layout adjusts as the address bar shrinks right ! But in chrome phone the address bar doesn’t shrink not sure if It’s an issue but I’m on iPhone fyi! And svh would be the best bet but its browser support isn’t up yet? I wanted to know how I could go about fixing this issue ? Would I have to change all my vh to dvh/svh in my css code ?

3 replies

KPCKevin Powell - Community

•Created by chikanlegbees on 3/18/2025 in #back-end

Socket.emit() and socket.on() not working when app is refreshed?

hey guys so im currently using socket.io for a real time chat app and my issue is that i have a useEffect which runs only on component mount okay and that fires socket.connect() and then socket.emits an event but for some reason when i refresh the app the component mounts right? and that should fire the emit event right? but it doesnt? its not received in the backend for some reason ive added console.logs to ensure my useEffect runs and it does but in the backend i dont get any logs from the event it should catch 😦 now it does work when i visit another component and get back to the component that has the socket event but for some reason it doesn't work on app refresh in the browser id like some help ill paste the code below

// frontend
useEffect(() => {
    const token = localStorage.getItem("token");
    const data = jwtDecode(token);
    setMyData(data);
    mydataRef.current = data;
    if (!socket.connected) {
      socket.connect();
    }
    console.log("data id", data.id);
    socket.emit("login", data.id);
    console.log("socket emitted");
  }, []);

// backend
io.on("connection", (socket) => {
  console.log("A user connected:", socket.id);
  // Listen for message send requests
  socket.on("login", async (userId) => {
    console.log(`Received login event for userId: ${userId}`);
    const groups = await allGroups(userId);
    users[userId] = socket.id;
    console.log("all users connected", users);
    groups.forEach((group) => {
      socket.join(group.id);
      console.log(`User ${userId} joined room: ${group.id}`);
    });
    const data = await updateUserOnline(userId, true);
    socket.broadcast.emit("receiveOnline", data);
  });

// frontend
useEffect(() => {
    const token = localStorage.getItem("token");
    const data = jwtDecode(token);
    setMyData(data);
    mydataRef.current = data;
    if (!socket.connected) {
      socket.connect();
    }
    console.log("data id", data.id);
    socket.emit("login", data.id);
    console.log("socket emitted");
  }, []);

// backend
io.on("connection", (socket) => {
  console.log("A user connected:", socket.id);
  // Listen for message send requests
  socket.on("login", async (userId) => {
    console.log(`Received login event for userId: ${userId}`);
    const groups = await allGroups(userId);
    users[userId] = socket.id;
    console.log("all users connected", users);
    groups.forEach((group) => {
      socket.join(group.id);
      console.log(`User ${userId} joined room: ${group.id}`);
    });
    const data = await updateUserOnline(userId, true);
    socket.broadcast.emit("receiveOnline", data);
  });

im getting this console.log("A user connected:", socket.id); on the terminal but not console.log(Received login event for userId: ${userId}); when i refresh 😦

4 replies

KPCKevin Powell - Community

•Created by chikanlegbees on 3/17/2025 in #front-end

React socket.emit() not working when app is refreshed ?

// frontend
useEffect(() => {
    const token = localStorage.getItem("token");
    const data = jwtDecode(token);
    setMyData(data);
    mydataRef.current = data;
    if (!socket.connected) {
      socket.connect();
    }
    console.log("data id", data.id);
    socket.emit("login", data.id);
    console.log("socket emitted");
  }, []);

// backend
io.on("connection", (socket) => {
  console.log("A user connected:", socket.id);
  // Listen for message send requests
  socket.on("login", async (userId) => {
    console.log(`Received login event for userId: ${userId}`);
    const groups = await allGroups(userId);
    users[userId] = socket.id;
    console.log("all users connected", users);
    groups.forEach((group) => {
      socket.join(group.id);
      console.log(`User ${userId} joined room: ${group.id}`);
    });
    const data = await updateUserOnline(userId, true);
    socket.broadcast.emit("receiveOnline", data);
  });

// frontend
useEffect(() => {
    const token = localStorage.getItem("token");
    const data = jwtDecode(token);
    setMyData(data);
    mydataRef.current = data;
    if (!socket.connected) {
      socket.connect();
    }
    console.log("data id", data.id);
    socket.emit("login", data.id);
    console.log("socket emitted");
  }, []);

// backend
io.on("connection", (socket) => {
  console.log("A user connected:", socket.id);
  // Listen for message send requests
  socket.on("login", async (userId) => {
    console.log(`Received login event for userId: ${userId}`);
    const groups = await allGroups(userId);
    users[userId] = socket.id;
    console.log("all users connected", users);
    groups.forEach((group) => {
      socket.join(group.id);
      console.log(`User ${userId} joined room: ${group.id}`);
    });
    const data = await updateUserOnline(userId, true);
    socket.broadcast.emit("receiveOnline", data);
  });

im getting this console.log("A user connected:", socket.id); on the terminal but not console.log(Received login event for userId: ${userId}); when i refresh 😦

1 replies

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

Gaming

Programming