Chat private trong socket

#1

Chào mọi người, em đang dùng MERN và socket làm một app chat như thế này.

Đây là giao diện khách hàng

image
image1230×592 102 KB

Khi khách đăng nhập thành công nó sẽ chuyển qua giao diện chat như thế này. Và mỗi khách hàng đều chat với admin.

Và đây là giao diện admin

image
image1230×589 103 KB

Bên trái là list danh sách các khách hàng đã nhắn tin.

Em đang làm như thế này.

Đầu tiên:

  1. Ở useEffect em gửi request lên server để em get tin nhắn về và cập nhật vào state.
  2. Sau đó lúc gửi tin nhắn. Em sẽ kiểm tra nếu mà length của state đó = 0 thì em gửi 2 emit đó là tạo room và gửi tin nhắn. nếu > 0 thì em chỉ emit gửi tin nhắn thôi. còn join room em xử lý ở dưới
  3. Sau đó em tạo 1 useEffect nữa để join room kèm theo id của user hiện tại. Để qua server em lấy id đó em kiểm tra. Nếu mà nó có thì em join vào room. Nếu mà chưa có thì em xử lý ở bước 2. Và không biết làm sao để thằng admin tự động join khi user nó tạo room ạ. Em xin cảm ơn
1 Like
#2

Tức bạn muốn, khi 1 khách hàng vào app, gõ chat là tự nhiên bên Admin cũng có cái room đúng không :thinking:
Mình chưa rõ ý của bạn lắm, mong bạn giải thích kỹ hơn xíu nha :sweat_smile:

2 Likes
#3

dạ ý tưởng của em là như thế này

image
Đầu tiên khi chạy vào component chat. Thì em dùng useEffect để load tin nhắn trước đó. Sau đó set vào state. Vào lúc gửi tin nhắn. Em sẽ kiểm tra cái state đó nó có rỗng hay không. Tại vì em đã load tin nhắn trước đó vào trong state rồi. Nếu nó chưa chat thì state đó rỗng. Và vì thế nếu nó rỗng thì em emit tạo room và gửi message. Và vấn đề làm sao để admin nó tự join vào room đó được vậy anh nhỉ. Kiểu như đây mới tạo room và join room. Room này bây giờ chỉ có 1 mình em thôi à.

#4

Có nhiều cách lắm :kissing:

  1. Làm chay (nếu bạn ko xài socketio)
  • Khi user tạo room, gen ra roomId. Tạo 1 object gồm: {roomId: '', participants: [], clients: []}
  • Khi user nào join room thì append user Id vô participants + client của user vô clients (để tiện gửi lại event cho client)
  • Với trường hợp của bạn, khi tạo room, chỉ cần append id của user hiện tại + admin là xong
  • Khi khởi tạo room xong, nếu user không phải là người tạo room -> chưa có trong room, thì server sẽ bắn event về cho những user này báo là có room mới.
  • Sau đó, khi user gửi message tới roomId, thì bạn sẽ emit 1 event từ server tới mọi user trong room đó là có message mới là được OvOb. Object này bạn có thể lưu ở db nếu muốn lưu lại lịch sử
  1. Sử dụng Rooms của socketio luôn
    https://socket.io/docs/v3/rooms/

À mà, với cách hiện tại của bạn, sau này sẽ hơi khó mở rộng như user A chat với user B :thinking: Vì bạn đang mặc định mỗi user là 1 room thôi. (Do bạn fetch message ngay chứ ko fetch room list) Nếu app của bạn ko thay đổi thì có thể th iết kế như sau để đơn giản hơn với 2 cách trên

  • Vì bạn biết mỗi user chỉ có thể chat với admin, nên thay vì tạo room, bạn chỉ cần 1 flag cho user là có active hay chưa
  • Khi 1 user được active, thì socket sẽ bắn event về cho admin là có user mới được active và append vào list room

Hoặc đơn giản hơn nữa :joy:

  • Admin sẽ gửi API get user list mỗi 1s đi.
  • Request này đơn giản lấy user nào có chat log > 0. Khỏi websocket hay flag gì luôn :kissing:

Đơn giản hơn nhiều OvOb

6 Likes
#5

Dạ em cảm ơn anh nhiều nhen <3

83% thành viên diễn đàn không hỏi bài tập, còn bạn thì sao?