Websockets/react - net::ERR_CONNECTION_REFUSED

silvercut · November 18, 2019, 8:50am

Hi there,

I am coding along the following : https://www.youtube.com/watch?v=ZwFA3YMfkoc&t=234s

At the 1 hour 16 stage, i have come across an error when i try to enter the chat message:

GET http://localhost:5000/socket.io/?EIO=3&transport=polling&t=MvziWt_ net::ERR_CONNECTION_REFUSED

TypeError: Cannot read property 'room' of undefined
    at Socket.socket.on (C:\Users\Yaz\react projects\chat-app-3\server\index.js:38:16)
    at Socket.emit (events.js:198:13)
    at C:\Users\Yaz\react projects\chat-app-3\server\node_modules\socket.io\lib\socket.js:528:12
    at process._tickCallback (internal/process/next_tick.js:61:11)
[nodemon] app crashed - waiting for file changes before starting...

I can’t quite see what is happening and why it would throw an error (new to sockets). the error is either in the front-end (Chat.js) or server (index.js):

github.com

SilvercutYaz/chat-app/blob/master/client/src/components/Chat/Chat.js

import React, { useState, useEffect } from "react";
import queryString from "query-string";
import io from "socket.io-client";

let socket;

//location returns the url. parse returns the url in object form
const Chat = ({ location }) => {
  const [name, setName] = useState("");
  const [room, setRoom] = useState("");
  const [message, setMessage] = useState("");
  const [messages, setMessages] = useState([]);

  const ENDPOINT = "localhost:5000";
  //useEffect is equivalent to componentdidMount,componenentdidUpdate
  useEffect(() => {
    const { name, room } = queryString.parse(location.search);

    console.log(name);
    socket = io(ENDPOINT);

This file has been truncated. show original

github.com

SilvercutYaz/chat-app/blob/master/server/index.js

const express = require("express");
const socketio = require("socket.io");
const http = require("http");

const { addUser, removeUser, getUser, getUsersInRoom } = require("./users.js");

const PORT = process.env.PORT || 5000;

const router = require("./router");

const app = express();
const server = http.createServer(app);
const io = socketio(server);

io.on("connection", socket => {
  socket.on("join", ({ name, room }, callback) => {
    const { error, user } = addUser({ id: socket.id, name, room });

    if (error) return callback(error);

This file has been truncated. show original

Completed repo is below:

I would appreciate your help to see why is there an error so i can understand sockets more.

thanks,
yaz

caro1 · July 16, 2020, 11:08pm

I’m having the same issue and following the same video, did you ever figure it out?

soumyab95 · November 18, 2020, 3:40pm

Hey,

I was facing a similar issue.
Turns out , it has got to do something with the port number 5000.
I changed my port to some random port (3030 for eg.) and everything worked as expected.

Ayotunde24 · January 3, 2021, 11:54am

Hi there, I faced a similar issue
Just add this to your server
Const io=socketio(server,{cors:{
origin:‘http://localhost:3000’,
methods:[‘GET’,‘POST’],
credentials:true
}
})
This worked for me

Topic		Replies	Views
Can someone help me figure out why my React + Socket.io app does not work on mobile using Chrome/Safari?	6	4381	January 16, 2021
React: Unable to execute sockets in ComponentDidMount() JavaScript	1	290	June 1, 2021
Sending data via websockets vs api route Backend Development	3	343	January 23, 2023
React this.setState() Issues JavaScript	11	739	March 7, 2023
TypeError: Cannot read property 'url' of undefined JavaScript	3	10735	February 2, 2021

Websockets/react - net::ERR_CONNECTION_REFUSED

Related topics