Hôm nay mình xin giới thiệu với các bạn ứng dụng chat realtime phổ biến hiện nay như: messenger, zalo bla bla. Kết quả khi setup xong code sẽ như hình nè! Có nhắn tin nhóm, cá nhân, gửi ảnh ….
Để đạt được thành quả như hình, các bạn bình tĩnh thực hiện các bước bên dưới nhé!
Download: https://github.com/taduyhieu/chat-realtime
I. Môi trường phát triển
Công cụ: Visual Studio, Microsoft SQL Server Management Studio 18
Framework: ASP.NET MVC 5
Thư viện: SignaIR 2.2.0, thư viện hỗ trợ bindling knockoutjs 3.4.2
II. Cài đặt
- Môi trường, công cụ
1.1 SQL Server 2018: Link
1.2 SQL Server Management Studio (SSMS): Link
1.3 Cài đặt Visual Studio: Link
- Tạo mở cơ sở dữ liệu
Mở SQL Server Management Studio (SSMS) tạo mới CSDL có tên: chatrealtime - Mở sourcecode bằng Visual Studio và build
Mở sourcecode bằng cách open Project từ Visual Studio, sau đó chọn file Chat.sln trong sourcecode ** Lưu ý: Clone sourccode ở nhánh master để ổn định nhất! - Thêm cơ sở dữ liệu
Mở SQL Server Management Studio:Tạo mới cơ sở dữ liệu có tên: chatrealtime
Mở sourcecode bằng Visual Studio:Tạo kết nối với cơ sở dữ liệu local bằng cách thay đổi file Web.config:
Data Source = Tên SQL Server
Initial Catalog =Tên cơ sở dữ liệu => chatrealtime
Sau khi thành công chạy lệnh cập nhật cơ sở dữ liệu update-database - Chạy project
Click chuột phải vào Solution của project trong Visual Studio, chọn Build Solution
- Chạy project và sử dụng
Trong Visual Studio, nhấn Ctrl + F5 để chạy
III. Cách sử dụng các tính năng - Tạo tài khoản
Chú ý: Tạo tài khoản với mật khẩu có chữ hoa, chữ thường, số, ký tự đặc biệt và trên 8 ký tự.
Chú ý: Tạo 2 tài khoản và login trên 2 trình duyệt khác nhau hoặc ẩn danh để thấy trạng thái realtime
- Tạo, sửa nhóm được cập nhật realtime
Tạo nhóm
Nhấn vào dấu + ở phía bên trên, trái để thấy giao diện tạo nhóm
Đặt tên nhóm và thêm các thành viên.
Sửa nhóm – chỉ quản trị viên tạo được sửa nhómClick vào biểu tượng edit ở phía trên khi mở nhóm
Thực hiện thay đổi và nhấn Cập nhật - Cập nhật trạng thái trực tuyến tài khoản
Khi các tài khoản được đăng nhập thì được cập nhật trạng thái được ở LIST FRIENDS trên giao diện - Nhắn tin realtime theo nhóm, cá nhân
Theo nhóm
Click vào 1 nhóm trong LIST ROOMS sẽ mở ra màn hình chat
Nhập tin nhắn và nhấn Enter
Cá nhânClick vào 1 nhóm trong LIST FRIENDS sẽ mở ra màn hình chat
Nhấp tin nhắn và nhấn Enter - Ghim tin nhắn
Mở cửa sổ chat theo nhóm hoặc cá nhân
Click vào biểu tượng ghim cạnh mỗi tin nhắn
Click vào tin nhắn đã ghim thì sẽ thấy cửa sổ tin nhắn tự cuộn về vị trí tin nhắn đã được ghim
Hi vọng đến đây các bạn đã thành công và có thể demo được ứng dụng. Nếu có gặp khó khăn hay vướng mắc gì các bạn có thể comment bên dưới để mình hoàn thiện thêm nhé!