0


一文了解WebSocket及Springboot集成WebSocket

文章目录

WebSocket是什么

🍊WebSocket是一种网络通信协议,它提供了在单个TCP连接上进行全双工通信的能力。这意味着在一个连接上,服务器和客户端都可以同时发送和接收数据。

🍊WebSocket与HTTP协议不同,它使用了独立的端口,并且在建立连接后,不需要在每次数据传输时重新建立连接。这使得它特别适合于实时应用程序,例如聊天,在线游戏和股票交易等,这些应用程序需要高速,双向的数据传输。

🍊WebSocket协议是HTML5标准的一部分,因此它可以在现代浏览器中使用。WebSocket API可以在JavaScript中使用,这样就可以在网页上直接使用WebSocket进行通信。

🍊WebSocket使用了一种称为握手的连接建立机制,服务器和客户端在建立连接之前需要进行握手。握手是通过HTTP协议完成的,但是一旦建立连接后,数据传输将使用WebSocket协议。

WebSocket通信原理和机制

   WebSocket是一种在单个TCP连接上进行全双工通信的协议。它使得客户端和服务器之间能够进行双向通信而不必进行多次HTTP请求和响应。

WebSocket通信的流程如下:

  1. 客户端发送一个HTTP请求,请求的目的是为了要建立一个WebSocket连接。
  2. 服务器收到请求后,给出一个HTTP响应,并升级连接到WebSocket协议。
  3. 客户端和服务器之间建立一个WebSocket连接。
  4. 客户端和服务器之间可以进行双向通信,发送文本和二进制数据。
  5. 当客户端或服务器关闭连接时,WebSocket连接也会关闭。

与 HTTP 通信不同的是,WebSocket 通信是基于TCP的,所以它是一个持久连接。它允许服务器主动发送信息给客户端,而不是等待客户端的请求。这使得 WebSocket 通信成为了实现实时应用的理想选择。

如下图所示,发起一个websocket链接之后,请求和响应的参数里会有一些websocket相关的参数,该报文中有一个upgrade首部,它的作用是告诉服务端需要将通信协议切换到websocket

在这里插入图片描述

WebSocket协议是什么

🍊WebSocket协议是一种网络协议,它定义了浏览器和服务器之间的通信协议。WebSocket协议实现了客户端和服务器之间的双向通信,而不是传统的单向通信。

🍊WebSocket协议是基于TCP协议的,并且在建立连接时使用了HTTP协议。在建立连接时,客户端发送一个HTTP请求到服务器,请求升级连接到WebSocket协议。服务器收到请求后,给出一个HTTP响应,并升级连接到WebSocket协议。之后客户端和服务器就可以通过WebSocket协议进行双向通信了。

🍊WebSocket协议是一种全双工协议,它允许服务器主动发送信息给客户端,而不是等待客户端的请求。这使得WebSocket协议成为了实现实时应用的理想选择。

🍊WebSocket协议是IETF(Internet Engineering Task Force)标准化组织于2011年发布的一种新的协议,并且在2013年正式成为因特网标准。

WebSocket协议和Http协议有什么区别

WebSocket协议和HTTP协议有以下几点区别:

  1. 通信方式不同: HTTP协议是一种请求-响应协议,客户端发送请求给服务器,服务器返回响应。而WebSocket协议是一种全双工协议,客户端和服务器都可以主动发送消息。
  2. 链接状态不同: HTTP协议是无状态的,每次请求都是独立的。而WebSocket协议是有状态的,建立了连接之后,客户端和服务器之间可以维持长连接。
  3. 数据传输不同: HTTP协议是基于文本的,而WebSocket协议是基于二进制的。
  4. 延迟不同: HTTP协议每次请求都需要建立连接,等待响应,传输数据,释放连接,这整个过程都需要一些时间。而WebSocket协议只需要建立一次连接,之后就可以高效地进行数据传输,所以延迟更小。

WebSocket常用在那些场景

常见的应用场景如下:

  1. 在线聊天:实现实时的文本聊天功能。
  2. 直播和视频会议:实现实时的音频和视频传输。
  3. 游戏:实现实时的游戏状态同步和控制。
  4. 实时监控和控制:实现实时的硬件监控和控制。
  5. 数据可视化:实现实时的数据可视化和分析。
  6. 在线协作:实现实时的文档协作和编辑。
  7. 智能家居:实现实时的智能家居控制。
  8. 推送消息:实现实时的推送消息功能

这些场景中,WebSocket的实时通信特性使得WebSocket成为了一种理想的选择。

Springboot集成WebSocket

🍊使用springboot+WebSocket+JavaScript实现一个简单的示例

