Xử lý khi upload hình ảnh:
51
Hình 4.6. Xử lý file upload
Input sẽ nhận đầu vào với dạng file (hình 4.1), sau khi người dùng click vào và chọn tải lên hình ảnh, hệ thống sẽ đọc file bằng FileReader() và ép về dạng string để hiển thị hình ảnh lên màn hình theo như hình 4.2.
Hình 4.7. Xử lý file trước khi gửi xuống server
Khi người dùng đăng bài hệ thống sẽ tải hình lên fisebase và nhận link hình ảnh trên fisebase về lưu vào form dữ liệu.
52 Xử lý khi nhắn tin:
Hình 4.8. Xử lý dữ liệu tin nhắn trả về từ hub
Khi nhấn vào tin nhắn để mở khung chat hệ thống sẽ tạo một HubConnection để nhận danh sách tin nhắn mà Hub trả về và lưu danh sách đó vào asObservable(). Khi gửi hoặc nhận 1 tin nhắn mới Hub sẽ trả về dữ liệu của tin nhắn đó, hệ thống sẽ thêm tin nhắn đó vào cuối danh sách đã lưu. Còn khi cả hai cùng đang connection hub thì hệ thống sẽ thay đổi tin nhắn tương ứng trong danh sách đã lưu thành đã đọc (null thành thời gian hiện tại).
Xử lý danh sách tin nhắn khi có tin nhắn mới:
53 Sau khi người dùng đăng nhập thì hệ thống sẽ connection hub và nhận danh sách các tin nhắn mới nhất với các người dùng đang nhắn tin mà hub trả về và lưu vào asObservable(). Khi gửi hoặc nhận 1 tin nhắn mới Hub sẽ trả về dữ liệu của tin nhắn đó, hệ thống sẽ xoá tin nhắn trước đó bằng hàm filter() của asObservable() và thêm tin nhắn mới nhận vào danh sách.
Hình 4.10. Thay đổi đổi trang thái cho tin nhắn mới
Khi người dùng nhấn xem tin nhắn mới thì hệ thống sẽ tìm tin nhắn trong danh sách đã lưu bằng id và lưu thời gian xem tin nhắn vào read.