Hướng dẫn nodejs chat - trò chuyện nodejs

Xin chào các bạn, trong bài viết hôm nay chúng ta sẽ cùng tìm hiểu về cách tạo 1 ứng dụng chat đơn giản viết bằng framework nodejs tích hợp thư viện socket.io nhé.

1. Ý tưởng ứng dụng

Ý tưởng là tạo một ứng dụng chat cho nhiều người. Tin nhắn được hiển thị luôn chứ không phải load lại trang mới hiển thị ra được. Để đơn giản thì chúng ta sẽ không xây dựng phần xác thực, cũng như chú trọng đến giao diện, mà thay vào đó chúng ta sẽ xoay quanh các sử dụng thư viện socket.io cũng như tạp ra 1 ứng dụng chat gọi là chạy đc thôi nhé :v

2. Khởi tạo project

2.1 Tạo thư mục và cài đặt Express

Tạo thư mục bằng terminal và di chuyển tới đó:

 mkdir app_chat && cd app_chat
 npm init

Chúng ta cần 1 server cho ứng dụng chat và framework cho

  "dependencies": {
    "express": "^4.16.4"
  }

1 được chọn đó là

  "dependencies": {
    "express": "^4.16.4"
  }

2. các bạn chạy lệnh sau để cài

  "dependencies": {
    "express": "^4.16.4"
  }

2 vào project nhé.

npm install -s express

Để kiểm tra đã cài đặt thành công hay chưa thì chúng ta vào file

  "dependencies": {
    "express": "^4.16.4"
  }

4 nhé. Nếu có thông tin của

  "dependencies": {
    "express": "^4.16.4"
  }

2 trong file thì nó đã được cài thành công rồi.

  "dependencies": {
    "express": "^4.16.4"
  }

Bước tiếp theo là khởi tại file

  "dependencies": {
    "express": "^4.16.4"
  }

6 để tiến hành phát triển ứng dụng của chúng ta. File chính là bộ não của app chat, bao gồm các xử lý resquest, response, lưu vào database,...

var express = require(‘express’);
var app = express();

var server = app.listen(3000, () => {
});

app.get('/', function (req, res) {
  res.sendFile(__dirname + '/index.html');
});

2.2 Tạo view index.html

Sau đó tạo 1 file view là

  "dependencies": {
    "express": "^4.16.4"
  }

7 cho app chat, trong file view mình có dùng các CDN Bootstraps.

  
  
  
  



  

    

    

      
Message App
      

      
      

      
      

      Gửi
    
    

  

2.3 Nodemon

Chúng ta nên sử dụng gói

  "dependencies": {
    "express": "^4.16.4"
  }

8 để không phải reset lại server mỗi khi thay đổi code.

  "dependencies": {
    "express": "^4.16.4"
  }

9 để start nodemon trong terminal ta chỉ cần:

var express = require(‘express’);
var app = express();

var server = app.listen(3000, () => {
});

app.get('/', function (req, res) {
  res.sendFile(__dirname + '/index.html');
});

0 nếu chạy trên

var express = require(‘express’);
var app = express();

var server = app.listen(3000, () => {
});

app.get('/', function (req, res) {
  res.sendFile(__dirname + '/index.html');
});

1 mà ra view như hình dưới thì chúng ta đã start server và tạo view thành công cho app chat rồi đó . .

2.4 Mongoose

Sau khi tạo view thành công, bước tiếp theo đó là tạo connect tới

var express = require(‘express’);
var app = express();

var server = app.listen(3000, () => {
});

app.get('/', function (req, res) {
  res.sendFile(__dirname + '/index.html');
});

2 và gói mà tôi hướng tới đó là

var express = require(‘express’);
var app = express();

var server = app.listen(3000, () => {
});

app.get('/', function (req, res) {
  res.sendFile(__dirname + '/index.html');
});

3.

npm install -s mongoose

Khai báo thư viện vào file

  "dependencies": {
    "express": "^4.16.4"
  }

6

var mongoose = require('mongoose');

mình sẽ dùng mongo trên máy local luôn, thay vì bài hướng nhiều hướng dẫn khác hay dùng mlab.com. đầu tiên chúng ta tiến hành tạp 1 database mongo đã nhé. Đăng nhập vào Mongo bằng cách

mongo

tạo project:

var express = require(‘express’);
var app = express();

var server = app.listen(3000, () => {
});

app.get('/', function (req, res) {
  res.sendFile(__dirname + '/index.html');
});

