Build Scaleable Realtime Chat App with NextJS and NodeJS Tutorial

Поділитися
Вставка
  • Опубліковано 1 чер 2024
  • Signup in Aiven console.aiven.io/signup?refer...
    Hey Everyone, In this video, we will build a scaleable socket real-time application using Redis on Aiven cloud. We'll see how to use Redis PubSub architecture to scale our web sockets.
    Quick Links
    Full Stack Twitter Clone learn.piyushgarg.dev/learn/tw...
    Docker Course learn.piyushgarg.dev/learn/do...
    Master NextJS 14 learn.piyushgarg.dev/learn/ne...
    Source Code github.com/piyushgarg-dev/Sca...
    Whiteboard Link app.eraser.io/workspace/6CGlE...
    Timeline
    00:00 Introduction
    00:50 Scalable Architecture
    05:00 Turo Repo Project Setup
    07:35 Setting up NodeJS Socket Server
    20:00 Building Full Stack Chat Application
    37:42 Setting up Redis on aiven.io
    42:24 Connecting with Redis Pub-Sub
    47:00 Subscribing to Redis Events
    52:15 Testing our Scalebale Chat Application
    Video Titles
    - How to Build Realtime Chat Application
    - Real-Time Chat App with Nodejs
    - How to Scale WebSockets using Redis
    - Redis PUB/SUB Architecture
    Hashtags
    #redis #nodejs #nextjs #nextjs14 #fullstackwebdevelopment #chatapp #socketio #websocket #webdevelopment #opensource #javascript #reactjs

