socket.io insufficient resources - react js and node

Viewed 9

I'm experimenting a bit with socket.io to create a chat app in real time. Everything seems to work fine but after a few second socket.io gives me this error:

"websocket.js:50 WebSocket connection to 'ws://localhost:5000/socket.io/?EIO=4&transport=websocket&sid=gbx90aAo73oDoP86AAVP' failed: Insufficient resources"

What am I doing wrong?

Client

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

const App = () => {
  const [conv, setConv] = useState([]);
  const [input, setInput] = useState({
    sender: "user",
    text: "",
  });

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

  const handleChange = (e) => {
    setInput({
      sender: "user",
      text: e.target.value,
    });
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    socket.emit("input", input);
  };

  useEffect(() => {
    socket.on("output", (data) => {
      setConv(data[0].messages);
    });
  }, [conv]);

  return (
    <div className="App">
      <form onSubmit={handleSubmit}>
        <h1>chat</h1>
        <div id="messages">
          {conv.map((msg, index) => (
            <div key={index}>
              <p>
                {msg.sender}: {msg.text}
              </p>
            </div>
          ))}
        </div>
        <input onChange={handleChange} type="text" />
        <input type="submit" />
      </form>
    </div>
  );
};
export default App;

Server

const express = require("express");
const socketIo = require("socket.io");
const http = require("http");
const PORT = 5000;
const app = express();
const server = http.createServer(app);
const io = socketIo(server, {
  cors: {
    origin: "http://localhost:3000",
  },
}); //in case server and client run on different urls
const MongoClient = require("mongodb").MongoClient;

MongoClient.connect("mongodb://localhost:27017", (err, db) => {
  if (err) throw err;
  console.log("connected");

  const database = db.db("local");
  const chat = database.collection("chat");

  //connect to socket .io
  io.on("connection", (socket) => {
    // get chat from collection
    chat.find().toArray((err, res) => {
      if (err) throw err;

      // emit the messages
      socket.emit("output", res);
    });

    //handle input events
    socket.on("input", (input) => {
      let sender = input.sender;
      let receiver = "bot";
      let text = input.text;

      // check if inside chat collection the members array contains the sender and receiver
      chat.find({ members: { $all: [sender, receiver] } }).toArray((err, res) => {
          if (err) throw err;
          let senderInDb = res[0].members[0];
          let receiverInDb = res[0].members[1];

        //if yes then push the message to the messages array  
          if (sender === senderInDb && receiver === receiverInDb) {
            chat.updateOne(
              { members: { $all: [sender, receiver] } },
              { $push: { messages: { sender: sender, text: text } } }
            );
          }
        });
    });
  });
});

server.listen(PORT, (err) => {
  if (err) console.log(err);
  console.log("Server running on Port ", PORT);
});
0 Answers
Related