pom依赖

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.7.0</version>
    </parent>
    <groupId>com.example</groupId>
    <artifactId>demo</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <packaging>war</packaging>
    <name>demo</name>
    <description>Demo project for Spring Boot</description>
    <properties>
        <java.version>8</java.version>
        <java.encoding>UTF-8</java.encoding>
        <slf4j.version>1.7.30</slf4j.version>
    </properties>
    <dependencies>

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

        <!--  springboot集成websocket -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-websocket</artifactId>
        </dependency>

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

        <!-- 引入日志管理相关依赖-->
        <dependency>
            <groupId>org.slf4j</groupId>
            <artifactId>slf4j-api</artifactId>
            <version>${slf4j.version}</version>
        </dependency>
        <dependency>
            <groupId>org.slf4j</groupId>
            <artifactId>slf4j-log4j12</artifactId>
            <version>${slf4j.version}</version>
        </dependency>
        <dependency>
            <groupId>org.apache.logging.log4j</groupId>
            <artifactId>log4j-to-slf4j</artifactId>
            <version>2.14.0</version>
        </dependency>

    </dependencies>

    <build>
        <pluginManagement>
            <plugins>
                <plugin>
                    <groupId>org.apache.maven.plugins</groupId>
                    <artifactId>maven-compiler-plugin</artifactId>
                    <version>3.1</version>
                    <configuration>
                        <target>${java.version}</target>
                        <source>${java.version}</source>
                        <encoding>${java.encoding}</encoding>
                    </configuration>
                </plugin>
                <plugin>
                    <groupId>org.apache.maven.plugins</groupId>
                    <artifactId>maven-surefire-plugin</artifactId>
                    <version>2.6</version>
                </plugin>
                <plugin>
                    <groupId>org.apache.maven.plugins</groupId>
                    <artifactId>maven-release-plugin</artifactId>
                    <configuration>
                        <arguments>-Prelease</arguments>
                    </configuration>
                </plugin>
                <plugin>
                    <groupId>org.apache.maven.plugins</groupId>
                    <artifactId>maven-source-plugin</artifactId>
                    <version>2.1</version>
                    <configuration>
                        <attach>true</attach>
                    </configuration>
                    <executions>
                        <execution>
                            <phase>compile</phase>
                            <goals>
                                <goal>jar</goal>
                            </goals>
                        </execution>
                    </executions>

                </plugin>
            </plugins>
        </pluginManagement>
    </build>

</project>

java相关代码

config

importorg.springframework.beans.factory.annotation.Autowired;importorg.springframework.context.annotation.Configuration;importorg.springframework.web.socket.WebSocketHandler;importorg.springframework.web.socket.config.annotation.EnableWebSocket;importorg.springframework.web.socket.config.annotation.WebSocketConfigurer;importorg.springframework.web.socket.config.annotation.WebSocketHandlerRegistry;/**
 * @author 
 * @date 2023年01月29日 14:07
 */@Configuration@EnableWebSocketpublicclassWebSocketConfigimplementsWebSocketConfigurer{@AutowiredprivateWebSocketHandler webSocketHandler;@OverridepublicvoidregisterWebSocketHandlers(WebSocketHandlerRegistry registry){
        registry.addHandler(webSocketHandler,"/websocket").setAllowedOrigins("*");}}
importorg.springframework.stereotype.Component;importjavax.servlet.*;importjavax.servlet.http.HttpServletRequest;importjavax.servlet.http.HttpServletResponse;importjava.io.IOException;/**
 * @author 
 * 解决跨域问题
 * @date 2023年01月29日 14:46
 */@ComponentpublicclassCorsFilterimplementsFilter{@OverridepublicvoiddoFilter(ServletRequest req,ServletResponse res,FilterChain chain)throwsIOException,ServletException{HttpServletResponse response =(HttpServletResponse) res;HttpServletRequest request =(HttpServletRequest) req;
        response.setHeader("Access-Control-Allow-Origin","*");
        response.setHeader("Access-Control-Allow-Methods","POST, GET, PUT, OPTIONS, DELETE");
        response.setHeader("Access-Control-Max-Age","3600");
        response.setHeader("Access-Control-Allow-Headers","Content-Type, Authorization, Content-Length, X-Requested-With");if("OPTIONS".equalsIgnoreCase(request.getMethod())){
            response.setStatus(HttpServletResponse.SC_OK);}else{
            chain.doFilter(req, res);}}@Overridepublicvoidinit(FilterConfig filterConfig){}@Overridepublicvoiddestroy(){}}

component

importorg.slf4j.Logger;importorg.slf4j.LoggerFactory;importorg.springframework.stereotype.Component;importorg.springframework.web.socket.CloseStatus;importorg.springframework.web.socket.TextMessage;importorg.springframework.web.socket.WebSocketSession;importorg.springframework.web.socket.handler.TextWebSocketHandler;importjava.io.IOException;importjava.util.ArrayList;importjava.util.List;/**
 * @author 
 * @date 2023年01月29日 14:08
 */@ComponentpublicclassWebSocketHandlerextendsTextWebSocketHandler{privatestaticfinalLoggerLOGGER=LoggerFactory.getLogger(WebSocketHandler.class);privatestaticfinalList<WebSocketSession> sessions =newArrayList<>();@OverridepublicvoidhandleTextMessage(WebSocketSession session,TextMessage message){LOGGER.info("Received message: {}", message.getPayload());for(WebSocketSession webSocketSession : sessions){try{
                webSocketSession.sendMessage(message);}catch(IOException e){LOGGER.error("Error: {}", e.getMessage());}}}@OverridepublicvoidafterConnectionEstablished(WebSocketSession session){
        sessions.add(session);}@OverridepublicvoidafterConnectionClosed(WebSocketSession session,CloseStatus status){
        sessions.remove(session);}}

html代码

<!DOCTYPEhtml><html><head><title>WebSocket Example</title></head><body><inputtype="text"id="messageInput"><buttononclick="sendMessage()">Send</button><script>var socket =newWebSocket("ws://localhost:8080/websocket");

    socket.onopen=function(event){
        console.log("WebSocket is open now.");};

    socket.onmessage=function(event){var message = event.data;
        console.log("Received message: "+ message);};

    socket.onclose=function(event){
        console.log("WebSocket is closed now.");};functionsendMessage(){var message = document.getElementById("messageInput").value;
        socket.send(message);}</script></body></html>

页面访问效果

访问页面时开启websocket连接,输入文字时能接收到对应的反馈信息

在这里插入图片描述

客户端发送和接收到的信息

在这里插入图片描述


本文转载自: https://blog.csdn.net/asd1358355022/article/details/128788798
版权归原作者 力不竭!!!战不止!!! 所有, 如有侵权,请联系我们删除。

“一文了解WebSocket及Springboot集成WebSocket”的评论:

还没有评论