Nếu bạn đang xây dựng một ứng dụng xử lý dữ liệu mở rộng, bạn có thể muốn triển khai các bảng thời gian thực vào một lúc nào đó. Hãy lấy một hệ thống quản lý nội dung làm ví dụ. Một lượng lớn dữ liệu được thêm và xóa thường xuyên và chúng tôi muốn các thay đổi có sẵn cho người tiêu dùng ngay lập tức
Trong hướng dẫn này, chúng tôi sẽ hướng dẫn triển khai các tính năng tương tự trên bảng thời gian thực của chúng tôi. Chúng tôi sẽ sử dụng một vài công cụ dành cho nhà phát triển, đó là
jQuery. Một thư viện JavaScript nhỏ giàu tính năng cho phép thao tác DOM, xử lý sự kiện, hoạt ảnh và triển khai AJAX dễ dàng hơn
Kênh đẩy. Một dịch vụ pub/sub thời gian thực miễn phí, dễ sử dụng. Kênh làm cho thời gian thực dễ dàng như sử dụng các sự kiện cơ bản
Bảng dữ liệu. Một plug-in jQuery sử dụng các khái niệm nâng cao lũy tiến để thêm các điều khiển tương tác nâng cao vào bất kỳ bảng HTML nào
Bootstrap. Một khuôn khổ giao diện người dùng để phát triển các dự án đầu tiên trên thiết bị di động, đáp ứng trên web
Đây là một cái nhìn thoáng qua về những gì chúng ta sẽ xây dựng
Thiết lập DataTables
Chạy DataTables trên ứng dụng của chúng tôi khá đơn giản và dễ hiểu. Tất cả những gì chúng ta cần làm là bao gồm tệp JavaScript DataTables và tệp CSS DataTables trong trang HTML của chúng tôi. Có rất nhiều plugin khác mà chúng tôi có thể thêm vào để nâng cao khả năng chỉnh sửa và mở rộng bộ tính năng của DataTables nhưng về cơ bản, chúng tôi sẽ sử dụng hai tệp này. Cần lưu ý rằng là một plug-in jQuery, DataTables sẽ dựa vào jQuery để hoạt động. Để bao gồm DataTables trên trang của chúng tôi, chúng tôi chỉ cần bao gồm các liên kết sau trên trang HTML của chúng tôi
Các liên kết này sẽ nằm ở cuối phần tử
7 của chúng ta, ngay trước thẻ đóng của nó
Tạo bản thiết kế bảng của chúng tôi
Để tạo bản thiết kế bảng của chúng tôi, chúng tôi chèn một phần tử
8 vào trang của chúng tôi và với jQuery, nối thêm phương thức
9 vào nó. Điều này sẽ khởi tạo tất cả các tính năng tích hợp sẵn của DataTables. Phương thức
9 lấy một đối tượng làm đối số. Đối tượng có một thuộc tính const dataTable = $['#realtime'].DataTable[{
data: dataSet,
columns: [
{ title: 'Name' },
{ title: 'Position' },
{ title: 'Office' },
{ title: 'Extn.' },
{ title: 'Start date' },
{ title: 'Salary' }
]
}];
1 lấy const dataTable = $['#realtime'].DataTable[{
data: dataSet,
columns: [
{ title: 'Name' },
{ title: 'Position' },
{ title: 'Office' },
{ title: 'Extn.' },
{ title: 'Start date' },
{ title: 'Salary' }
]
}];
2 , một mảng dữ liệu mà chúng tôi dự định hiển thị trên bảng. Chúng tôi cũng bao gồm một thuộc tính khác có tên là const dataTable = $['#realtime'].DataTable[{
data: dataSet,
columns: [
{ title: 'Name' },
{ title: 'Position' },
{ title: 'Office' },
{ title: 'Extn.' },
{ title: 'Start date' },
{ title: 'Salary' }
]
}];
3 và đặt giá trị của nó thành một mảng các đối tượng với giá trị của mỗi đối tượng đóng vai trò là tiêu đề cột cho bảng của chúng tôi const dataTable = $['#realtime'].DataTable[{
data: dataSet,
columns: [
{ title: 'Name' },
{ title: 'Position' },
{ title: 'Office' },
{ title: 'Extn.' },
{ title: 'Start date' },
{ title: 'Salary' }
]
}];
Tập dữ liệu được lưu trữ trong một tệp JavaScript khác và phải được nhập trước tệp JS tùy chỉnh ở trên
Thêm bản ghi mới vào bảng
Để thêm các bản ghi mới vào bảng của chúng tôi, trước tiên chúng tôi tạo một biểu mẫu có các tùy chọn hợp lệ trong trang HTML của chúng tôi. Sau đó, chúng tôi tiến hành tạo một phương thức có tên là
const dataTable = $['#realtime'].DataTable[{
data: dataSet,
columns: [
{ title: 'Name' },
{ title: 'Position' },
{ title: 'Office' },
{ title: 'Extn.' },
{ title: 'Start date' },
{ title: 'Salary' }
]
}];
4 trong tệp JavaScript của chúng tôi. Sử dụng jQuery, chúng tôi làm cho const dataTable = $['#realtime'].DataTable[{
data: dataSet,
columns: [
{ title: 'Name' },
{ title: 'Position' },
{ title: 'Office' },
{ title: 'Extn.' },
{ title: 'Start date' },
{ title: 'Salary' }
]
}];
4 trả về giá trị của mọi tùy chọn trong biểu mẫu của chúng tôi bên dưới
Create New Employee
Name
Position
--Select Position--
Frontend Developer
UI/UX Engineer
iOS Engineer
Android Developer
Office
--Select Office--
Lagos
London
New York
Berlin
Extn
Start Date
Salary
Add
Sau đó chúng ta tiến hành tạo phương thức
const dataTable = $['#realtime'].DataTable[{
data: dataSet,
columns: [
{ title: 'Name' },
{ title: 'Position' },
{ title: 'Office' },
{ title: 'Extn.' },
{ title: 'Start date' },
{ title: 'Salary' }
]
}];
4
buildForm[] {
return [
$['#name'].val[],
$['#position'].val[],
$['#office'].val[],
$['#extn'].val[],
$['#startDate']
.val[]
.replace[new RegExp['-', 'g'], '/'],
`$${$['#salary'].val[]}`
];
},
Chúng tôi tạo một phương thức có tên là
const dataTable = $['#realtime'].DataTable[{
data: dataSet,
columns: [
{ title: 'Name' },
{ title: 'Position' },
{ title: 'Office' },
{ title: 'Extn.' },
{ title: 'Start date' },
{ title: 'Salary' }
]
}];
7 để nối thêm bất kỳ dữ liệu nào mà const dataTable = $['#realtime'].DataTable[{
data: dataSet,
columns: [
{ title: 'Name' },
{ title: 'Position' },
{ title: 'Office' },
{ title: 'Extn.' },
{ title: 'Start date' },
{ title: 'Salary' }
]
}];
4 trả về
addRow[dataTable] {
const formData = this.buildForm[];
const addedRow = dataTable.row.add[formData].draw[];
addedRow.show[].draw[false];
const addedRowNode = addedRow.node[];
console.log[addedRowNode];
$[addedRowNode].addClass['highlight'];
}
Các phương thức
const dataTable = $['#realtime'].DataTable[{
data: dataSet,
columns: [
{ title: 'Name' },
{ title: 'Position' },
{ title: 'Office' },
{ title: 'Extn.' },
{ title: 'Start date' },
{ title: 'Salary' }
]
}];
9 và
0 là các phương thức API DataTables sẵn có, các phương thức DataTables khác được triển khai trong const dataTable = $['#realtime'].DataTable[{
data: dataSet,
columns: [
{ title: 'Name' },
{ title: 'Position' },
{ title: 'Office' },
{ title: 'Extn.' },
{ title: 'Start date' },
{ title: 'Salary' }
]
}];
7 là
2,
3 và
4
9 thêm một hàng mới vào bảng bằng cách sử dụng dữ liệu đã choconst dataTable = $['#realtime'].DataTable[{ data: dataSet, columns: [ { title: 'Name' }, { title: 'Position' }, { title: 'Office' }, { title: 'Extn.' }, { title: 'Start date' }, { title: 'Salary' } ] }];
0 vẽ lại và cập nhật bảng trong bối cảnh hiện tại
2 hiển thị một trường trong bảng của chúng tôi. Điều này hữu ích cho các trường hợp khi bạn muốn có sẵn các trường biểu mẫu bổ sung, nhưng chỉ hiển thị chúng trong một số điều kiện nhất định
3 thêm một hàng mới mà không đặt lại hoặc làm biến dạng trang hiện tại
4 đóng vai trò là trình lắng nghe sự kiện, nó trả về phần tử DOM cho trường được yêu cầu, do đó cho phép thao tác DOM đối với trường
Sau đó, chúng tôi sử dụng phương thức
const dataTable = $['#realtime'].DataTable[{
data: dataSet,
columns: [
{ title: 'Name' },
{ title: 'Position' },
{ title: 'Office' },
{ title: 'Extn.' },
{ title: 'Start date' },
{ title: 'Salary' }
]
}];
7 mà chúng tôi đã xây dựng và liên kết nó với một nút bằng cách sử dụng phương thức
Create New Employee
Name
Position
--Select Position--
Frontend Developer
UI/UX Engineer
iOS Engineer
Android Developer
Office
--Select Office--
Lagos
London
New York
Berlin
Extn
Start Date
Salary
Add
1 của jQuery. Khi nhấp vào nút, const dataTable = $['#realtime'].DataTable[{
data: dataSet,
columns: [
{ title: 'Name' },
{ title: 'Position' },
{ title: 'Office' },
{ title: 'Extn.' },
{ title: 'Start date' },
{ title: 'Salary' }
]
}];
7 sẽ tự động thực hiện các chức năng của nó trên bảng của chúng tôi $['#add'].on['click', this.addRow.bind[this, dataTable]];
Chọn và xóa các bản ghi hiện có khỏi bảng
Bây giờ chúng ta hãy tạo một phương thức có tên là
Create New Employee
Name
Position
--Select Position--
Frontend Developer
UI/UX Engineer
iOS Engineer
Android Developer
Office
--Select Office--
Lagos
London
New York
Berlin
Extn
Start Date
Salary
Add
3 , chức năng của nó là chọn một hàng trong bảng của chúng ta. Việc chọn một hàng sẽ đặt hàng vào vị trí để chúng tôi có thể xóa nó. Phương thức này chỉ cần thêm một lớp
Create New Employee
Name
Position
--Select Position--
Frontend Developer
UI/UX Engineer
iOS Engineer
Android Developer
Office
--Select Office--
Lagos
London
New York
Berlin
Extn
Start Date
Salary
Add
4 vào hàng đã chọn và xóa bất kỳ hàng nào khác mà lớp
Create New Employee
Name
Position
--Select Position--
Frontend Developer
UI/UX Engineer
iOS Engineer
Android Developer
Office
--Select Office--
Lagos
London
New York
Berlin
Extn
Start Date
Salary
Add
4 đã được thêm vào trước đó
selectRow[dataTable] {
if [$[this].hasClass['selected']] {
$[this].removeClass['selected'];
} else {
dataTable.$['tr.selected'].removeClass['selected'];
$[this].addClass['selected'];
}
}
Chúng ta cũng tạo một phương thức gọi là
Create New Employee
Name
Position
--Select Position--
Frontend Developer
UI/UX Engineer
iOS Engineer
Android Developer
Office
--Select Office--
Lagos
London
New York
Berlin
Extn
Start Date
Salary
Add
6 , chức năng của nó là xóa một hàng khỏi bảng của chúng ta. Hàng bị loại bỏ là hàng có lớp
Create New Employee
Name
Position
--Select Position--
Frontend Developer
UI/UX Engineer
iOS Engineer
Android Developer
Office
--Select Office--
Lagos
London
New York
Berlin
Extn
Start Date
Salary
Add
4 removeRow[dataTable] {
dataTable.row['.selected'].remove[].draw[ false ];
}
Sau đó, chúng tôi tiến hành liên kết
Create New Employee
Name
Position
--Select Position--
Frontend Developer
UI/UX Engineer
iOS Engineer
Android Developer
Office
--Select Office--
Lagos
London
New York
Berlin
Extn
Start Date
Salary
Add
3 và
Create New Employee
Name
Position
--Select Position--
Frontend Developer
UI/UX Engineer
iOS Engineer
Android Developer
Office
--Select Office--
Lagos
London
New York
Berlin
Extn
Start Date
Salary
Add
6 với trình kích hoạt sự kiện tương ứng của chúng bằng cách sử dụng phương pháp
Create New Employee
Name
Position
--Select Position--
Frontend Developer
UI/UX Engineer
iOS Engineer
Android Developer
Office
--Select Office--
Lagos
London
New York
Berlin
Extn
Start Date
Salary
Add
1 của jQuery như chúng tôi đã làm trước đây với const dataTable = $['#realtime'].DataTable[{
data: dataSet,
columns: [
{ title: 'Name' },
{ title: 'Position' },
{ title: 'Office' },
{ title: 'Extn.' },
{ title: 'Start date' },
{ title: 'Salary' }
]
}];
7
0Cập nhật thời gian thực với Pizer
Để bật cập nhật theo thời gian thực trên bảng của chúng tôi, chúng tôi sẽ tích hợp Kênh Pizer. Kênh là một API được lưu trữ đơn giản để triển khai chức năng hai chiều theo thời gian thực một cách nhanh chóng, dễ dàng và an toàn trên web và ứng dụng dành cho thiết bị di động. Để đạt được điều này, Pusher phải được cài đặt ở cả phía máy khách và phía máy chủ. Phía máy khách có thẻ
buildForm[] {
return [
$['#name'].val[],
$['#position'].val[],
$['#office'].val[],
$['#extn'].val[],
$['#startDate']
.val[]
.replace[new RegExp['-', 'g'], '/'],
`$${$['#salary'].val[]}`
];
},
2 trong khi chúng tôi cài đặt npm ở phía máy chủ. Một số khung và gói sẽ được tích hợp cùng với Pusher, đây là- Thể hiện. Khung nhanh, nhẹ, linh hoạt cho Node. js
- bodyParser. Một mô-đun cung cấp phần mềm trung gian để trích xuất toàn bộ phần nội dung của luồng yêu cầu đến và hiển thị nó trên
3 dưới dạng thứ gì đó dễ giao tiếp hơnbuildForm[] { return [ $['#name'].val[], $['#position'].val[], $['#office'].val[], $['#extn'].val[], $['#startDate'] .val[] .replace[new RegExp['-', 'g'], '/'], `$${$['#salary'].val[]}` ]; },
- áo lót. một nút. js cung cấp phần mềm trung gian có thể được sử dụng để cho phép chia sẻ tài nguyên nguồn gốc chéo với các tùy chọn khác nhau
- trục. Ứng dụng khách HTTP dựa trên lời hứa dành cho JavaScript chủ yếu được sử dụng để gửi các yêu cầu HTTP không đồng bộ đến các điểm cuối REST và thực hiện các thao tác CRUD
Cài đặt Pusher trên Client
Chúng tôi bắt đầu bằng cách đưa thư viện Máy khách Pizer và Axios vào trang HTML của chúng tôi
1Trong tệp
buildForm[] {
return [
$['#name'].val[],
$['#position'].val[],
$['#office'].val[],
$['#extn'].val[],
$['#startDate']
.val[]
.replace[new RegExp['-', 'g'], '/'],
`$${$['#salary'].val[]}`
];
},
4 của chúng tôi, chúng tôi tạo một phương thức có tên là
buildForm[] {
return [
$['#name'].val[],
$['#position'].val[],
$['#office'].val[],
$['#extn'].val[],
$['#startDate']
.val[]
.replace[new RegExp['-', 'g'], '/'],
`$${$['#salary'].val[]}`
];
},
5 nơi chúng tôi thực hiện yêu cầu POST với Axios. Chúng tôi chuyển hai tham số trong yêu cầu POST của mình;
2Sau đó, chúng tôi thiết lập kết nối của mình với Pusher bằng cách tạo một phiên bản Pusher mới
Trong trường hợp của chúng tôi, chúng tôi chèn khóa API miễn phí mà chúng tôi nhận được khi đăng ký với Pusher. Để đảm bảo lưu lượng kết nối được mã hóa, chúng tôi đặt
buildForm[] {
return [
$['#name'].val[],
$['#position'].val[],
$['#office'].val[],
$['#extn'].val[],
$['#startDate']
.val[]
.replace[new RegExp['-', 'g'], '/'],
`$${$['#salary'].val[]}`
];
},
7 thành Boolean
buildForm[] {
return [
$['#name'].val[],
$['#position'].val[],
$['#office'].val[],
$['#extn'].val[],
$['#startDate']
.val[]
.replace[new RegExp['-', 'g'], '/'],
`$${$['#salary'].val[]}`
];
},
8 trong ứng dụng của mình
3Khóa là một phần của thông tin đăng nhập được tạo khi ứng dụng Kênh mới được tạo từ bảng điều khiển Pusher của bạn. Bạn có thể tạo một tài khoản bằng cách đăng ký. Xem Phụ lục cuối bài viết để biết cách thiết lập tài khoản Pizer
Cài đặt Kênh Pusher trên Máy chủ
Đầu tiên, chạy lệnh sau để cài đặt các phụ thuộc máy chủ
4Tệp
buildForm[] {
return [
$['#name'].val[],
$['#position'].val[],
$['#office'].val[],
$['#extn'].val[],
$['#startDate']
.val[]
.replace[new RegExp['-', 'g'], '/'],
`$${$['#salary'].val[]}`
];
},
9 được tạo; . Sau đó, chúng tôi tạo một phiên bản Pusher mới có một đối tượng chứa ID ứng dụng, khóa, bí mật, cụm và tùy chọn mã hóa của chúng tôiTiếp theo, chúng tôi tạo một tuyến đường POST và trong đó, chúng tôi sử dụng Pusher để kích hoạt sự kiện có tên
addRow[dataTable] {
const formData = this.buildForm[];
const addedRow = dataTable.row.add[formData].draw[];
addedRow.show[].draw[false];
const addedRowNode = addedRow.node[];
console.log[addedRowNode];
$[addedRowNode].addClass['highlight'];
}
0 thông qua kênh
addRow[dataTable] {
const formData = this.buildForm[];
const addedRow = dataTable.row.add[formData].draw[];
addedRow.show[].draw[false];
const addedRowNode = addedRow.node[];
console.log[addedRowNode];
$[addedRowNode].addClass['highlight'];
}
1
5Để nhận các cập nhật theo thời gian thực trên bảng của chúng tôi, trong tệp
buildForm[] {
return [
$['#name'].val[],
$['#position'].val[],
$['#office'].val[],
$['#extn'].val[],
$['#startDate']
.val[]
.replace[new RegExp['-', 'g'], '/'],
`$${$['#salary'].val[]}`
];
},
4 của chúng tôi [phía khách hàng], chúng tôi sử dụng phương pháp
addRow[dataTable] {
const formData = this.buildForm[];
const addedRow = dataTable.row.add[formData].draw[];
addedRow.show[].draw[false];
const addedRowNode = addedRow.node[];
console.log[addedRowNode];
$[addedRowNode].addClass['highlight'];
}
3 của Pusher để đăng ký kênh của chúng tôi
addRow[dataTable] {
const formData = this.buildForm[];
const addedRow = dataTable.row.add[formData].draw[];
addedRow.show[].draw[false];
const addedRowNode = addedRow.node[];
console.log[addedRowNode];
$[addedRowNode].addClass['highlight'];
}
4. Sau đó, chúng tôi xác định chức năng gọi lại liên kết sự kiện của chúng tôi
addRow[dataTable] {
const formData = this.buildForm[];
const addedRow = dataTable.row.add[formData].draw[];
addedRow.show[].draw[false];
const addedRowNode = addedRow.node[];
console.log[addedRowNode];
$[addedRowNode].addClass['highlight'];
}
0 và với nó, dữ liệu của chúng tôi
6Phần kết luận
Với hướng dẫn này, bạn sẽ có thể dễ dàng xây dựng các ứng dụng thời gian thực đa nền tảng. Các tính năng DataTables và Pusher khác có sẵn nhưng việc sử dụng chúng tùy thuộc vào yêu cầu của ứng dụng của bạn. Bạn có thể xem qua tài liệu DataTables và trong khi xem tài liệu đó, hãy xem qua cả Pusher's. Để hiểu sâu hơn về dự án, vui lòng khám phá thêm trên GitHub