Tạo thành công khung chat 2 chiều trên web chỉ bằng CSS và HTML

Các công cụ trò chuyện với khách hàng dựa trên web hiện nay được sử dụng tương đối phổ biến và không có gì đặc biệt. Hầu hết các trang web (đặc biệt là những trang web mua sắm, tư vấn dịch vụ) đều thường được tích hợp sẵn một khung trò chuyện nhỏ, tự động bật lên từ một góc của trình duyệt, giúp nhân viên tư vấn, chăm sóc khách hàng có thể kết nối và trò chuyện trực tiếp với người truy cập.

Trên thực tế, hầu hết các tính năng trò chuyện trên web dạng này đều có điểm chung là được phát triển dựa trên JavaScript. Cùng với các ngôn ngữ lập trình thông dụng khác như CSS và HTML, JavaScript là một trong những sự lựa chọn số 1 của các lập trình viên trong việc tạo các ứng dụng web cũng như trang web tương tác.

Công cụ trò chuyện dựa trên web

Theo thống kê của W3Techs, JavaScript hiện được sử dụng bởi 95.2% các trang web trên toàn thế giới. Tuy JavaScript không phải lúc nào cũng chứa đựng những ưu điểm, nhưng sự đơn giản khiến nó vẫn là lựa chọn hàng đầu của các nhà phát triển web.

Trước đây đã có không ít nhà phát triển cố gắng thử tạo ra các khung trò chuyện web 2 chiều mà không sử dụng đến JavaScript. Họ sẽ phải dùng đến một số ngôn ngữ khác như Python và đồng thời cũng phải thêm một số thư viện vào danh sách yêu cầu. Điều này nhìn chung khiến cho việc tạo dựng khung chat web 2 chiều với các ngôn ngữ không phải JavaScript trở nên phức tạp và mất thời gian hơn khá nhiều.

JavaScript

Tuy nhiên, vào ngày 7/5 vừa qua, một nhà phát triển phần mềm có tên Kevin Kuchta, đến từ San Francisco, Hoa Kỳ đã làm được điều mà không một lập trình viên web nào làm trước đây từng làm, đó là tạo ra một khung trò chuyện hai chiều với đầy đủ chức năng chỉ bằng CSS và HTML.

Tất nhiên một số người có thể nhắc đến trường hợp của Harmless, một ứng dụng trò chuyện CSS cơ bản được tạo ra vào năm ngoái. Tuy nhiên thật không may là khung chat này lại chứa đựng một số bất tiện nhỏ như DOM phát triển vô hạn và không có cách nào để phân biệt giữa những người dùng khung trò chuyện. Do đó tôi không nghĩ Harmless thực sự là một ứng dụng chat web hoàn chỉnh.

Trở lại với sản phẩm của Kevin Kuchta. nhà phát triển này đã mô tả chi tiết thành quả của mình trên trang css-only-chat của GitHub. Về cơ bản, đây là một "khung trò chuyện web async thực sự kỳ lạ, ở chỗ nó không sử dụng bất kỳ JS nào trên frontend", và tất nhiên là cũng có thể được sử dụng để gửi tin nhắn qua lại giữa nhiều người dùng trong trình duyệt web mà không phải tải lại trang.

Css-only-chat

Khung trò chuyện dựa trên CSS của Kevin Kuchta hoạt động bằng cách kết hợp những hình ảnh nền được tải thông qua các pseudoselectors và trang chỉ mục tải liên tục - giúp cuộc trò chuyện diễn ra thông suốt và thông điệp được hiển thị giữa nhiều trình duyệt.

Bên cạnh đó, nhà phát triển này cũng đã giải thích chi tiết hoạt động bên trong của khung trò chuyện CSS trên trang dự án trên GitHub, nêu chi tiết những gì diễn ra sau khi dữ liệu được gửi bởi một trong những người dùng và khi một người khác ở đầu bên kia nhận được tin nhắn.

Kevin Kuchta cho biết cảm hứng khiến anh quyết định tạo ra một khung trò chuyện trên web không đồng bộ JavaScript như trên là từ nhà nghiên cứu bảo mật Davy Wybirus - người gần đây đã trình bày chi tiết trên Twitter về cách các trang web có thể sử dụng chỉ CSS và HTML để theo dõi chuyển động của chuột trong cửa sổ trình duyệt từ một trình duyệt web khác - một phương pháp theo dõi cũng hoạt động trong Tor Browser.

Bên cạnh đó, một số phương pháp theo dõi người dùng dựa trên CSS cũng có thể được sử dụng để thu thập thông tin như độ phân giải màn hình, tên trình duyệt, số lần nhấp vào liên kết, cũng như thông tin về hệ điều hành bằng cách kiểm tra các phông chữ (fonts) được hỗ trợ.

CSS

Tạm đặt các mánh khóe của CSS ra một bên, có thể nói sự thành công của Kevin Kuchta đã mở ra tiềm năng rất lớn trong việc xây dựng ứng dụng web mà không phải phụ thuộc vào những ngôn ngữ lập trình cấp cao mà điển hình là JavaScript, trong khi tính hiệu quả và khả năng hoạt động ổn định vẫn được đảm bảo.

Rõ ràng chưa thể coi đây là một sản phẩm hoàn chỉnh, nhưng với một chút tinh chỉnh đơn giản trong thời gian sắp tới, khung chat của Kevin Kuchta thực sự có thể là một ý tưởng khả thi để áp dụng trên thực thế với vai trò là một ứng dụng hỗ trợ trò chuyện dựa trên web đơn giản mà không kém phần hiệu quả.

Thứ Bảy, 11/05/2019 08:09
52 👨 1.406
0 Bình luận
Sắp xếp theo
    ❖ Chuyện công nghệ