Tạo phòng chat sử dụng MEAN

2699

Tiếp theo phần chat bằng nodejs, bài này tôi xin cùng các bạn đi thêm 1 ứng dụng khác sâu hơn chút đấy là tạo ra 1 phòng chat và có lưu database. Về các bước thiết lập cài đặt Nodejs, Express thì các bạn xem ở bài trước và sẽ không cân nhắc lại nữa.

Server

Phía server cơ bản cấu trúc gồm model, routes và socket events. Đây sẽ là cấu trúc xuyên suốt bài viết.

Cấu trúc folder

Chúng ta cần tổ chức cấu trúc folder theo dưới đây

Bắt đầu với server

Việc đầu tiên ta cần thiết lập các biến toàn cục cho toàn app vào file server.js

Để có thể khai báo cho Express nhận biết được folder chứa các file toàn cục ta cần lệnh sau:

Bước tiếp theo ta cần thiết lập kết nối đến cơ sở dữ liệu của chúng ta. Ở trong bài viết này tôi sẽ sử dụng MongoDb ở trên local và cũng là 1 lựa chọn tốt khi làm trên server. Mongoose là một ứng dụng của Node sẽ tạo ra các tiện ích cho chúng ta làm việc với MongoDb trở nên dễ dàng hơn. Và để kết nối đến database ta có lệnh sau:

Bước tiếp theo ta cần thiết lập kết nối đến cơ sở dữ liệu của chúng ta. Ở trong bài viết này tôi sẽ sử dụng MongoDb ở trên local và cũng là 1 lựa chọn tốt khi làm trên server. Mongoose là một ứng dụng của Node sẽ tạo ra các tiện ích cho chúng ta làm việc với MongoDb trở nên dễ dàng hơn. Và để kết nối đến database ta có lệnh sau:

Với Mongoose ta có thể tạo được các bảng cũng như Model và có thể kết nối được đến với domain khác. Dưới đây ta tạo 1 table là chat như sau:

Server chúng ta giờ sẽ có 3 đường dẫn, 1 là trang index, 2 và trang thiết lập thông tin và cuối cùng là trang vào các phòng chat.

Như vậy ta có thể thấy ta sẽ có 3 đường dẫn ở đây đó là

Index.html

Đây là đường dẫn khá dễ hiểu chạy trực tiếp vào file index.html

/setup

Đây là đương dẫn thiết lập và khi chúng ta vào đường dẫn này sẽ tạo ra vài dữ liệu demo. Nếu chúng ta không cần dữ liệu để test thì có thể bỏ qua đường dẫn này. Việc thêm database sẽ có thể trùng lặp nếu ta liên tục vào link trên

/msg

Đây là đường dẫn để giúp ta lọc các tin nhắn dựa vào tên của room chat. Và chúng ta sẽ tạo ra các socket cho các room như sau

Node client

Đầu tiên ta tạo file lơp view là views/index.ejs

Trong đoạn HTML trên có thể thấy chúng ta sử dụng angular và sử dụng thuộc tính ng-repeat để lấy các tin nhắn từ server trả về. Và hàm khởi tạo init sẽ yêu cầu người dùng đăng nhập.

app.js

Đây là file phía client xử lý:

Tiếp đến chúng ta tạo các Angular service, đầu tiên là service về GUI. Ở đây thiết lập việc nhầm nội dung và ấn Enter là gửi tin nhắn đi:

Tạo danh sách các phòng chat

Đầu tiên ta tạo 1 Angular Controller

Trong controller này ta sẽ tạo 4 menu tương ưng với các chức năng

Chúng ta sẽ tạo 1 hiệu ứng đơn gian và 2 mục Room và Exit, trong đó Room click vào sẽ xổ xuống danh sách các phòng chat. Sự kiện khi click vào room ta xử lý như sau:

Nhận tin nhắn

Bây giờ ta thực hiện việc xử lý tin nhắn khi 1 người dùng gửi đến server và các client nhận nó và thêm vào các message đã có.

Vậy ta đã có thể có 1 ưng dụng chat có các phòng chat khác nhau.

Kết luận

Qua bài này tôi chỉ giới thiệu qua về các tạo các phòng chat 1 cách đơn giản để hình dùng việc ta làm việc với cơ sở dữ liệu như thế nào, cũng như hình dung sơ qua về công nghệ MEAN. Tuy nhiên trong bài vẫn còn nhiều thiếu xót như xử lý đăng nhập hay số lượng tin nhắn gửi về vẫn chưa giải quyết được.

CHIA SẺ