websocket

 

 

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-web</artifactId>
    <version>2.7.4</version>
<!--            <exclusions>-->
<!--                <exclusion>-->
<!--                    <groupId>org.hibernate.validator</groupId>-->
<!--                    <artifactId>hibernate-validator</artifactId>-->
<!--                </exclusion>-->
<!--            </exclusions>-->
</dependency>
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-websocket</artifactId>
    <version>2.7.4</version>
</dependency>
<dependency>
    <groupId>org.projectlombok</groupId>
    <artifactId>lombok</artifactId>
    <version>1.18.22</version>
</dependency>

　　

websocket 是一种在单个TCP连接上进行全双工通信的协议
HTTP请求可能包含较长的头部，其中真正有效的数据可能只是很小的一部分，显然这样会浪费很多的带宽等资源
https://www.cnblogs.com/xuwenjin/p/12664650.html

@Configuration
public class WebSocketConfig {
    @Bean
    public ServerEndpointExporter serverEndpointExporter() {
        return new ServerEndpointExporter();
    }
}

@Slf4j
@Component
@ServerEndpoint(value="/websocketTest/{userId}")
public class WebsocketTest {
    private static String userId;
    //连接时执行
    @OnOpen
    public void onOpen(@PathParam("userId") String userId, Session session) throws IOException {
        this.userId = userId;
        log.info("新连接：{}",userId);
    }
    //关闭时执行
    @OnClose
    public void onClose(){
        log.info("连接：{} 关闭",this.userId);
    }
    //收到消息时执行
    @OnMessage
    public void onMessage(String message, Session session) throws IOException {
        log.info("收到用户{}的消息{}",this.userId,message);
        session.getBasicRemote().sendText("收到"+this.userId+"的消息:"+message); //回复用户
        log.info("wait before");
        try {
            Thread.sleep(5000);
        } catch (InterruptedException e) {
            e.printStackTrace();
        }
        log.info("wait ater");
        session.getBasicRemote().sendText("收到"+this.userId+"的消息2:"+message); //回复用户
    }
    //连接错误时执行
    @OnError
    public void onError(Session session, Throwable error){
        log.info("用户id为：{}的连接发送错误",this.userId);
        error.printStackTrace();
    }
}


<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        websocket Demo---- user000 <br />
        <input id="text" type="text" /> 
        <button onclick="send()"> Send </button>   
        <button   onclick="closeWebSocket()"> Close </button>
        <div id="message">   </div>
        
    <script type="text/javascript">
     //判断当前浏览器是否支持WebSocket
      if('WebSocket' in window){
          websocket = new WebSocket("ws://localhost:9990/websocketTest/userIdValue001");
          console.log("link success")
      }else{
          alert('Not support websocket')
      }
      
      //连接发生错误的回调方法
      websocket.onerror = function(){
          setMessageInnerHTML("error");
      };
       
      //连接成功建立的回调方法
      websocket.onopen = function(event){
          setMessageInnerHTML("open");
      }
       console.log("-----")
      //接收到消息的回调方法
      websocket.onmessage = function(event){
            setMessageInnerHTML(event.data);
      }
       
      //连接关闭的回调方法
      websocket.onclose = function(){
          setMessageInnerHTML("close");
      }
       
      //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
      window.onbeforeunload = function(){
          websocket.close();
      }
       
      //将消息显示在网页上
      function setMessageInnerHTML(innerHTML){
          document.getElementById('message').innerHTML += innerHTML + '<br/>';
      }
       
      //关闭连接
      function closeWebSocket(){
          websocket.close();
      }
       
      //发送消息
      function send(){
          var message = document.getElementById('text').value;
          websocket.send(message);
      }
    </script>
        
    </body>
</html>

　　

 

posted @ 2021-08-08 18:04  XUMT111  阅读(28)  评论(0)    收藏  举报