How To Create A Messaging App With Socket.io And React
Why Stack Overflow recommends it
Stack Overflow users cite it as the tutorial they were following when they hit errors with React hooks, context providers and Socket.io connections.
Recommended by 1 people across 1 different months, 2020 to 2022.
What it is
A 1h44m build-along tutorial from Web Dev Simplified that creates a WhatsApp-style messaging app using React and Socket.io. It covers custom React hooks, custom contexts, a local storage hook, contact and conversation modals, and a Node socket server.
What people said
Recommends pl-jay · 2022-01 · Stack Overflow · on “Uncaught Error: Element type is invalid: React”
I'm following this [this video] Tutorial for build WhatsApp clone, but i'm using latest version of React and react-router-dom, And whenever i'm start new conversation it should renders this component, instead of that, it renders nothing. OpenConversation.js import React, { useState, useCallback } from 'react' import { Form, InputGroup, Button } from 'react-bootstrap' import { useConversations } from '../contexts/ConversationsProvider'; export default function OpenConversation() { const [text, setText] = useState('') const setRef = useCallback(node => { if (node) { node.scrollIntoView({ smooth: true }) } }, []) const { sendMessage, selectedConversation } = useConversations() function handleSubmit(
Cites Aaron · 2020-10 · Stack Overflow · on “POST Error 404(localhost:3000) || GET Error ERR_CONNECTION_REFUSED(localhost:5000) with socket.io/nodemoon/react”
I am currently following a tutorial from webDevSimplified youtube : [this video] github repo : [LINK] I have compared my code with the repo countless times and also read socket.io's documentation but to no avail. There are already fair a few threads out there with a similar issue but many have been left unanswered or simply have a completely different setup. I have used yarn package manager for the project instead of npm as shown in the tutorial but I doubt this is the culprit. I have all required dependencies installed. Let's begin with server.js const io = require('socket.io')(5000) // I changed it to 3000 but just got a different Error(see title) io.on('connection', socket => { const id = sock
Cites Aaron · 2020-10 · Stack Overflow · on “Cannot read property 'map' of undefined - React Custom Hooks / useContext one works / one doesn't”
I am currently following a tutorial on youtube building a whatsapp clone with react and socket.io from webDevSimplified: [this video] and here the main repo : ' [LINK] I got stuck halfway through as for some reason my custom useConversation hook returns undefined while my useContacts hook works without any problems. Here the setup: App.js : import Dashboard from "./Dashboard"; import { ContactsProvider } from "../contexts/ContactsProvider"; import { ConversationsProvider } from "../contexts/ConversationsProvider"; import Test from "../components/test";///test console.log(Test)//test purpose function App() { const [id, setId] = useLocalStorage("id"); const dashboard = ( <ContactsProvider> <Convers
Cites Rhinozz · 2021-02 · Stack Overflow · on “Invalid Hook Call in React, but it works for others”
I am a very, very amateur programmer but I've been trying to get into JavaScript and ReactJS recently. It's not pretty and I don't know what most of the stuff does, but I figured I would follow a YouTube tutorial on some things that I was interested in, so I found one [this video] that I liked and followed it. However, at 8:52 [this video] , React threw up an Invalid Hook Call error. My problem is, even though I'm pretty sure the documentation has a solution, my amateur level doesn't allow for me to read it and understand it. Basically: I have no idea what the docs say. Below is an attached screenshot of the error (there's more, if anyone requests for me to scroll down) and the link to the completed c
Cites Charles Yu · 2022-04 · Stack Overflow · on “React/Socket.io client not connecting to server when deployed to Heroku”
I'm following this tutorial: [this video] Locally, the app works fine - I can open up some windows and have them talk to each other. However, when I try to deploy the app to Heroku, the clients no longer connect to the server. Server-side: const express = require('express'); const cors = require('cors'); const socket = require('socket.io'); const dotenv = require('dotenv'); dotenv.config({ path: './config.env' }); const app = express(); app.use(cors()); const port = process.env.PORT || 8080; const server = app.listen(port, () => { console.log(`App running on port ${port}`); }); const http = require('http').Server(app); const io = socket(http, { pingInterval: 100, pingTimeout: 500, cors: { origin:
Cites pawel_s · 2022-12 · Stack Overflow · on “Andvanced brain teaser with React useEffect && JavaScript object”
I store it in useContext to avoid props drilling. My structure is like in this video: [this video] or very similar