Websocker là phương thức h�?tr�?giao tiếp hai chiều giữa client và server đ�?tạo một kết nối trao đổi d�?liệu một cách mạnh m�?

Phân biệt Websocker và HTTP

Websocket giống HTTP �?điểm:

• Đều là những giao thức h�?tr�?việc truyền tải thông tin giữa máy ch�?và máy trạm.
• Mục đích của các nhà phát triển khi tạo ra WebSocket là nhằm đ�?khắc phục được nhược điểm đ�?tr�?cao của HTTP.

Websocket khác HTTP �?điểm:

• HTTP là giao thức 1 chiều dựa theo giao thức TCP, bạn có th�?tạo ra các kết nối dựa vào request HTTP, sau khi kết nối được thực hiện xong và được phản hồi lại, quá trình s�?kết thúc và đóng lại.
• Trong khi đó, WebSocket là một giao thức truyền tải 2 chiều giữa máy ch�?và máy khách. D�?liệu có th�?truyền 2 chiều giữa máy khách �?máy ch�?hoặc máy ch�?�?máy khách dựa trên những kết nối đã được thiết lập.

Nên s�?dụng WebSocket trong trường hợp nào?

• Ứng dụng theo thời gian thực
• Game Online
• Ứng dụng chat

Khi đã hiểu v�?s�?giống và khác nhau giữa WebSocket và HTTP thì,  tiếp theo chúng ta cùng tìm hiểu cách tạo 1 web realtime đơn giản s�?dụng Websocket, Java Spring Boot và AngularJs.

Đầu tiên chúng ta s�?tạo 1 project java spring boot bằng inteliij, sau đó s�?thêm các thư viện cần thiết đ�?s�?dụng như: spring web, lombok, connect-mysql, websocket �?�?đây chúng ta s�?dụng Gradle, các bạn cũng có th�?tạo project spring bằng maven và thêm các thư viện tương ứng.

Sau khi tạo project và thêm các thư viện s�?đến bước cấu hình Websocket.

• @Configuration: đánh dấu đây là một file cấu hình Spring.
• @EnableWebSocketMessageBroker: bật tính năng h�?tr�?WebSocket.
• WebSocketMessageBrokerConfigurer: Interface đ�?cấu hình các thông s�?của WebSocket.

Phương thức registerStompEndpoints() đăng ký một địa ch�?WebSocket endpoint và kích hoạt SockJS (một thư viện JavaScript đ�?h�?tr�?WebSocket cho các trình duyệt không h�?tr�?WebSocket).

