Hướng dẫn live chat javascript code - mã javascript trò chuyện trực tiếp
Trong hướng dẫn này, chúng ta sẽ học cách xây dựng một ứng dụng trò chuyện thời gian thực đơn giản bằng Node, Express và Socket.io. Ứng dụng trò chuyện này sẽ hỗ trợ tên người dùng tùy chỉnh, tham gia và để lại tin nhắn và tất nhiên chính các tin nhắn đó, tất cả đều ở thời gian thực. Dưới đây là một cái nhìn vào ứng dụng đã hoàn thành: Show Chúng ta sẽ tạo một ứng dụng Node.js , vì vậy hãy chắc chắn rằng bạn đã cài đặt nó. Bắt đầu
Cấu trúc tập tinBây giờ các dependencies của chúng ta đã được cài đặt, hãy tạo cấu trúc tệp của chúng ta:
Thiết lập máy chủMở tập tin server.js lên. Đây là nơi chúng ta cần yêu cầu express và socket.io và tạo một máy chủ mới. Chúng ta cũng cần sử dụng app.get để phân phối tệp HTML một cách dễ dàng. Ngoài ra, chúng ta phải cho express biết rằng tất cả các tệp tĩnh (html, css, js) của chúng ta đều nằm trong thư mục chung. Cuối cùng, chúng ta cần mở một cổng trên localhosttên máy chủ:server.js lên. Đây là nơi chúng ta cần yêu cầu express và socket.io và tạo một máy chủ mới. Chúng ta cũng cần sử dụng app.get để phân phối tệp HTML một cách dễ dàng. Ngoài ra, chúng ta phải cho express biết rằng tất cả các tệp tĩnh (html, css, js) của chúng ta đều nằm trong thư mục chung. Cuối cùng, chúng ta cần mở một cổng trên localhosttên máy chủ:
Bây giờ, mở tập tin index.html của bạn trong thư mục công cộng. Trong đó, chúng ta sẽ cần tạo một tài liệu HTML bình thường với các mục sau: Liên kết tập tin CSS của chúng tôi Tạo một formvới hai đầu vào - một cho tin nhắn (có id), một cho nút gửi Tạo một ulid với các tin nhắn đi vào Link liên kết JQuery cho JavaScript phía máy khách của chúng tôi Link liên kết /socket.io/socket.io.js Link liên kết client.js
Bây giờ bạn hãy di chuyển vào forder mình vừa tạo , hãy chạy node server.js và chuyển đến localhost:7777 trong trình duyệt của bạn, bạn sẽ thấy tệp HTML của mình được hiển thi.node server.js và chuyển đến localhost:7777 trong trình duyệt của bạn, bạn sẽ thấy tệp HTML của mình được hiển thi. Tương tác với máy chủMở tập tin client.js của bạn lên . Tại thời điểm này, chúng tôi cần kết nối với máy chủ của chúng ta bằng io.connect . Khi kết nối, chúng ta hãy phát ra một thông báo để xác nhận kết nối của chúng ta với một sự kiện join.client.js của bạn lên . Tại thời điểm này, chúng tôi cần kết nối với máy chủ của chúng ta bằng io.connect . Khi kết nối, chúng ta hãy phát ra một thông báo để xác nhận kết nối của chúng ta với một sự kiện join.
Sau đó, chúng ta có thể mở lại tập tin server.js của mình và ghi lại một thông báo rằng máy khách được kết nối. Ngoài ra, chúng tôi có thể lắng nghe join sự kiện chúng tôi đã viết trước đó để ghi lại dữ liệu từ máy khách. Đây là cách nó sẽ hoạt động:server.js của mình và ghi lại một thông báo rằng máy khách được kết nối. Ngoài ra, chúng tôi có thể lắng nghe join sự kiện chúng tôi đã viết trước đó để ghi lại dữ liệu từ máy khách. Đây là cách nó sẽ hoạt động:
Bây giờ, nếu bạn chạy lại tệp server.js trong thiết bị đầu cuối của mình (CTRL + C để thoát) và làm mới localhost:7777 trong trình duyệt của bạn, bạn sẽ thấy các thông báo client connected...& Hello server from clienttrong thiết bị đầu cuối xác nhận kết nối!server.js trong thiết bị đầu cuối của mình (CTRL + C để thoát) và làm mới localhost:7777 trong trình duyệt của bạn, bạn sẽ thấy các thông báo client connected...& Hello server from clienttrong thiết bị đầu cuối xác nhận kết nối! Tạo ứng dụng chatCuối cùng! Bây giờ chúng ta có kết nối, chúng ta có thể sử dụng nó để phát và gửi tin nhắn. Đây là những gì chúng ta cần làm trong tập tin client.js :
Tuy nhiên, trước khi chúng ta có một ứng dụng chức năng, chúng ta phải thêm messages sự kiện vào máy chủ của chúng ta và phát ra nó vào sự kiện!
Sửa lại giao diệnMở file style.css và tùy chỉnh nó theo ý thích của bạn!
Như vậy, ta đã hoàn thành một ứng dụng chat đơn giản bằng node js + socket io ! Nếu bạn mở nhiều tab, bạn sẽ thấy các tin nhắn đang được gửi real time! Cảm ơn các bạn đã xem bài viết của mình |