websocket怎么在springboot中使用

发布时间：2021-01-25 15:57:31 来源：亿速云阅读：208 作者：Leah 栏目：开发技术

本篇文章为大家展示了websocket怎么在springboot中使用，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。

一、websocket与http

http协议是用在应用层的协议，他是基于tcp协议的，http协议建立链接也必须要有三次握手才能发送信息。http链接分为短链接，长链接，短链接是每次请求都要三次握手才能发送自己的信息。即每一个request对应一个response。长链接是在一定的期限内保持链接。保持TCP连接不断开。客户端与服务器通信，必须要有客户端发起然后服务器返回结果。客户端是主动的，服务器是被动的。
WebSocket是HTML5中的协议，他是为了解决客户端发起多个http请求到服务器资源浏览器必须要经过长时间的轮训问题而生的，他实现了多路复用，他是全双工通信。在webSocket协议下客服端和浏览器可以同时发送信息。

二、HTTP的长连接与websocket的持久连接

HTTP1.1的连接默认使用长连接（persistent connection），

即在一定的期限内保持链接，客户端会需要在短时间内向服务端请求大量的资源，保持TCP连接不断开。客户端与服务器通信，必须要有客户端发起然后服务器返回结果。客户端是主动的，服务器是被动的。

在一个TCP连接上可以传输多个Request/Response消息对，所以本质上还是Request/Response消息对，仍然会造成资源的浪费、实时性不强等问题。

如果不是持续连接，即短连接，那么每个资源都要建立一个新的连接，HTTP底层使用的是TCP，那么每次都要使用三次握手建立TCP连接，即每一个request对应一个response，将造成极大的资源浪费。

长轮询，即客户端发送一个超时时间很长的Request，服务器hold住这个连接，在有新数据到达时返回Response

websocket的持久连接只需建立一次Request/Response消息对，之后都是TCP连接，避免了需要多次建立Request/Response消息对而产生的冗余头部信息。

Websocket只需要一次HTTP握手，所以说整个通讯过程是建立在一次连接/状态中，而且websocket可以实现服务端主动联系客户端，这是http做不到的。

springboot集成websocket的不同实现方式：

pom添加依赖

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

因涉及到js连接服务端，所以也写了对应的html，这里集成下thymeleaf模板，前后分离的项目这一块全都是前端做的

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

配置文件：

server:
 port: 8885
 
#添加Thymeleaf配置
thymeleaf:
 cache: false
 prefix: classpath:/templates/
 suffix: .html
 mode: HTML5
 encoding: UTF-8
 content-type: text/html

1：自定义WebSocketServer，使用底层的websocket方法，提供对应的onOpen、onClose、onMessage、onError方法

1.1：添加webSocketConfig配置类

/**
 * 开启WebSocket支持
 * Created by huiyunfei on 2019/5/31.
 */
@Configuration
public class WebSocketConfig {
  @Bean
  public ServerEndpointExporter serverEndpointExporter() {
    return new ServerEndpointExporter();
  }
}

1.2：添加webSocketServer服务端类

package com.example.admin.web;
 
/**
 * Created by huiyunfei on 2019/5/31.
 */
 
@ServerEndpoint("/websocket/{sid}")
@Component
@Slf4j
public class WebSocketServer {
  //静态变量，用来记录当前在线连接数。应该把它设计成线程安全的。
  private static int onlineCount = 0;
  //concurrent包的线程安全Set，用来存放每个客户端对应的MyWebSocket对象。
  private static CopyOnWriteArraySet<WebSocketServer> webSocketSet = new CopyOnWriteArraySet<WebSocketServer>();
 
  //与某个客户端的连接会话，需要通过它来给客户端发送数据
  private Session session;
 