• �?my-websocket-endpoint�?là địa ch�?WebSocket endpoint mà client kết nối đến
• “setAllowedOrigins(“http://127.0.0.1:5500�?�?ch�?cho phép kết nối đến t�?domain “http://127.0.0.1:5500�?(�?đây chính là live server).

Phương thức configureMessageBroker() cấu hình message broker cho WebSocket.

“enableSimpleBroker()�?đăng ký các đường đi (path) cho message broker, đây là các đường đi mà server s�?s�?dụng đ�?gửi tin nhắn đến client. �?topic�?và �?queue/�?là hai đường đi được đăng ký.

“setApplicationDestinationPrefixes()�?đăng ký tiền t�?(prefix) cho các message mapping đến server. Với cấu hình này, tất c�?các message mapping đến server phải có tiền t�?�?app�?

Tiếp theo chúng ta tạo 1 class Product với các thuộc tính như trên hình.

• Các chú thích (anotation) @Entity và @Table được s�?dụng đ�?ch�?định rằng lớp này là một thực th�?và phải được ánh x�?vào một bảng trong cơ s�?d�?liệu. Bảng tương ứng với lớp này s�?có tên “product�?
• Các chú thích @AllArgsConstructor và @NoArgsConstructor được s�?dụng đ�?tạo ra các hàm khởi tạo có tham s�?và không tham s�?cho đối tượng, giúp cho việc khởi tạo đối tượng tr�?nên thuận tiện hơn.
• Các chú thích @Getter và @Setter được s�?dụng đ�?tạo các phương thức getter và setter t�?động cho các trường d�?liệu của đối tượng.
• @Id được s�?dụng đ�?ch�?định trường d�?liệu “id�?của đối tượng là khóa chính trong bảng tương ứng.
• @GeneratedValue được s�?dụng đ�?ch�?định cách sinh khóa chính, �?đây là �?/span>GenerationType.IDENTITY�?nghĩa là cơ s�?d�?liệu s�?t�?động tạo giá tr�?khóa chính duy nhất (t�?tăng) cho mỗi bản ghi được thêm vào bảng.

Đây là file cấu hình đ�?kết nối đến cơ s�?d�?liệu (�?đây mình s�?dụng mysql, lưu ý các bạn phải tạo database tương ứng trước trong mysql).

Tạo file repository, đây là tầng giao tiếp với cơ s�?d�?liệu, thực hiện các câu truy vấn

�?tầng service, chúng ta tạo 2 phương thức getAll() và save(). Lưu ý phải có đánh dấu anotation @Service. Đánh dấu @Service �?trên một class trong Spring Framework đ�?đánh dấu rằng class này là một service component. Nói cách khác, class này đóng vai trò là một business service trong ứng dụng, chứa các logic x�?lý và tính toán trong ứng dụng.

Phần cuối cùng của phía backend là file controller (�?đây mình dùng RESTful API). @CrossOrigin(“http://127.0.0.1:5500�? được s�?dụng đ�?bật tính năng CORS (Cross-Origin Resource Sharing) cho phép request t�?domain //127.0.0.1:5500 (live server) được phép truy cập các resource t�?server.

• @Autowired được s�?dụng đ�?inject ProductService vào trong ProductController.
• Phương thức đầu tiên là phương thức tr�?v�?danh sách các đối tượng Product dưới dạng JSON.
• @MessageMapping(�?products�? định nghĩa một endpoint �?products�?dùng đ�?x�?lý message được gửi đến t�?client thông qua kết nối WebSocket.
• @SendTo(�?topic/product�? được s�?dụng đ�?định nghĩa đường đi (destination) cho kết qu�?tr�?v�?t�?message broker.
• Trong trường hợp này, khi server nhận được một message t�?client thông qua đường dẫn �?products�? nó s�?x�?lý message này và tr�?v�?một đối tượng Product. Đối tượng này s�?được gửi đến một địa ch�?�?topic/product�?thông qua message broker.

Tiếp theo là phần AngularJS, chúng ta cần thêm các thư viện như:

• angular.js
• angular-websocket.js ( là một thư viện h�?tr�?việc kết nối đến WebSocket server trên AngularJS, cung cấp một cách d�?dàng đ�?theo dõi trạng thái kết nối và gửi/nhận message giữa client và server)
• sockjs.min.js (là một thư viện JavaScript cung cấp một giao thức tương thích với WebSocket)
• stomp.js (là một thư viện JavaScript h�?tr�?việc s�?dụng giao thức STOMP (Simple Text Oriented Messaging Protocol) trên trình duyệt web. STOMP là một giao thức cho phép các ứng dụng trao đổi message thông qua một message broker trung gian). Ngoài ra mình tạo thêm 1 table hiển th�?danh sách product, 1 form đ�?thêm mới product.

�?file main.js, chúng ta cần tạo myApp và đăng ký module “ngWebSocket�?đ�?h�?tr�?việc s�?dụng WebSocket trong ứng dụng.

Tiếp đến là tạo controller và chúng ta s�?thực hiện viết code �?đây.

Đầu tiên là phương thức http.get() call api t�?bên backend đ�?lấy d�?liệu tr�?ra danh sách product.

Tiếp theo chúng ta s�?cần tạo WebSocket client thông qua địa ch�?�?/span>//localhost:8080/my-websocket-endpoint�?bằng cách s�?dụng thư viện SockJS.

Sau khi tạo đối tượng Websocket client chúng ta s�?kiểm tra xem ứng dụng của chúng ta đã kết nối được tới Websocket chưa thông qua hàm connect().

Khi kết nối thành công, đoạn code s�?dụng phương thức subscribe của đối tượng stompClient đ�?đăng ký lắng nghe thông điệp t�?địa ch�?�?topic/product�? Mỗi khi nhận được một thông điệp mới, đoạn code s�?x�?lý d�?liệu thông điệp bằng cách chuyển đổi d�?liệu t�?chuỗi JSON sang đối tượng JavaScript s�?dụng phương thức JSON.parse() và đẩy đối tượng sản phẩm mới vào danh sách sản phẩm hiện tại của ứng dụng.

Cuối cùng là phương thức addProduct() , phương thức này tạo ra một đối tượng chứa thông tin sản phẩm mới, s�?dụng phương thức send() của đối tượng stompClient đ�?gửi thông điệp này lên server tại địa ch�?�?app/products�?

Chúng ta s�?kiểm tra xem ứng dụng của chúng ta đã realtime hay chưa bằng cách m�?2 trình duyệt, thực hiện thêm mới Product �?1 trình duyệt, sau khi ấn thêm mới Product nếu �?c�?2 trình duyệt đều hiển th�?được sản phẩm vừa thêm mới thì chúc mừng bạn đã tạo 1 web realtime thành công!

Tra link git source code: tại đây

Trên đây là hướng dẫn các bạn cách tạo một web Realtime, hãy đọc k�?thông tin và thực hành ngay nhé. Chúc các bạn thành công!

B�?môn Ứng dụng phần mềm
Trường Cao đẳng FPT M?ng c�� c??c b��ng ?�� cơ s�?Hà Nội

The post Hướng dẫn tạo Web Realtime Basic bằng WebSocket, Java SpringBoot và Angular JS appeared first on Cao Đẳng FPT M?ng c�� c??c b��ng ?�� xét tuyển.