useEffect() with fake Chat App | Sử lý các chức năng thời gian thực

Ғылым және технология

👉 Xem Lộ Trình Học: fullstack.edu.vn/learning-paths
👉 Đăng Ký Học Offline Tại F8: short.f8team.dev/dang-ky-hoc-...
Trong video này chúng ta sẽ cùng làm một ví dụ khó hơn một xíu, đó là ứng dụng chat fake.
useEffect() with fake Chat App | Sử lý các chức năng thời gian thực
Trong ví dụ này chúng ta sẽ sử dụng useEffect hook để listen messages chat/comment và sử dụng cleanup function để remove listener để rời khỏi kênh chat/comment nhé.
Phân đoạn trong video:
00:00 - useEffect with Chat App
15:48 - Chữa bài trước
#hoclaptrinh #hoclaptrinhmienphi #javascript #reactjs #frontend #backend #devops #f8
-------
☻ Phần mềm sử dụng trong video:
Công cụ dịch Tiếng Anh: bit.ly/2Wsuhet
Công cụ đo đạc giao diện web: s.net.vn/D8kL
Công cụ viết CV xin việc chuyên nghiệp: mycv.vn
--------------
☻ Khóa học lập trình web MIỄN PHÍ:
Kiến thức nhập môn: fullstack.edu.vn/courses/less...
Xây dựng giao diện với HTML, CSS: fullstack.edu.vn/courses/html...
Xây dựng web responsive: fullstack.edu.vn/courses/resp...
Lập trình Javascript cơ bản: fullstack.edu.vn/courses/java...
Lập trình Javascript nâng cao: fullstack.edu.vn/courses/java...
Làm việc với Terminal & Ubuntu: fullstack.edu.vn/courses/wind...
Xây Dựng Website với ReactJS: fullstack.edu.vn/courses/reactjs
Xây dựng web với Node & Express: fullstack.edu.vn/courses/nodejs
HTML, CSS tips: fullstack.edu.vn/courses/html...
Ứng dụng cảnh báo khi sờ lên mặt: fullstack.edu.vn/courses/tool...
Xem thêm tại: fullstack.edu.vn/courses
-------------------------------------
F8 Official
(c) Sơn Đặng
Website: fullstack.edu.vn
Facebook cá nhân: / sondnf8
Nhóm Học Lập Trình Web: / f8official
Email: contact@fullstack.edu.vn
© Bản quyền thuộc về Channel F8 Official ☞ Do not Reup
© Nghiêm cấm sử dụng video nhằm mục đích thương mại dưới mọi hình thức.

