Kết hợp Socket.io trong dự án React (best practice)

Đã từng có rất nhiều blogger khác nhau đã từng hướng dẫn về chủ đề này rồi, nhưng mỗi người lại hướng dẫn theo nhiều cách khác nhau. Trong bài viết này, mình sẽ hướng dẫn implement thư viện socket.io vào trong dự án React theo cách tối ưu nhất, dễ mở rộng nhất. Với back-end sử dụng framework ưa thích của mình là NestJS tuy nhiên bạn cũng có thể sử dụng bất kỳ FW khác như ExpressJS hoặc chỉ sử dụng Socket.io server thôi cũng được.

Bài viết được chia làm hai phần, với phần đầu là triển khai real-time server và phần 2 là real-time client với thư viện react+socket-io-client

Realtime server

Mình sẽ hướng dẫn dựng 1 con server realtime với framework NestJS - bạn có thể tìm hiểu thêm về NestJS tại đây. Tuy nhiên nếu bạn đã có server realtime như đã nói ở trên thì có thể bỏ qua bước này.

Trong phần này mình cũng hướng dẫn và giải thích một số kiến thức liên quan đến NestJS dành cho bạn nào đang tìm hiểu framework này.

Bài viết coi như bạn đã có kiến thức cơ bản về nodejs nói chung, cũng như đã cài một số tool như @nestjs/cli cũng như create-react-app và yarn

Init project

Dùng @nestjs/cli để khởi tạo dự án

nest new server cd server

Install dependencies

Chúng ta tiến hành cài đặt mốt số thư viện cần thiết cho chức năng realtime

yarn add @nestjs/platform-socket.io @nestjs/websockets yarn add -D @types/socket.io

Generate message module

Tiếp theo ta chạy các lệnh sau để NestJS có thể sinh mã giúp chúng ta để tiết kiệm thời gian và công sức

nest g mo message # generate module nest g co message # generate controller nest g service message # generate service nest g gateway message # generate gateway

Giải thích thêm về Gateway, đây là class được chú thích (annotated) bởi decorator @WebSocketGateway(). Nó làm việc với 2 web-socket platforms phổ biến là socket.io và ws. Nên khi cài @nestjs/websockets nó cũng yêu cầu bạn phải cài thêm socket.io, ws,… hoặc bạn cũng có thể custom theo cách thức này

Gateway cũng được coi là 1 provider và hầu hết các khái niệm trong Nest như: dependency injection, decorators, exception filters, pipes, guards and interceptors đều được áp dụng trong class này. Và bản thân Gateway cũng có thể được injected trong classes khác như (provider or controller)

Project structure

Đến bước này bạn project của bạn có cấu trúc như sau

. ├── package.json ├── src │ ├── app.controller.ts │ ├── app.module.ts │ ├── app.service.ts │ ├── main.ts │ └── message │ ├── message.controller.ts │ ├── message.gateway.ts │ ├── message.module.ts │ └── message.service.ts └── tsconfig.json

bài viết còn đang dang dở