Toggle Theme Editor
Slate Blueberry Blackcurrant Watermelon Strawberry Orange Banana Apple Emerald Chocolate Charcoal

Giới thiệu về Spring websocket

Discussion in 'Spring Framework' started by macarong35, 13/1/18.

  1. macarong35

    macarong35 Administrator Staff Member

    Chào mọi người!
    Hôm nay mình sẽ làm môt bài hướng dẫn về Spring websocket, kiến thức trong bài là những cái mình đã tìm hiểu được, bạn nào thấy còn thiếu hay có sai sót gì thì bổ sung thêm nhé.
    Server:
    - Spring boot - Stomp - Maven
    Client:
    - Ajax
    Phần sau mình sẽ hướng dẫn các bạn xây dựng ứng dụng android kết nối tới websocket. Trong nội dung bài viết mình có sử dụng một số nội dung trên internet để tham khảo.

    1. Websocket là gì?
    WebSoket là công nghệ hỗ trợ giao tiếp hai chiều giữa client và server bằng cách sử dụng một TCP socket để tạo một kết nối hiệu quả và ít tốn kém. Mặc dù được thiết kế để chuyên sử dụng cho các ứng dụng web, lập trình viên vẫn có thể đưa chúng vào bất kì loại ứng dụng nào.

    WebSockets mới xuất hiện trong HTML5, là một kỹ thuật Reverse Ajax. WebSockets cho phép các kênh giao tiếp song song hai chiều và hiện đã được hỗ trợ trong nhiều trình duyệt (Firefox, Google Chrome và Safari). Kết nối được mở thông qua một HTTP request (yêu cầu HTTP), được gọi là liên kết WebSockets với những header đặc biệt. Kết nối được duy trì để bạn có thể viết và nhận dữ liệu bằng JavaScript như khi bạn đang sử dụng một TCP socket đơn thuần.

    Dữ liệu truyền tải thông qua giao thức HTTP (thường dùng với kĩ thuật Ajax) chứa nhiều dữ liệu không cần thiết trong phần header. Một header request/response của HTTP có kích thước khoảng 871 byte, trong khi với WebSocket, kích thước này chỉ là 2 byte (sau khi đã kết nối).
    Vậy giả sử bạn làm một ứng dụng game có thể tới 10,000 người chơi đăng nhập cùng lúc, và mỗi giây họ sẽ gửi/nhận dữ liệu từ server. Hãy so sánh lượng dữ liệu header mà giao thức HTTP và WebSocket trong mỗi giây:

    - HTTP: 871 x 10,000 = 8,710,000 bytes = 69,680,000 bits per second (66 Mbps)
    - WebSocket: 2 x 10,000 = 20,000 bytes = 160,000 bits per second (0.153 Kbps)

    Như bạn thấy chỉ riêng phần header thôi cũng đã chiếm một phần lưu lượng đáng kể với giao thức HTTP truyền thống.
    Web socket giúp cho việc giao tiếp giữa client và server nhanh chóng, độ trễ thấp. Server có thể truyền dữ liệu về client bất cứ lúc nào mà không cần phải có request từ client, miễn là kết nối còn hiệu lực. Khi socket được mở thì kết nối sẽ được duy trì liên tục cho đến khi client hoặc server đóng kết nối này. Điều này rất thích hợp trong các ứng dụng chat, game ..
    Do websocket là một đặc tả của HTML5 nên những trình duyệt cũ sẽ không hỗ trợ phương thức này. (Cái này chắc ko quan trọng lắm. Kaka)
    2. Cấu hình maven
    (Trong phạm vi bài viết này, mình mặc định các bạn đã nắm rõ về spring boot và maven nên mình sẽ ko nói chi tiết ở bài này, nếu bạn nào có nhu cầu thì mình sẽ viết thêm một bài hướng dẫn về xây dựng 1 project spring boot.)
    Chúng ta phải khai báo dependency:
    PHP:
    <dependency>
        <
    groupId>org.springframework.boot</groupId>
        <
    artifactId>spring-boot-starter-tomcat</artifactId>
    </
    dependency>

    <
    dependency>
        <
    groupId>org.springframework.boot</groupId>
        <
    artifactId>spring-boot-devtools</artifactId>
        <
    optional>true</optional>
    </
    dependency>

    <
    dependency>
        <
    groupId>org.springframework.boot</groupId>
        <
    artifactId>spring-boot-starter-test</artifactId>
        <
    scope>test</scope>
    </
    dependency>

    <
    dependency>
        <
    groupId>org.springframework</groupId>
        <
    artifactId>spring-websocket</artifactId>
        <
    version>4.2.4.RELEASE</version>
    </
    dependency>

    <
    dependency>
        <
    groupId>org.springframework</groupId>
        <
    artifactId>spring-messaging</artifactId>
        <
    version>4.2.4.RELEASE</version>
    </
    dependency>
        
    Do chúng ta sử dụng Json để gửi các message qua lại nên cần bổ sung thêm:
    PHP:
    <dependency>
        <
    groupId>com.fasterxml.jackson.core</groupId>
        <
    artifactId>jackson-core</artifactId>
        <
    version>2.7.3</version>
    </
    dependency>
     
    <
    dependency>
        <
    groupId>com.fasterxml.jackson.core</groupId>
        <
    artifactId>jackson-databind</artifactId>
        <
    version>2.7.3</version>
    </
    dependency>
    3. Cấu hình Spring websocket
    Bây giờ chúng ta sẽ thêm các cấu hình căn bản cho websocket.
    Tạo một class với tên WebSocketConfig.java.
    PHP:
    @Configuration
    @EnableWebSocketMessageBroker
    public class WebSocketConfig extends AbstractWebSocketMessageBrokerConfigurer {

        @
    Override
        
    public void configureMessageBroker(MessageBrokerRegistry config) {
            
    config.enableSimpleBroker("/topic");
            
    config.setApplicationDestinationPrefixes("/app");
        }

        @
    Override
        
    public void registerStompEndpoints(StompEndpointRegistry registry) {
            
    registry.addEndpoint("/my-websocket").withSockJS();
        }

    }
    @Configuration để khai báo cho spring biết đây là 1 file cấu hình. Cái này mấy bạn đã rành.
    @EnableWebSocketMessageBroker cho phép xử lý tin nhắn WebSocket.
    addEndpoint("/my-websocket") để định nghĩa url cho client kết nối tới.
    config.enableSimpleBroker("/topic") khai báo các url để lọc các message được gửi tới server cũng như từ server gửi trả về cho client thông qua @MessageMapping trong controller, các bạn sẽ nắm rõ hơn ở mục bên dưới.

    Do các message truyền gửi giữa client và server là JSON nên chúng ta cần khai báo các class để chuyển chuỗi JSON qua Object và ngược lại.
    Khai báo message gửi và nhận:
    PHP:
    public class HelloMessage {

        private 
    String name;

        public 
    HelloMessage() {
        }

        public 
    HelloMessage(String name) {
            
    this.name name;
        }

        public 
    String getName() {
            return 
    name;
        }

        public 
    void setName(String name) {
            
    this.name name;
        }
    }
    PHP:
    public class Greeting {

        private 
    String content;

        public 
    Greeting() {
        }

        public 
    Greeting(String content) {
            
    this.content content;
        }

        public 
    String getContent() {
            return 
    content;
        }

    }
    Tạo Controller để xử lý message và gửi message cho client.
    PHP:
    @Controller
    public class GreetingController {

        @
    MessageMapping("/hello")
        @
    SendTo("/topic/greetings")
        public 
    Greeting greeting(HelloMessage messagethrows Exception {
            return new 
    Greeting("Hello, " message.getName() + "!");
        }

    }
    Với các thành phần như trên thì chúng ta đã khai báo thành công 1 web app có tích hợp websocket, khi start spring boot app các bạn có thể kiểm tra websocket đã được mở hay chưa bằng cách mở trình duyệt và chạy:
    Code:
    http://localhost:8080/my-websocket
    Nếu kết quả trả về là
    HTML:
    Welcome to SockJS!
    Là chúng ta đã thành công.
    Trong phần sau mình sẽ hướng dẫn các bạn kết nối từ html tới websocket và gửi nhận message.
     
    tranhuyvc likes this.

Chia sẻ trang này

Loading...