Ứng dụng thời gian thực đầu tiên của bạn trong nút

[ad_1]

Bạn có bao giờ tự hỏi làm thế nào các ứng dụng thời gian thực như ứng dụng trò chuyện và trò chơi trực tuyến được xây dựng không? Nếu bạn chưa từng xây dựng một cái nào trước đây, hãy đọc hướng dẫn này vì tôi sẽ chỉ cho bạn cách xây dựng một cái đơn giản bằng cách sử dụng socket.io.

Chúng ta sẽ xây dựng cái gì?

Đây là một ứng dụng đơn giản với một nút bấm và nhãn bên dưới nó. Nhãn hiển thị "Lượt thích: X" (trong đó x là số lượt thích hiện tại). Khi người dùng nhấp vào nút, số lượt thích tăng thêm một.

Chúng tôi sẽ biến nó thành thời gian thực bằng cách hiển thị cho người dùng trên ứng dụng cách số lượt thích tăng lên khi những người dùng khác đang nhấp vào nút. Vì vậy, bạn không cần tải lại trang để xem giá trị mới nhất.

Đây là ứng dụng sẽ như thế nào:

Bạn có thể lấy mã nguồn của dự án này trên GitHub.

Tạo một dự án mới

Trong một thư mục mới, hãy thêm pack.json bằng cách sử dụng npm init -y sau đó cài đặt ba gói này:

  npm cài đặt ejs express.io
 

Chúng tôi sẽ sử dụng ejs làm công cụ tạo khuôn mẫu và socket.io để biến ứng dụng của chúng tôi thành ứng dụng thời gian thực.

Hiển thị trang thế giới xin chào

Như đã đề cập ở trên, chúng tôi sẽ sử dụng ejs để hiển thị quan điểm của chúng tôi. Vì vậy, tạo index.ejs và thêm vào như sau:

  


  
   Ứng dụng như thời gian thực 


  Chào thế giới!


 

Bây giờ, hãy tạo máy chủ nút của chúng tôi và phục vụ tệp trên làm trang chủ.

Vì vậy, hãy tạo node.js và thêm phần này:

  const app = quiries ('express') ()
const path = Yêu cầu ('đường dẫn')

app.engine ('html', yêu cầu ('ejs'). renderFile)
app.set ('xem công cụ', 'html')

app.get ('/', (req, res) => {
  res.render (path.join (__ dirname + '/index.ejs'), null, (err, html) => {
    độ phân giải (html)
  })
})

app.listen (3000, () => console.log ('ứng dụng đang chạy trên localhost: 3000'))
 

Vì vậy, chúng tôi đã tạo một máy chủ mới chạy trên cổng 3000 . Khi người dùng truy cập http: // localhost: 3000 / trong trình duyệt, chúng tôi sẽ kết xuất index.ejs và hiển thị nó.

Nếu bạn chạy ứng dụng bằng nút index.js (hoặc sử dụng gật đầu nếu bạn muốn ứng dụng tự động khởi động lại khi thay đổi) và mở http: // localhost: 3000 / , bạn sẽ thấy "Xin chào thế giới!" hiển thị.

Thêm style.css

Đây không phải là hướng dẫn CSS, vì vậy, hãy nhanh chóng thêm style.css vào thư mục gốc và điền vào đây:

  cơ thể {
  nền: hsl (0, 50%, 80%);
  hiển thị: flex;
  justify-content: trung tâm;
  align-item: trung tâm;
  chiều cao: 100vh;
  lề: 0;
  đệm: 0;
}

nút {
  nền: hsl (0, 50%, 90%);
  biên giới: không có;
  bán kính biên giới: 50%;
  hiển thị: flex;
  align-item: trung tâm;
  justify-content: trung tâm;
  chiều rộng: 150px;
  chiều cao: 150px;
  con trỏ: con trỏ;
  phác thảo: không có;
  hộp bóng: 0 14px 28px hsla (0, 50%, 10%, 25%), 0 10px 10px hsla (0, 50%, 10%, 22%);
  quá trình chuyển đổi: tất cả 0,3 giây khối-bezier (.25, .8, .25,1);
}

nút: di chuột {
  hộp bóng: 0 1px 3px hsla (0, 50%, 10%, 12%), 0 1px 2px hsla (0, 50%, 10%, 24%);
}

nút: kích hoạt {
  hộp bóng: không có;
}

đường dẫn Svg {
  điền: hsl (0, 30%, 30%);
}

.chủ yếu {
  hiển thị: flex;
  hướng flex: cột;
  justify-content: trung tâm;
  align-item: trung tâm;
}

. thích {
  lề trên: 20px;
  màu: hsl (0, 60%, 20%);
  font-weight: in đậm;
  họ phông chữ: sans-serif;
  biến đổi văn bản: chữ hoa;
  cỡ chữ: 20px;
}
 

Bây giờ hãy nói với máy chủ của chúng tôi về nó để khi chúng tôi yêu cầu, nó sẽ phản hồi với tệp này.

Thêm tuyến đường này trong index.js (bên dưới tuyến đường gốc):

  app.get ('/ style.css', (req, res) => {
  res.sendFile (path.join (__ dirname + '/style.css'))
})
 