КОМЕНТАРІ • 111

  • @shivamkumarraut9682
    @shivamkumarraut9682 5 місяців тому +11

    Hey Piyush you are making amazing videos the 55 mins was full packed of knowledge no bakwas nothing pure tech Keep it up bro, bring on

  • @ayushdwivedi8309
    @ayushdwivedi8309 5 місяців тому +7

    Now, this is something super incredible! Loved it sir, Thanks a lot 🌟

  • @shashankpandey8346
    @shashankpandey8346 18 днів тому

    Aap ko hitesh sir ne introduce kiye mujhe, aur ab aap mere favorite list pe no. 3 pe ho. Bohot badiya kaam kartey ho maksood bhai.
    Instead of desperately relying on clones and styling, you focus on functionalities and trying different corners of techs. Great.

  • @ManadayMavani
    @ManadayMavani 5 місяців тому +2

    Amazing and to the point tut mate! Just finished implementing along with your video and it was a fun coding exercise. Thanks much!! 😇

  • @siddhantota2857
    @siddhantota2857 5 місяців тому +1

    Your content is literally of premium quality. ❤️

  • @MuhammadSulaiman1
    @MuhammadSulaiman1 5 місяців тому +1

    your effort is good for both beginner and intermediate developers. I really appreciate your efforts. ❣ +subscribed

  • @user-mn6sq3is4t
    @user-mn6sq3is4t 5 місяців тому +1

    Hi Piyush you are very talented and underrated hopefully channel will grow best wishes

  • @aayushvinay1492
    @aayushvinay1492 3 місяці тому +1

    Thankyou for this amazing content. I've learned a lot of new things!! Entire 55 mins packed with plethora of useful and meaningful information. ❤

  • @growwithriu
    @growwithriu 5 місяців тому +1

    This is called quality tech content 😇

  • @sulmanahmad6943
    @sulmanahmad6943 5 місяців тому +2

    Great, you always make unique content videos 👍

  • @bharathkesari7350
    @bharathkesari7350 5 місяців тому +1

    Nice Video man, loved it! I will learn these things one day

  • @suvrajitmondal2325
    @suvrajitmondal2325 5 місяців тому +16

    Hello sir react mein video player kaise banate hai? With abs support. Aur youtube jaisa sab functionality chahiye

    • @abcproduction6819
      @abcproduction6819 5 місяців тому

      Go ask your mom

    • @punk9004
      @punk9004 5 місяців тому +4

      Cohort ka question leka aya hai Kya?? 😆

    • @skzahirulislam2820
      @skzahirulislam2820 5 місяців тому +1

      ​@@punk9004konsi cohort?

    • @lonewaters
      @lonewaters 4 місяці тому +4

      ​@@abcproduction6819 Bhai Banda acha puch Raha hai nahi aata to mat batta bakchodi kyu kar Raha hai

  • @kushagragoyal6000
    @kushagragoyal6000 5 місяців тому +2

    i think the redis adapter feature in socketio does the same task, please correct me if i am wrong ?

  • @S4LTYT
    @S4LTYT 5 місяців тому +2

    I found another amazing tech channel.
    Please make video on design patterns.

  • @sumitsahu8657
    @sumitsahu8657 2 місяці тому

    Congratulations for reaching 100k subscribers Piyush 🎉

  • @codewithsanjay
    @codewithsanjay 5 місяців тому +2

    Very useful video. You covered everything from frontend like next.js, to backend like node, express and redis.

  • @Techie2615
    @Techie2615 5 місяців тому

    Thanks a lot for this project. will surely enhance it by myself now.

  • @jack10233
    @jack10233 5 місяців тому +2

    Hi, I have one question. Can we use a load balancer to handle the multiple requests. Can we do??

  • @PrantikNoor
    @PrantikNoor 5 місяців тому +3

    Very helpful video. But I have a question. All the traffic go to the redis pub/sub. How much it can handle? what If we need to scale this?

  • @hiteshpakhan7783
    @hiteshpakhan7783 5 місяців тому

    i am learnings really new things here thanks to you yesterday it was the video about kafka and today this thanks for this

  • @garudkardnyaneshwar3426
    @garudkardnyaneshwar3426 5 місяців тому

    Man thanks for this this is very helpful ❤

  • @RaoAnkitYadav-cv5sg
    @RaoAnkitYadav-cv5sg 5 місяців тому

    Beneficial video.
    Thank you, bro.
    Please make video on video streaming.

  • @ceo_google
    @ceo_google 5 місяців тому

    Hi Piyush, thanks for the vid, I completed the project while almost having a headache when I named a file ts instead of tsx. There was no helpful error message, just syntax error. I even copied your code but to no avail. I even double checked every configuration. At the end I downloaded and ran your github code, it succeeded to run, so I replaced the server part of my code with your code to check the git difference. It was a freaking file extension. Took me hour or two to find...
    Anyways, I had a query, when I checked turborepo, there was turbopack as well as it's successor. Why didn't you use that if it just succeeds turborepo, was there any specific reason?

  • @bitwamet
    @bitwamet 5 місяців тому +1

    Hi piyush what is the color theme that u are using?

  • @kunj_kanani
    @kunj_kanani 5 місяців тому

    Very good content. Need more on youtube.

  • @shivanijha7875
    @shivanijha7875 4 місяці тому

    Hi piyush apne starting me yarn PE Jake enter kaise Kiya tha , i m using down arrow key but wo Kam ny kr raha , arrow move hi ny ho raha is there is any other alternative

  • @Only_Open_Source
    @Only_Open_Source 5 місяців тому

    bhaiya can u please tell me which extension are you using for these files icon ?

  • @rituparnaw
    @rituparnaw 3 місяці тому

    Amazing video ! Thank you for the content !
    One doubt that I had is,
    We create multiple instances of server because one server is not capable of handling so many requests.
    But then we are also connecting all of the server instances to a centralized place (redis, in this video) to transfer requests from all servers to all other servers. So doesn't that increase the load on the broker (redis) ?
    The broker would have the load of all the instances combined. So why do we have multiple instances of web server and a huge powerful broker instead of having a single powerful server that can handle so many requests ?

  • @narayanmaity5881
    @narayanmaity5881 5 місяців тому

    Hey Piyush, loved your videos, I was thinking you could make video on node express authentication with serverless.

  • @mrsecretstatus9999
    @mrsecretstatus9999 5 місяців тому

    I need curd operations in mern stack, can I directly start this tutorial? No knowledge about Next js

  • @SumitChauhan-je1yc
    @SumitChauhan-je1yc 3 місяці тому

    Hi piyush, can we achive the same using PM2. How would that be different in terms of scaling ?

  • @_PiyushKumar-vv7ui
    @_PiyushKumar-vv7ui 5 місяців тому

    Nice video, please share your vs code theme, or please tell how your { } blocks are getting highlighted. I find it very useful.

  • @renurani315
    @renurani315 5 місяців тому

    hy piyush sir i ma very confused what to choose webdev,data science and devop please tell.

  • @ajaymishra1511
    @ajaymishra1511 2 місяці тому

    I didn't understand the role of redis if it's storing data on cloud thn what's the point of using it.ill have to query to retrieve data each time which will go to the server if it's found the data ill
    Response back to request if i didn't found the data ill search it in db and save it in redis and response back
    In both cases it takes around same amount of time to retrieve data . Redis aint storing it in my server anywhere
    Please someone enlighten me i am really confused

  • @ayush1344
    @ayush1344 2 місяці тому

    Piyush SIr, cant we setup Socket Io in app/api folder ?? please reply , im struggling setting it up

  • @amritsharma7553
    @amritsharma7553 5 місяців тому +1

    Loved the video but this solution won’t work for one to one chat because you need to store the service id and the socker id of all the users.
    which user is connected to which socket server.
    if possible please make a video on this topic.

  • @_034_divyanshusrivastava6
    @_034_divyanshusrivastava6 Місяць тому +1

    How to deploy this project?

  • @AapkaHostRick_
    @AapkaHostRick_ 4 місяці тому

    Wow!! Fantastic tutorial 😮😮🎉🎉

  • @dev-rp-4444
    @dev-rp-4444 3 місяці тому

    One Question for all
    Why do we need the node server with a socket connection, we can directly use the Redis Pub Sub method right on the client itself.

  • @snehasish-bhuin
    @snehasish-bhuin 5 місяців тому

    Great video, need videos on k8s

  • @aniketchanana2358
    @aniketchanana2358 Місяць тому

    Why we creates 2 instances of ioredis? i mean we could have created redis = new Redis(); and use same instance for publishing messages and listening messages, any logical reason for creating 2 different instances?

  • @skzahirulislam2820
    @skzahirulislam2820 5 місяців тому +1

    Bro ek video tanstack query vs redux toolkit pe bana do plz. Mujhe tanstack sikhna hai but mein confuse hun ki kaha tanstack use karna hai aur kaha redux toolkit. Plz ek detailed video bana do pure youtube pe kahi nahi mila

  • @leftover3857
    @leftover3857 2 місяці тому

    Everything is working fine but...
    when I try to send message from Redisinsight, just to see if it works, it does not.
    Error : Uncaught (in promise) SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data
    obviously, it's not appended to the list of messages but my question is, in which form, dose redis send this message.
    I published Hello world on channel messages

  • @amansarma417
    @amansarma417 5 місяців тому

    How do we scale the redis DB as the number of message increases.

  • @ayushgupta8538
    @ayushgupta8538 2 місяці тому

    Thank you for the lecture

  • @saksham_1612
    @saksham_1612 5 місяців тому

    Amazing! as always

  • @shreyaspatange8653
    @shreyaspatange8653 5 місяців тому +1

    Which vscode theme you using ?

  • @Radhashreeradha
    @Radhashreeradha 5 місяців тому

    @piyushgarg sir yai jo aap package.json ko aasani se itna handle kar lete ho ham kaise har jagah samje ki kya karna hai. It's there any video, can you create for that can help mostly developer.

  • @niraz9701
    @niraz9701 5 місяців тому

    Amazing, please sir make a detail video with rabbitmq with nodejs

  • @faizanashiq588
    @faizanashiq588 4 місяці тому +1

    Subscribed...
    But one thing is missing. how to effectively manage one to one chats?

  • @princemishra01
    @princemishra01 5 місяців тому +1

    Broo How are you so good coder and how you remember all these things. you does things so fast . wow . how can i become like that .

  • @drugzgamerz7348
    @drugzgamerz7348 Місяць тому

    thank you for posting

  • @CoderBB
    @CoderBB 5 місяців тому

    Any plan for building production level SaaS app ?

  • @thestarters9799
    @thestarters9799 5 місяців тому

    What if we need Horizontal Scaling of Redis servers?

  • @vikasgavandi488
    @vikasgavandi488 5 місяців тому

    Very Crisp videos ❤

  • @mystic_monk55
    @mystic_monk55 5 місяців тому

    Great video 👏👏

  • @shivamsingh7219
    @shivamsingh7219 4 місяці тому

    What if redis breaks while redis got the message but its sending to other server that subscribes the channel ?

  • @simraankhan23
    @simraankhan23 4 місяці тому

    Superb bro love u❤

  • @tofpgaming666
    @tofpgaming666 4 місяці тому

    piyush sir please reply, aur jab user ki 100K + messages database se aayenge to use kese manage karenge

  • @user-kb6sy4lf1m
    @user-kb6sy4lf1m 5 місяців тому

    Nice video sir 👍👍👍

  • @nikhilsolanki8960
    @nikhilsolanki8960 5 місяців тому +1

    Hello bro, i check your linkedln and found that you are bca graduate. I want to know how did you get international package as a bca graduate.

  • @vishalkhoje
    @vishalkhoje 5 місяців тому

    Good video, How we can send message user A to user B? Currently in you video we are sending broadcast message to all users.

  • @itsyourronit
    @itsyourronit Місяць тому

    Can I build my own reddis server instead of using cloud

  • @skzahirulislam2820
    @skzahirulislam2820 5 місяців тому

    Bhai ek request hai plz ek pagination aur inifinite scroll ke upar bhi video banaye bahut jada ye topic pucha jata hai interviews mein react.js, node.js mein. Aur konsa kab use karna hai wo bhi bata dijiyega indepth banaye ga bhai

  • @wahikedeewane2682
    @wahikedeewane2682 5 місяців тому

    piyush rock ❤‍🔥❤‍🔥

  • @anuragdas1978
    @anuragdas1978 5 місяців тому +2

    Could you please teach us how to deploy this project, as there are many questions as to how to deploy a backend ?. Is there a separate way to deploy a backend with sockets, what are the required changes in redis hosted on aiven if we want to deploy it ? We can extend many functionalities to this application, but again the bottle neck is often the part where we have to deploy an application such as this, using many technologies which are new for most of us here. So could you please bring a dedicated part extending this just on deployment of a mono repo such as this ?

    • @hi-tk4hu
      @hi-tk4hu 3 місяці тому

      yup you will need something like EC2

  • @syndg
    @syndg 5 місяців тому +1

    Hey Piyush, loved the video!🤍🤍 I have a question, in the production environment, where should our socket client connect to? How do I find the url where the server is running?

  • @rootbattlegrounds7948
    @rootbattlegrounds7948 5 місяців тому

    Bhai kitna knowledge rakhte ho ...😀

  • @surajbhardwaj2599
    @surajbhardwaj2599 5 місяців тому +1

    vs code theme ?

  • @shravan2891
    @shravan2891 5 місяців тому

    Finally monorepo❤

  • @aashishsinghal7331
    @aashishsinghal7331 4 місяці тому

    Great Video, had one doubt, can we deploy this on vercel ?, if not what would you suggest for deployment,

    • @Anshucodes
      @Anshucodes 4 місяці тому

      only the frontend app not the backend !

  • @vijaykoladara8302
    @vijaykoladara8302 5 місяців тому

    Can you please make full course on Mern stack developement paid or free ?

  • @milon27
    @milon27 5 місяців тому

    how to deploy?

  • @armishk8877
    @armishk8877 5 місяців тому +1

    When the load on the server increased due to tons of clients then, Do we need to create a different ws server or not because you have made only one server and you are running that server on different ports but on one server the load can increase?

    • @user-yf3zk2qq9f
      @user-yf3zk2qq9f 4 місяці тому +1

      I think you misunderstood. He did ran three different server at port 8000,8001 and 8002,but for demonstration purpose he used the same system.

    • @hi-tk4hu
      @hi-tk4hu 3 місяці тому

      ​@@user-yf3zk2qq9fbut the client is still connected to server with port8000 so technically other aren't working?

  • @siddharthmovaliya7963
    @siddharthmovaliya7963 5 місяців тому

    Hey Piyush, nice video. Is it possible to make it without nodejs like just pure nextjs? Can you give a little explanation.

  • @Uzaifm127
    @Uzaifm127 5 місяців тому +1

    Next video on ShadCN ui library.

  • @thetoxicguy4783
    @thetoxicguy4783 5 місяців тому +1

    If you don't mind can you say which color theme are you using ?

  • @PATELKRUNALMAHESHBHAI
    @PATELKRUNALMAHESHBHAI 5 місяців тому

    Can anyone here tell me how to install yarn packages? As I'm running npx command it showing 4 packages including yarn package but it is showing it's not installed. So I'm not able to download yarn packages.

    • @AnuragSharma-2782
      @AnuragSharma-2782 5 місяців тому

      You can use npm also but if u want to install yarn and already have npm then in cmd use this command
      npm install --global yarn
      This command will install yarn in ur system

  • @adeeltamboli1659
    @adeeltamboli1659 5 місяців тому +1

    To Hamare pass kya hai 😅 , hamare pass hai error 😂😂

  • @returnZeroo
    @returnZeroo 20 днів тому

    I guess now you have to think about scale of redis

  • @glazefrect1337
    @glazefrect1337 5 місяців тому

    Hey bro, I am getting the following error, when running the command at 11:00, can someone please tell me what is the problem :
    node:internal/modules/cjs/loader:1147
    throw err;
    ^
    Error: Cannot find module 'D:\Web_dev\Projects\Chat app\Chado\apps\server\dist\index.js'
    at Module._resolveFilename (node:internal/modules/cjs/loader:1144:15)
    at Module._load (node:internal/modules/cjs/loader:985:27)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:135:12)
    at node:internal/main/run_main_module:28:49 {
    code: 'MODULE_NOT_FOUND',
    requireStack: []
    }
    Node.js v21.4.0

    • @growwithriu
      @growwithriu 5 місяців тому

      in your tsconfig.json file under server/, ensure you have changed the outDir to ./dist
      "outDir": "./dist",

  • @KapilSharma-mi8tx
    @KapilSharma-mi8tx 5 місяців тому

    Sir scalable ecommerce with next js

  • @wilbertdune
    @wilbertdune 3 місяці тому

    English version please.

  • @abhishek22x1
    @abhishek22x1 5 місяців тому

    blue ray glasses

  • @princemishra01
    @princemishra01 5 місяців тому

    develpement is so complecated

  • @shivammoradia3732
    @shivammoradia3732 5 місяців тому

    Non Techy:- Ushse achha sab ko call karke Messege de deta hu

  • @sahilgagan2242
    @sahilgagan2242 4 місяці тому

    dfd

  • @sahilgagan2242
    @sahilgagan2242 4 місяці тому

    .

  • @MohamedElguarir
    @MohamedElguarir 3 місяці тому

    what's the point of an english title if you're not going to talk english lol?

  • @blkmlk
    @blkmlk 4 місяці тому

    why are you speaking half english half indian