  //接收sid
  private String sid="";
 
 
  */
/**
   * 连接建立成功调用的方法*//*
  @OnOpen
  public void onOpen(Session session, @PathParam("sid") String sid) {
    this.session = session;
    webSocketSet.add(this);   //加入set中
    addOnlineCount();      //在线数加1
    log.info("有新窗口开始监听:"+sid+",当前在线人数为" + getOnlineCount());
    this.sid=sid;
    try {
      sendMessage("连接成功");
    } catch (IOException e) {
      log.error("websocket IO异常");
    }
  }
  */
/**
   * 连接关闭调用的方法
   *//*
  @OnClose
  public void onClose() {
    webSocketSet.remove(this); //从set中删除
    subOnlineCount();      //在线数减1
    log.info("有一连接关闭！当前在线人数为" + getOnlineCount());
  }
  */
/**
   * 收到客户端消息后调用的方法
   *
   * @param message 客户端发送过来的消息*//*
  @OnMessage
  public void onMessage(String message, Session session) {
    log.info("收到来自窗口"+sid+"的信息:"+message);
    //群发消息
    for (WebSocketServer item : webSocketSet) {
      try {
        item.sendMessage(message);
      } catch (IOException e) {
        e.printStackTrace();
      }
    }
  }
  */
/**
   *
   * @param session
   * @param error
   *//*
  @OnError
  public void onError(Session session, Throwable error) {
    log.error("发生错误");
    error.printStackTrace();
  }
  */
/**
   * 实现服务器主动推送
   *//*
  public void sendMessage(String message) throws IOException {
    this.session.getBasicRemote().sendText(message);
  }
  */
/**
   * 群发自定义消息
   * *//*
  public static void sendInfo(String message,@PathParam("sid") String sid) throws IOException {
    log.info("推送消息到窗口"+sid+"，推送内容:"+message);
    for (WebSocketServer item : webSocketSet) {
      try {
        //这里可以设定只推送给这个sid的，为null则全部推送
        if(sid==null) {
          item.sendMessage(message);
        }else if(item.sid.equals(sid)){
          item.sendMessage(message);
        }
      } catch (IOException e) {
        continue;
      }
    }
  }
  public static synchronized int getOnlineCount() {
    return onlineCount;
  }
  public static synchronized void addOnlineCount() {
    WebSocketServer.onlineCount++;
  }
  public static synchronized void subOnlineCount() {
    WebSocketServer.onlineCount--;
  }
  public static CopyOnWriteArraySet<WebSocketServer> getWebSocketSet() {
    return webSocketSet;
  }
}

1.3：添加对应的controller

@Controller
@RequestMapping("/system")
public class SystemController {
  //页面请求
  @GetMapping("/index/{userId}")
  public ModelAndView socket(@PathVariable String userId) {
    ModelAndView mav=new ModelAndView("/socket1");
    mav.addObject("userId", userId);
    return mav;
  }
  //推送数据接口
  @ResponseBody
  @RequestMapping("/socket/push/{cid}")
  public Map pushToWeb(@PathVariable String cid, String message) {
    Map result = new HashMap();
    try {
      WebSocketServer.sendInfo(message,cid);
      result.put("code", 200);
      result.put("msg", "success");
    } catch (IOException e) {
      e.printStackTrace();
    }
    return result;
  }

1.4：提供socket1.html页面

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"></meta>
  <title>Title</title>
</head>
<body>
hello world!
 
</body>
<script>
  var socket;
  if(typeof(WebSocket) == "undefined") {
    console.log("您的浏览器不支持WebSocket");
  }else{
    console.log("您的浏览器支持WebSocket");
    //实现化WebSocket对象，指定要连接的服务器地址与端口 建立连接
    //等同于
    index = new WebSocket("ws://localhost:8885/websocket/2");
    //socket = new WebSocket("${basePath}websocket/${cid}".replace("http","ws"));
    //打开事件
    index.onopen = function() {
      console.log("Socket 已打开");
      //socket.send("这是来自客户端的消息" + location.href + new Date());
    };
    //获得消息事件
    index.onmessage = function(msg) {
      console.log(msg.data);
      //发现消息进入  开始处理前端触发逻辑
    };
    //关闭事件
    index.onclose = function() {
      console.log("Socket已关闭");
    };
    //发生了错误事件
    index.onerror = function() {
      alert("Socket发生了错误");
      //此时可以尝试刷新页面
    }
    //离开页面时，关闭socket
    //jquery1.8中已经被废弃，3.0中已经移除
    // $(window).unload(function(){
    //   socket.close();
    //});
  }
</script>
</html>

总结：

浏览器debug访问 localhost:8885/system/index/1跳转到socket1.html，js自动连接server并传递cid到服务端，服务端对应的推送消息到客户端页面（cid区分不同的请求，server里提供的有群发消息方法）

2.1：基于STOMP协议的WebSocket

使用STOMP的好处在于，它完全就是一种消息队列模式，你可以使用生产者与消费者的思想来认识它，发送消息的是生产者，接收消息的是消费者。而消费者可以通过订阅不同的destination，来获得不同的推送消息，不需要开发人员去管理这些订阅与推送目的地之前的关系，spring官网就有一个简单的spring-boot的stomp-demo,如果是基于springboot，大家可以根据spring上面的教程试着去写一个简单的demo。

提供websocketConfig配置类

/**
 * @Description:
registerStompEndpoints(StompEndpointRegistry registry)
configureMessageBroker(MessageBrokerRegistry config)
这个方法的作用是定义消息代理，通俗一点讲就是设置消息连接请求的各种规范信息。
registry.enableSimpleBroker("/topic")表示客户端订阅地址的前缀信息，也就是客户端接收服务端消息的地址的前缀信息（比较绕，看完整个例子，大概就能明白了）
registry.setApplicationDestinationPrefixes("/app")指服务端接收地址的前缀，意思就是说客户端给服务端发消息的地址的前缀
 * @Author:hui.yunfei@qq.com
 * @Date: 2019/5/31
 */
@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig extends AbstractWebSocketMessageBrokerConfigurer {
 
//  这个方法的作用是添加一个服务端点，来接收客户端的连接。
//  registry.addEndpoint("/socket")表示添加了一个/socket端点，客户端就可以通过这个端点来进行连接。
//  withSockJS()的作用是开启SockJS支持，
  @Override
  public void registerStompEndpoints(StompEndpointRegistry registry) {
    registry.addEndpoint("/socket").withSockJS();
  }
  @Override
  public void configureMessageBroker(MessageBrokerRegistry registry) {
    //表示客户端订阅地址的前缀信息，也就是客户端接收服务端消息的地址的前缀信息
    registry.enableSimpleBroker("/topic");
    //指服务端接收地址的前缀，意思就是说客户端给服务端发消息的地址的前缀
    registry.setApplicationDestinationPrefixes("/app");
  }
}

2.2：controller提供对应请求的接口

//页面请求
  @GetMapping("/socket2")
  public ModelAndView socket2() {//@PathVariable String userId
    ModelAndView mav=new ModelAndView("html/socket2");
    //mav.addObject("userId", userId);
    return mav;
  }
 
