Build Scaleable Realtime Chat App with NextJS and NodeJS Tutorial

Поделиться
HTML-код
  • Опубликовано: 15 июл 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

Комментарии • 121

  • @ayushdwivedi8309
    @ayushdwivedi8309 7 месяцев назад +9

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

  • @shivamkumarraut9682
    @shivamkumarraut9682 7 месяцев назад +14

    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

  • @ManadayMavani
    @ManadayMavani 6 месяцев назад +2

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

  • @aayushvinay1492
    @aayushvinay1492 4 месяца назад +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. ❤

  • @siddhantota2857
    @siddhantota2857 7 месяцев назад +1

    Your content is literally of premium quality. ❤️

  • @shashankpandey8346
    @shashankpandey8346 2 месяца назад

    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.

  • @bharathkesari7350
    @bharathkesari7350 7 месяцев назад +1

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

  • @MuhammadSulaiman1
    @MuhammadSulaiman1 7 месяцев назад +1

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

  • @growwithriu
    @growwithriu 6 месяцев назад +1

    This is called quality tech content 😇

  • @hiteshpakhan7783
    @hiteshpakhan7783 7 месяцев назад

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

  • @Techie2615
    @Techie2615 7 месяцев назад

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

  • @user-zh3bg6os9r
    @user-zh3bg6os9r 7 дней назад

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

  • @sulmanahmad6943
    @sulmanahmad6943 7 месяцев назад +2

    Great, you always make unique content videos 👍

  • @haritpatel5001
    @haritpatel5001 Месяц назад +1

    The most useful and insightful video on this topic, thanks for the detailed explanation Piyush.

  • @user-mn6sq3is4t
    @user-mn6sq3is4t 7 месяцев назад +1

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

  • @garudkardnyaneshwar3426
    @garudkardnyaneshwar3426 7 месяцев назад

    Man thanks for this this is very helpful ❤

  • @codewithsanjay
    @codewithsanjay 7 месяцев назад +2

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

  • @S4LTYT
    @S4LTYT 7 месяцев назад +2

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

  • @saksham_1612
    @saksham_1612 7 месяцев назад

    Amazing! as always

  • @kunj_kanani
    @kunj_kanani 7 месяцев назад

    Very good content. Need more on youtube.

  • @AapkaHostRick_
    @AapkaHostRick_ 6 месяцев назад

    Wow!! Fantastic tutorial 😮😮🎉🎉

  • @RaoAnkitYadav-cv5sg
    @RaoAnkitYadav-cv5sg 7 месяцев назад

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

  • @ayushgupta8538
    @ayushgupta8538 3 месяца назад

    Thank you for the lecture

  • @drugzgamerz7348
    @drugzgamerz7348 2 месяца назад

    thank you for posting

  • @sumitsahu8657
    @sumitsahu8657 4 месяца назад

    Congratulations for reaching 100k subscribers Piyush 🎉

  • @vikasgavandi488
    @vikasgavandi488 7 месяцев назад

    Very Crisp videos ❤

  • @mystic_monk55
    @mystic_monk55 7 месяцев назад

    Great video 👏👏

  • @snehasish-bhuin
    @snehasish-bhuin 7 месяцев назад

    Great video, need videos on k8s

  • @simraankhan23
    @simraankhan23 5 месяцев назад

    Superb bro love u❤

  • @narayanmaity5881
    @narayanmaity5881 7 месяцев назад

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

  • @wahikedeewane2682
    @wahikedeewane2682 7 месяцев назад

    piyush rock ❤‍🔥❤‍🔥

  • @user-kb6sy4lf1m
    @user-kb6sy4lf1m 7 месяцев назад

    Nice video sir 👍👍👍

  • @adeeltamboli1659
    @adeeltamboli1659 7 месяцев назад +7

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

  • @niraz9701
    @niraz9701 7 месяцев назад

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

  • @shravan2891
    @shravan2891 7 месяцев назад

    Finally monorepo❤

  • @_PiyushKumar-vv7ui
    @_PiyushKumar-vv7ui 7 месяцев назад

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

  • @princemishra01
    @princemishra01 7 месяцев назад +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 .

  • @suvrajitmondal2325
    @suvrajitmondal2325 7 месяцев назад +16

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

    • @abcproduction6819
      @abcproduction6819 7 месяцев назад

      Go ask your mom

    • @punk9004
      @punk9004 6 месяцев назад +4

      Cohort ka question leka aya hai Kya?? 😆

    • @skzahirulislam2820
      @skzahirulislam2820 6 месяцев назад +1

      ​@@punk9004konsi cohort?

    • @lonewaters
      @lonewaters 6 месяцев назад +4

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

  • @rootbattlegrounds7948
    @rootbattlegrounds7948 6 месяцев назад

    Bhai kitna knowledge rakhte ho ...😀

  • @PrantikNoor
    @PrantikNoor 7 месяцев назад +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?

  • @kushagragoyal6000
    @kushagragoyal6000 7 месяцев назад +2

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

  • @rishiraj2548
    @rishiraj2548 27 дней назад

    🎉

  • @rituparnaw
    @rituparnaw 4 месяца назад

    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 ?

  • @jack10233
    @jack10233 7 месяцев назад +2

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

  • @ceo_google
    @ceo_google 7 месяцев назад

    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?

  • @dev-rp-4444
    @dev-rp-4444 5 месяцев назад +1

    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.

  • @Radhashreeradha
    @Radhashreeradha 7 месяцев назад

    @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.

  • @skzahirulislam2820
    @skzahirulislam2820 7 месяцев назад +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

  • @bitwamet
    @bitwamet 7 месяцев назад +1

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

  • @faizanashiq588
    @faizanashiq588 6 месяцев назад +1

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

  • @shivanijha7875
    @shivanijha7875 5 месяцев назад

    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

  • @SumitChauhan-je1yc
    @SumitChauhan-je1yc 5 месяцев назад

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

  • @amritsharma7553
    @amritsharma7553 7 месяцев назад +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.

  • @mrsecretstatus9999
    @mrsecretstatus9999 7 месяцев назад

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

  • @syndg
    @syndg 7 месяцев назад +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?

  • @mohiwalla
    @mohiwalla Месяц назад +1

    Thanks for breaking my superiority complex so badly.. you won sir.

  • @shreyaspatange8653
    @shreyaspatange8653 7 месяцев назад +1

    Which vscode theme you using ?

  • @skzahirulislam2820
    @skzahirulislam2820 6 месяцев назад

    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

  • @renurani315
    @renurani315 7 месяцев назад

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

  • @Uzaifm127
    @Uzaifm127 7 месяцев назад +1

    Next video on ShadCN ui library.

  • @returnZeroo
    @returnZeroo 2 месяца назад

    I guess now you have to think about scale of redis

  • @ayush1344
    @ayush1344 3 месяца назад

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

  • @CoderBB
    @CoderBB 7 месяцев назад

    Any plan for building production level SaaS app ?

  • @aniketchanana2358
    @aniketchanana2358 2 месяца назад

    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?

  • @vishalkhoje
    @vishalkhoje 6 месяцев назад

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

  • @anuragdas1978
    @anuragdas1978 6 месяцев назад +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 5 месяцев назад

      yup you will need something like EC2

  • @amansarma417
    @amansarma417 7 месяцев назад

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

  • @ajaymishra1511
    @ajaymishra1511 3 месяца назад

    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

  • @tofpgaming666
    @tofpgaming666 6 месяцев назад

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

  • @thestarters9799
    @thestarters9799 7 месяцев назад

    What if we need Horizontal Scaling of Redis servers?

  • @TechnicalYarana
    @TechnicalYarana День назад +1

    brother can i use this in shared hosting ???

  • @aashishsinghal7331
    @aashishsinghal7331 6 месяцев назад

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

    • @Anshucodes
      @Anshucodes 5 месяцев назад

      only the frontend app not the backend !

  • @siddharthmovaliya7963
    @siddharthmovaliya7963 6 месяцев назад

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

  • @leftover3857
    @leftover3857 4 месяца назад

    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

  • @nikhilsolanki8960
    @nikhilsolanki8960 7 месяцев назад +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.

  • @shivamsingh7219
    @shivamsingh7219 5 месяцев назад

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

  • @thetoxicguy4783
    @thetoxicguy4783 7 месяцев назад +1

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

  • @lakhdeepsingh5883
    @lakhdeepsingh5883 23 дня назад

    can anybody help ? how to download the source code and run on local machine , i have downloaded the folder, opened in vs code , i did npm install to download dependencies , after that when i do npm start or npm run dev, it is giving error,
    Please help

  • @abhishek22x1
    @abhishek22x1 7 месяцев назад

    blue ray glasses

  • @surajbhardwaj2599
    @surajbhardwaj2599 7 месяцев назад +1

    vs code theme ?

  • @armishk8877
    @armishk8877 6 месяцев назад +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 5 месяцев назад +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 5 месяцев назад

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

  • @milon27
    @milon27 7 месяцев назад

    how to deploy?

  • @_034_divyanshusrivastava6
    @_034_divyanshusrivastava6 3 месяца назад +1

    How to deploy this project?

  • @itsyourronit
    @itsyourronit 2 месяца назад

    Can I build my own reddis server instead of using cloud

  • @vijaykoladara8302
    @vijaykoladara8302 7 месяцев назад

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

  • @PATELKRUNALMAHESHBHAI
    @PATELKRUNALMAHESHBHAI 6 месяцев назад

    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 6 месяцев назад

      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

  • @Only_Open_Source
    @Only_Open_Source 7 месяцев назад

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

  • @wilbertdune
    @wilbertdune 4 месяца назад

    English version please.

  • @glazefrect1337
    @glazefrect1337 7 месяцев назад

    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 6 месяцев назад

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

  • @KapilSharma-mi8tx
    @KapilSharma-mi8tx 7 месяцев назад

    Sir scalable ecommerce with next js

  • @ashish9028
    @ashish9028 Месяц назад

    make video without using class --> fuctional component

  • @princemishra01
    @princemishra01 7 месяцев назад

    develpement is so complecated

  • @sahilgagan2242
    @sahilgagan2242 6 месяцев назад

    dfd

  • @shivammoradia3732
    @shivammoradia3732 7 месяцев назад

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

  • @sahilgagan2242
    @sahilgagan2242 6 месяцев назад

    .

  • @blkmlk
    @blkmlk 5 месяцев назад

    why are you speaking half english half indian

  • @MohamedElguarir
    @MohamedElguarir 4 месяца назад

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