CODEWITHSUNDEEP
node.jsreactjsexpresshttpsocket.io
Marcos Gonzales
Marcos Gonzales

Reputation: 41

socket.io problems. Not able to connect. front end says connection: false and backend doesn't log anything

i am new to socket.io and i can't get it to connect to react app. here is my app.js in node

const express = require('express');
const port = process.env.PORT || 4000;
const router = require('./routes/routes');
const cors = require('cors');
const app = express();
const bodyParser = require('body-parser');
const db = require('./db/db');

const server = require('http').createServer(app);
const io = require('socket.io')(server);

io.on('connection', () => {
  console.log('connected');
});

app.use('*', cors());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());
(router);

app.listen(port, () => {
  console.log('listening on port ' + port);
  db.sync({
    // force: true,
    logging: false,
  });
});

and my front end code.

import React, { useState, useEffect, useRef } from 'react';
import { io } from 'socket.io-client';
import classes from './Chatroom.module.css';

const Chatroom = ({ user, getAllMessages, setGetAllMessages }) => {
  const ENDPOINT = 'http://localhost:4000/getallmessages';
  var socket = io(ENDPOINT);

  const messagesEndRef = useRef(null);

  const scrollToBottom = () => {
    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
  };

  useEffect(() => {
    socket.on('connect', () => {
      socket.send('hello');
      console.log('connected.');
    });
    console.log(socket);
  }, []);

Whenever i look in the console on it shows connected: false and nothing is logging on the backend.

Upvotes: 0

Views: 1339

Answers (2)

Marcos Gonzales
Marcos Gonzales

Reputation: 41

In order to fix the issue i had to add options to my io declaration as follows.

const server = require('http').createServer(app);
const options = {
  cors: true,
  origins: ['http://127.0.0.1:3000'],
};
const io = require('socket.io')(server, options);

127.0.0.1 being home and on client side my server is on 3000 so that's where that comes from. and on the client side you were right i had to remove "getallmessages" route so now it is as follows.

onst ENDPOINT = 'http://localhost:4000/';
  var socket = io(ENDPOINT);

  const messagesEndRef = useRef(null);

  const scrollToBottom = () => {
    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
  };

  useEffect(() => {
    socket.on('connect', () => {
      socket.send('hello');
      console.log('connected.');
    });
    console.log(socket);
  }, []);

Upvotes: 2

Sukitha Jayasinghe
Sukitha Jayasinghe

Reputation: 38

socket.io is bound to the server object so you should listen to the server instead of the app.

  • Change app.listen to server.listen
  • Change endpoint by removing getallmessages if you are not using namespaces

Upvotes: 0

Related Questions