  /**
   * @Description:这个方法是接收客户端发送功公告的WebSocket请求，使用的是@MessageMapping
   * @Author:hui.yunfei@qq.com
   * @Date: 2019/5/31
   */
  @MessageMapping("/change-notice")//客户端访问服务端的时候config中配置的服务端接收前缀也要加上 例：/app/change-notice
  @SendTo("/topic/notice")//config中配置的订阅前缀记得要加上
  public CustomMessage greeting(CustomMessage message){
    System.out.println("服务端接收到消息："+message.toString());
    //我们使用这个方法进行消息的转发发送！
    //this.simpMessagingTemplate.convertAndSend("/topic/notice", value);(可以使用定时器定时发送消息到客户端)
    //    @Scheduled(fixedDelay = 1000L)
    //    public void time() {
    //      messagingTemplate.convertAndSend("/system/time", new Date().toString());
    //    }
    //也可以使用sendTo发送
    return message;
  }

2.3：提供socket2.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8" />
  <title>Spring Boot+WebSocket+广播式</title>
 
</head>
<body onload="disconnect()">
<noscript><h3 >貌似你的浏览器不支持websocket</h3></noscript>
<div>
  <div>
    <button id="connect" onclick="connect();">连接</button>
    <button id="disconnect" disabled="disabled" onclick="disconnect();">断开连接</button>
  </div>
  <div id="conversationDiv">
    <label>输入你的名字</label><input type="text" id="name" />
    <button id="sendName" onclick="sendName();">发送</button>
    <p id="response"></p>
  </div>
</div>
<script th:src="@{/js/sockjs.min.js}"></script>
<script th:src="@{/js/stomp.min.js}"></script>
<script th:src="@{/js/jquery-3.2.1.min.js}"></script>
<script type="text/javascript">
  var stompClient = null;
 
  function setConnected(connected) {
    document.getElementById('connect').disabled = connected;
    document.getElementById('disconnect').disabled = !connected;
    document.getElementById('conversationDiv').style.visibility = connected ? 'visible' : 'hidden';
    $('#response').html();
  }
 
  function connect() {
    var socket = new SockJS('/socket'); //1
    stompClient = Stomp.over(socket);//2
    stompClient.connect({}, function(frame) {//3
      setConnected(true);
      console.log('开始进行连接Connected: ' + frame);
      stompClient.subscribe('/topic/notice', function(respnose){ //4
        showResponse(JSON.parse(respnose.body).responseMessage);
      });
    });
  }
 
 
  function disconnect() {
    if (stompClient != null) {
      stompClient.disconnect();
    }
    setConnected(false);
    console.log("Disconnected");
  }
 
  function sendName() {
    var name = $('#name').val();
    stompClient.send("/app/change-notice", {}, JSON.stringify({ 'name': name }));//5
  }
 
  function showResponse(message) {
    var response = $("#response");
    response.html(message);
  }
</script>
</body>
</html>

2.4:对应的js引用可以去网上下载

2.5：浏览器debug访问localhost:8885/system/socket2，点击连接连接到服务器，数据内容可以推送到服务器以及服务器消息回推。

2.6：实现前端和服务端的轮训可以页面Ajax轮训也可以后端添加定时器

@Component
@EnableScheduling
public class TimeTask {
  private static Logger logger = LoggerFactory.getLogger(TimeTask.class);
 
  @Scheduled(cron = "0/20 * * * * ?")
  public void test(){
    System.err.println("*********  定时任务执行  **************");
    CopyOnWriteArraySet<WebSocketServer> webSocketSet =
        WebSocketServer.getWebSocketSet();
    int i = 0 ;
    webSocketSet.forEach(c->{
      try {
        c.sendMessage(" 定时发送 " + new Date().toLocaleString());
      } catch (IOException e) {
        e.printStackTrace();
      }
    });
 
    System.err.println("/n 定时任务完成.......");
  }
}

上述内容就是websocket怎么在springboot中使用，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注亿速云行业资讯频道。

向AI问一下细节

websocket怎么在springboot中使用

二、HTTP的长连接与websocket的持久连接

猜你喜欢

最新资讯

相关推荐

相关标签