Và sau đó, hãy sử dụng nó trong chỉ mục của chúng tôi.ejs bằng cách thêm phần này vào cuối :

  
 

Hiển thị nút và nhãn

Mở index.ejs và cập nhật nó như thế này:

  


  
   Ứng dụng như thời gian thực 
  


  
            

Để làm việc này, chúng tôi phải vượt qua lượt thích từ máy chủ khi hiển thị mẫu.

Vì vậy, hãy mở index.js và cập nhật tuyến đường gốc như thế này:

  hãy thích = 0

app.get ('/', (req, res) => {
  res.render (path.join (__ dirname + '/index.ejs'), {thích}, (err, html) => {
    độ phân giải (html)
  })
})
 

Lưu ý cách chúng tôi xác định thích phía trên nó.

Để giữ cho ví dụ này đơn giản, chúng tôi đã xác định lượt thích trong bộ nhớ, có nghĩa là giá trị của nó sẽ trở về 0 khi máy chủ khởi động lại. Thông thường trong các ứng dụng trong thế giới thực, bạn sẽ lưu trữ dữ liệu của mình trong cơ sở dữ liệu.

Tăng lượt thích bằng cách nhấp vào nút

Để làm như vậy, chúng ta cần thêm một tuyến đường mới để tăng lượt thích và trả về giá trị mới. Và sau đó chúng tôi sẽ đưa ra yêu cầu đến điểm cuối này từ index.ejs khi người dùng nhấp vào nút.

Trước tiên, hãy xác định tuyến đường, trong index.js .

  app.post ('/ like', (req, res) => {
  thích ++
  res.json ({thích})
})
 

Vì vậy, nó là điểm cuối POST tại / like .

Bây giờ, hãy lắng nghe sự kiện nhấp chuột của nút và gửi yêu cầu này bằng API tìm nạp.

Thêm vào như sau :

  
 

Ứng dụng này đã sẵn sàng để sử dụng nhưng không hiển thị giá trị cập nhật trong thời gian thực. Vì vậy, nếu bạn mở ứng dụng trong nhiều cửa sổ trình duyệt và thử cập nhật một ứng dụng, bạn sẽ không thấy giá trị được cập nhật trong thời gian thực trên các cửa sổ trình duyệt khác cho đến khi bạn tải lại chúng.

Biến nó thành một ứng dụng thời gian thực

Socket.io không phải là cách duy nhất để xây dựng các ứng dụng thời gian thực nhưng nó là ứng dụng phổ biến nhất. Không chỉ vậy, nó còn rất tốt và dễ sử dụng.

Chúng tôi đã cài đặt socket.io, vì vậy hãy khởi tạo nó.

Nhưng trước khi tôi chỉ cho bạn cách làm, hãy lưu ý rằng socket.io bao gồm hai phần:

  1. Máy chủ mà chúng tôi tích hợp với máy chủ http của nút.
  2. Thư viện khách mà chúng tôi sử dụng trên trình duyệt để liên lạc với phần máy chủ.

Để khởi tạo phần máy chủ, hãy mở index.js và cập nhật phần trên cùng như thế này:

  const app = quiries ('express') ()
const http = quiries ('http'). createdServer (ứng dụng)
const path = Yêu cầu ('đường dẫn')
const io = Yêu cầu ('socket.io') (http)
 

Vì vậy, chúng tôi đã nhập socket.io và chuyển cho nó đối tượng máy chủ http.

Bây giờ, hãy sử dụng đối tượng http để chạy máy chủ thay vì ứng dụng .

  http.listen (3000, () => console.log ('ứng dụng đang chạy trên localhost: 3000'))
 

Cùng với đó, socket.io được khởi tạo trên máy chủ!

Khi socket.io được khởi tạo, nó sẽ hiển thị /socket.io/socket.io.js điểm cuối. Điểm cuối này chứa tệp JS mà chúng ta sẽ sử dụng trong trình duyệt để kết nối với socket.io. (Vậy đó là thư viện khách của socket.io.)

Chuyển đến index.ejs và bao gồm tệp đó phía trên thẻ

Sau khi bạn thêm cái này, bạn sẽ có io đối tượng được hiển thị trên toàn cầu trên trình duyệt (kiểm tra xem từ bảng điều khiển).

Để kết nối trình duyệt với máy chủ, chỉ cần gọi io () và lưu trữ ổ cắm được trả lại trong một biến.

Vì vậy, hãy đặt phần sau vào đầu phần hãy thêm vào đây:

  socket.on ('thích: cập nhật', thích => {
  thíchOutput.textContent = `Lượt thích: $ {lượt thích}`
})
 

Thế thôi! Bây giờ ứng dụng của chúng tôi hoàn toàn là một ứng dụng thời gian thực!

Nếu mã của bạn không hoạt động, hãy so sánh nó với mã nguồn của bản demo này trên GitHub để đảm bảo bạn không quên bất cứ điều gì.

[ad_2]
Source link: webdesignernews

Leave a Reply

Your email address will not be published. Required fields are marked *