Giới Thiệu Chung

App chat real time này mình sẽ viết kết hợp NodeJS với Socket.io. NodeJS nó được viết bởi Javascript và là một nền tảng chạy trên môi trường V8 Javascript runtime.

Socket.io là một thư viện của JavaScript nó sử dụng cho các ứng dụng web để xử lý thời gian thực. Chat real time là một trong nhiều ứng dụng mà socket.io có thể làm được và còn rất nhiều ứng dụng khác nữa như là gọi điện thời gian thực,...

Hôm nay mình sẽ làm một cái App Chat nho nhỏ với sự kết hợp của 2 thằng ở trên. Mục đích mà mình làm cái app này là giúp cho các bạn hiểu rõ hơn về NodeJS cũng như Socket.io

Bắt đầu làm thôi

Thiết lập và cài đặt

Các bạn tạo cho mình folder để code cái app nha tên gì cũng được

Sử dụng visual studio code (có thể dùng sublime text, notepad++, netbean,..) để mở folder.Sau đó mở terminal

• Tạo project nodejs với npm
  Bạn chạy dòng lệnh npm init
  lưu ý: Các bạn nhớ là phải đặt tên không có dấu - này nha. Còn muốn mà để chạy npm thì phải cài đặt NodeJS nha các bạn cài tại đây
  
  Sau khi chạy xong các bạn sẽ thấy một file package.json vừa được sinh ra và có thông số như bạn điền
  
• Cài đặt package với npm
  Để cài đặt ta sử dụng câu lệnh npm install
  Trước hết chúng ta tải package express framework bằng npm
  npm install express --save
  Cài đặt socket.io bằng npm
  npm install socket.io@1.7.3 --save
  Cài đặt nodemon để mỗi lần mình thay đổi code thì nó sẽ tự động Restart lại server
  npm install nodemon --save
  lưu ý: Các bạn nhớ cài đặt đúng phiên bản để có thể chạy được.
  npm install tenmodule@phienban --save
  Sau khi cài đặt xong thì chúng ta có được như thế này
  

Code thôi nào

Trong folder bạn tạo bạn tạo giúp mình file index.html cũng như file app.js nha
file index.html bạn code cho mình đoạn mã này.

Ta được kết quả như thế này:

Cũng trong folder đó ta cũng tạo một file tên là app.js hay server.js đều được cả mục đích của của file này đây là nơi mà chúng ta dùng để xử lý dữ liệu bên phía server và cũng render ra view(giao diện người dùng)
Trong phần nay ta code như sau:

• Khai Báo framwork Express và thư viện socket.io
• Đọc file tĩnh HTML, Bắt sự kiện tin nhắn gửi lên server rồi trả về cho người dùng thời gian thực
  
  Trong file index.html bạn tạo cho mình đoạn script mục đích của đoạn javascript trên dùng để bắt sự kiện khi form submit thì sẽ gửi dữ liệu(tin nhắn) lên server(socket.io). Sau đó sẽ trả dữ liệu về cho người dùng đã được xử lý.
  

Ta được kết quả như thế này:

Khi bạn FA quá lâu :))

Lời Kết

Trên đây là bài hướng dẫn của mình về cách tự tạo một app chat nho nhỏ sử dụng NodeJS, ExpressJS và Socket.io giúp các bạn hiểu rõ hơn về socket.io. Ở trên chỉ là một demo nho nhỏ các bạn có thể phát triển rộng ra như làm thêm room chat, call video,...

Các bạn có thể tham khảo code tại đây mình mới push lên GitHub.

Nếu mọi người cảm thấy bài viết này hay thì có thể ủng hộ mình để mình có động lực để ra những bài topic hay và chất lượng hơn ủng hộ mình tại đây nha.

Chúc Các Bạn Thành Công!!