Пікірлер: 43

  • @F8VNOfficial
    @F8VNOfficial2 жыл бұрын

    Anh em lưu ý là những bài như này một số bạn sẽ phải xem kỹ, vì có thể nhiều bạn còn chưa bao giờ làm các ứng dụng realtime. Các bạn tập trung vào 2 điểm điểm: subscribe (đăng ký kênh chat/comment), unsubscribe (hủy đăng ký kênh chat/comment)

  • @babayaga3303
    @babayaga33034 ай бұрын

    Đi làm 2 năm rồi vẫn vào xem lại :D mỗi lần xem là mỗi góc nhìn mới.

  • @vuongqtvn
    @vuongqtvn2 жыл бұрын

    Thật tuyệt vời khi anh dạy bài nào cũng kỹ càng như vậy

  • @Whyrulookingatmyname

    @Whyrulookingatmyname

    2 жыл бұрын

    Bài nào bạn cx comment nhỉ:)

  • @KhanhNguyen-hl5ot

    @KhanhNguyen-hl5ot

    2 жыл бұрын

    idol vương :((

  • @11.tavanhung92
    @11.tavanhung922 жыл бұрын

    Chúc anh thật nhiều sức khoẻ ạ!

  • @vinhlam8887
    @vinhlam88872 жыл бұрын

    mặc dù chưa học nhưng có video mới là cứ phải ấn vào xem 1 tí :v

  • @phongle-hp5gx
    @phongle-hp5gx2 жыл бұрын

    A sơn ơi e học tới cấp 2 là nghỉ r giờ e đang hc khóa react của anh ko biết có đi làm được ko a nhỉ, mong a tl ạ

  • @longphan4252
    @longphan42522 жыл бұрын

    hóng anh làm realtime chat app với nodejs

  • @phapnguyen155
    @phapnguyen1552 жыл бұрын

    anh sơn cho em hỏi mình làm phần comment như anh kiểu gì nhỉ, lưu trữ comment dạng cây ý anh, em khá bí chỗ này

  • @qaqeqe
    @qaqeqe2 жыл бұрын

    Chào anh Sơn, mong anh làm thêm khoá ưebsocket. Em cảm ơn!

  • @nguyenvananh2111
    @nguyenvananh21112 жыл бұрын

    mình cũng gặp bug chỗ input file giống nhau trong dự án, đó là chọn 1 file rồi upload file đó lên, sau đó chọn tiếp file đó thì ko gọi được upload vì function onChange ko chạy, bị bắt bug ngay :D

  • @khoilam7569
    @khoilam75692 жыл бұрын

    lam ve nested route di a

  • @NamangMinh1
    @NamangMinh12 жыл бұрын

    làm chat app hay quá anh giống zoom anh ạ

  • @congtrongtran8701
    @congtrongtran87012 жыл бұрын

    bạn làm thêm clip nói về useSelector và useDispatch

  • @thangnguyenvan9586
    @thangnguyenvan95862 жыл бұрын

    Nếu đóng tab thì có thực hiện cleanup function không ạ

  • @DavidJames535
    @DavidJames5352 жыл бұрын

    Bài này hơi khó á nha hehe 😊😊 . Nhưng mà cũng cảm ơn anh

  • @sonlengoc948

    @sonlengoc948

    8 ай бұрын

    dễ mà nhỉ

  • @JoloVlog-zc2ft

    @JoloVlog-zc2ft

    8 ай бұрын

    @@sonlengoc948 ukm giờ mình cũng thấy dễ á. Tại trước chưa thấm

  • @hoalep9889
    @hoalep98892 жыл бұрын

    Xịn quá

  • @TriNguyen-og1ws
    @TriNguyen-og1ws2 жыл бұрын

    hay qua anh oii

  • @h_sangg9459
    @h_sangg94592 жыл бұрын

    Lên đây like 1 phát tối nay họccc

  • @juhandvan
    @juhandvan2 жыл бұрын

    14:05, e vẫn chưa hiểu vì sao đoạn này nó chạy được đúng như mình mong muốn ạ. Khi anh click để chuyển từ lesson1 sang lesson2, lúc này lessonID đổi sang giá trị bằng 2 => nó sẽ chạy vào hàm useEffect() => thực thi clean-up function trước. Nhưng em đang thắc mắc dòng 77, khi nó gọi window.removeEventListener thì lúc này cái lessonID lại đang là 2 rồi chứ có phải là 1 nữa đâu anh nhỉ. Như thế thì nó lại remove của cái mới luôn à ??? Các video trước của anh em vẫn xem đầy đủ không bỏ xót bài nào, không biết có bị miss phần kiến thức nào không. Mong a Sơn giải thích giúp em đoạn này ạ

  • @F8VNOfficial

    @F8VNOfficial

    2 жыл бұрын

    Em lưu ý là cleanup gọi nhưng nó gọi với lessonID vẫn là 1 em nhé. Vì callback của useEffect là closure, thời điểm callback được gọi khi ấy lessonID là 1, vì vậy khi cleanup được gọi nó truy cập vào phạm vi được tạo ra bởi callback trước đó (lessonID là 1). Tương tự như vậy cho những lần tiếp theo, em log hẳn ra mà coi em sẽ thấy giá trị của lessonID ko phải như em nghĩ đâu.

  • @binhcoding3am148

    @binhcoding3am148

    2 жыл бұрын

    ​ @F8 Official Mình dev C++ , Nhờ anh Sơn mà mình mới biết được thằng JS function bá đạo như thế nào, ngoài return về 1 giá trị mà nó còn return về 1 function khác, clean function closure

  • @duytuong9945
    @duytuong99452 жыл бұрын

    anh ơi cho em hỏi là cái hàm emitComment ở bên file Index.js nó gửi đi, thì ở bên hàm Content của content.js thì nó cũng phải có đoạn code nào để nó nhận được cái thông tin gửi đi đó chứ anh, em xem mà không rõ chỗ nào nó nhận, anh giải thích cho em rõ được không ạ, em cảm ơn

  • @thanhnguyvan820

    @thanhnguyvan820

    Жыл бұрын

    nó nhận từ dòng window.addEventListener đó. Bên file index.js thì nó Dispatch 1 cái Event, bên file Content lắng nghe Event đó bằng EventListner.

  • @sonlengoc948
    @sonlengoc948 Жыл бұрын

    hình như anh Sơn thiếu 1 video để tổng hợp các điểm cần lưu ý cho useEffect() thì phải

  • @nguyenvankhanh3788
    @nguyenvankhanh37882 жыл бұрын

    anh ơi cho em hỏi cái đoạn cleanup tại sao khi click vào lesson khác lại chạy đc cleanup được nhỉ? em tưởng cả cái component Content nó phải bị gỡ khỏi dom thì cleanup nó mới chạy chứ

  • @F8VNOfficial

    @F8VNOfficial

    2 жыл бұрын

    Hic lại bỏ bài trước rồi 😥

  • @benalpha2297

    @benalpha2297

    2 жыл бұрын

    Xem lại bài cũ ông ơi

  • @phungtruongdinhquan7765

    @phungtruongdinhquan7765

    2 жыл бұрын

    Hình như khi mình click vào lesson khác thì tức là mình unmounted khỏi lesson trước dó, và th cleanup nó sẽ thực thi clean thằng trước đó thì phải.

  • @binhlethanh4121
    @binhlethanh41212 жыл бұрын

    anh có khóa học nào trên udemy ko ạ. thấy a dạy cuốn vs dễ hiểu quá.nên muốn học thêm nữa ạ.

  • @F8VNOfficial

    @F8VNOfficial

    2 жыл бұрын

    Cảm ơn em nhiều. Hiện tại anh chưa có khoá học online trả phí nào em nha

  • @chupachupscuong3708
    @chupachupscuong37082 жыл бұрын

    A cho e xin cách set up socket trong dự án thực tế ko ạ, hiện tại e đang set up ở component, e muốn quản lý ở 1 file riêng

  • @F8VNOfficial

    @F8VNOfficial

    2 жыл бұрын

    Trong phần thực hành Tiktok sắp tới sẽ có em nhé. Mà setup web socket nó cũng tuỳ vào lib em sử dụng nữa, concept thì giống nhau cả thôi, nhưng cú pháp thì sẽ khác đó.

  • @lenhac9040
    @lenhac90402 жыл бұрын

    Choáng :)) theo không kịp luôn

  • @thanhnguyvan820
    @thanhnguyvan820 Жыл бұрын

    thằng useEffect này khi dùng đối số thứ 2 [ ] và truyền giá trị vào đó thì cơ chế tựa như subscribe và unsubscribe của Angular.

  • @shmiley19
    @shmiley192 жыл бұрын

    Anh ơi. Em đăng nhập vào F8 bằng google mà màn hình hiện ra trắng xóa luôn anh ạ =(((((

  • @shmiley19

    @shmiley19

    2 жыл бұрын

    Xảy ra khi em đăng nhập bằng firefox nha anh. Sang chrome thì vào được =)))

  • @witchelaina2779
    @witchelaina27792 жыл бұрын

    Anh ơi E có thắc mắc khi học khóa HTML CSS là tại s ngta lại gọi thuộc tính của HTML là Attribute còn CSS là Property.

  • @HoangNam-bs5wc

    @HoangNam-bs5wc

    2 жыл бұрын

    ulatroi

  • @NguyenDung-oh3kk
    @NguyenDung-oh3kk2 жыл бұрын

    Cmt đầu

Келесі