5 nếu như project có sẵn rồi thì nó sẽ connect tới db là app_chat còn không thì nó sẽ tạo 1 database và connect. Trở lại với project thì ta sẽ tiến hành tạo connect từ app.

mongoose.connect('mongodb://localhost:27017/app_chat123', (err) => {
    console.log("Kết nối thành công", err);
})

và định nghĩa 1 model để ánh xạ từ collection messages ở mongodb ra.

2.5Body-Parser

npm install -s body-parser

Thêm đoạn sau vào để cài đặt thư viện body-parser.

npm install -s express

0

==> ok vậy là bước chuẩn bị đã xong, bước tiếp theo là chúng ta sẽ tiến hành xây dựng logic cho app.

3. Xây dựng logic cho web chat

3.1 Xây dựng router

chúng ta sẽ định nghĩa 3 router trong app này. đó là get và post: Đường dẫn mặc định(cái này đã có ở trên rồi):

npm install -s express

1

get: tức là khi có request tới

var express = require(‘express’);
var app = express();

var server = app.listen(3000, () => {
});

app.get('/', function (req, res) {
  res.sendFile(__dirname + '/index.html');
});

6 có method là

var express = require(‘express’);
var app = express();

var server = app.listen(3000, () => {
});

app.get('/', function (req, res) {
  res.sendFile(__dirname + '/index.html');
});

7 thì sẽ load hết tất cả tin nhắn từ mongoDB ra(mình làm đơn giản vậy thôi nhá :v )

npm install -s express

2

post: Tương tự thì chúng ta có

var express = require(‘express’);
var app = express();

var server = app.listen(3000, () => {
});

app.get('/', function (req, res) {
  res.sendFile(__dirname + '/index.html');
});

8 tạo 1 bản ghi và ghi mới vào database.

npm install -s express

3

ở ngoài file view index.html chúng ta cần thêm 1 số xử lý javascript để gửi dữ liệu và request về server.

npm install -s express

4

Mình xin gải thích 1 chút về đoạn js, thực ra nó cũng dễ hiểu thôi: + khi có sự kiện click vào button submit với id là send thì tiến hành gửi request kiểu post thông qua sendMessage() để tới server lưu lại bản ghi. + hàm getMessages() chỉ là hàm request yêu cầu server trả về dữ liệu của bảng thôi. ==> ok bây giờ các bạn trở lại và reset lại trang thì đã có thể thấy hiển thị dữ liệu chat rồi đó, bạn có thể gửi tin nhắn được rồi, tuy nhiên nó chưa hiện real time như mong muốn được, vì vậy chúng ta tiếp tục xử lý ở bước sau nhé.

3.2 Socket.io

3.2.1 Socket.io là gì

var express = require(‘express’);
var app = express();

var server = app.listen(3000, () => {
});

app.get('/', function (req, res) {
  res.sendFile(__dirname + '/index.html');
});

9 là 1 thư viện javascript dành cho ứng dựng web realtime. nó cho phép giao tiếp realtime giữa

  
  
  
  



  

    

    

      
Message App
      

      
      

      
      

      Gửi
    
    

  

0 và

  
  
  
  



  

    

    

      
Message App
      

      
      

      
      

      Gửi
    
    

  

1. Nó bao gồm 2 phần đó là thư viện phía client và thư viện phía server. Hay nói cách khác đó là để sử dụng được socket.io cho app web ta cần phải có socket.io ở cả view và server.

3.2.2 Cài đặt và sử dụng

npm install -s express

5

Phía view:

npm install -s express

6

Import thư viện vào app: tại server:

npm install -s express

7

tại view:

npm install -s express

8

tạo connect:

npm install -s express

9

thêm dòng sau vào file

  "dependencies": {
    "express": "^4.16.4"
  }

6 vào middlewave

  
  
  
  



  

    

    

      
Message App
      

      
      

      
      

      Gửi
    
    

  

3

  
  
  
  



  

    

    

      
Message App
      

      
      

      
      

      Gửi
    
    

  

4 Hiện tại khi click submit thì tin nhắn mới chưa hiển thị lên luôn được, vì vậy ta cần thêm đoạn sau vào phần script của file index.html

  "dependencies": {
    "express": "^4.16.4"
  }

0

4. Github

Các bạn có thể tại source code về tham khảo tại đây tại đây nhé

5. Kết luận

ok như vậy là mình và các bạn đã xây dựng xong 1 app chat đơn giản nhất, giờ các bạn có thể sử dụng và phát triển tiếp ứng dụng thêm nhé. Cảm ơn các bạn đã đọc bài viết của mình.