快捷導(dǎo)航

詳解spring boot實(shí)現(xiàn)websocket

更新時(shí)間：2017年06月26日 17:19:56 作者：劉冬

這篇文章主要介紹了詳解spring boot實(shí)現(xiàn)websocket，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

前言

QQ這類即時(shí)通訊工具多數(shù)是以桌面應(yīng)用的方式存在。在沒(méi)有websocket出現(xiàn)之前，如果開(kāi)發(fā)一個(gè)網(wǎng)頁(yè)版的即時(shí)通訊應(yīng)用，則需要定時(shí)刷新頁(yè)面或定時(shí)調(diào)用ajax請(qǐng)求，這無(wú)疑會(huì)加大服務(wù)器的負(fù)載和增加了客戶端的流量。而websocket的出現(xiàn)，則完美的解決了這些問(wèn)題。

spring boot對(duì)websocket進(jìn)行了封裝，這對(duì)實(shí)現(xiàn)一個(gè)websocket網(wǎng)頁(yè)即時(shí)通訊應(yīng)用來(lái)說(shuō)，變得非常簡(jiǎn)單。

一、準(zhǔn)備工作

pom.xml引入

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

完整的pom.xml文件代碼如下：

<?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 http://maven.apache.org/xsd/maven-4.0.0.xsd">
  <modelVersion>4.0.0</modelVersion>

  <groupId>com.example</groupId>
  <artifactId>spring-boot-16</artifactId>
  <version>0.0.1-SNAPSHOT</version>
  <packaging>jar</packaging>

  <name>spring-boot-16</name>
  <description>Demo project for Spring Boot</description>

  <parent>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-parent</artifactId>
    <version>1.5.3.RELEASE</version>
    <relativePath /> <!-- lookup parent from repository -->
  </parent>

  <properties>
    <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
    <java.version>1.8</java.version>
  </properties>

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

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

  </dependencies>

  <build>
    <plugins>
      <plugin>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-maven-plugin</artifactId>
      </plugin>
    </plugins>
  </build>


</project>

二、代碼編寫(xiě)

1.創(chuàng)建名為“WebSocketConfig.java”的類來(lái)配置websocket，并繼承抽象類“AbstractWebSocketMessageBrokerConfigurer”

此類聲明“@EnableWebSocketMessageBroker”的注解

package com.example;

import org.springframework.context.annotation.Configuration;
import org.springframework.messaging.simp.config.MessageBrokerRegistry;
import org.springframework.web.socket.config.annotation.AbstractWebSocketMessageBrokerConfigurer;
import org.springframework.web.socket.config.annotation.EnableWebSocketMessageBroker;
import org.springframework.web.socket.config.annotation.StompEndpointRegistry;

@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();
  }

}

這里配置了以“/app”開(kāi)頭的websocket請(qǐng)求url。和名為“my-websocket”的endpoint(端點(diǎn))

2.編寫(xiě)一個(gè)DTO類來(lái)承載消息：

package com.example;

public class SocketMessage {

  public String message;

  public String date;

}

3.創(chuàng)建App.java類，用于啟用spring boot和用于接收、發(fā)送消息的控制器。

package com.example;

import java.text.DateFormat;
import java.text.SimpleDateFormat;
import java.util.Date;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.messaging.handler.annotation.MessageMapping;
import org.springframework.messaging.handler.annotation.SendTo;
import org.springframework.messaging.simp.SimpMessagingTemplate;
import org.springframework.scheduling.annotation.EnableScheduling;
import org.springframework.scheduling.annotation.Scheduled;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
@EnableScheduling
@SpringBootApplication
public class App {

  public static void main(String[] args) {
    SpringApplication.run(App.class, args);
  }

  @Autowired
  private SimpMessagingTemplate messagingTemplate;

  @GetMapping("/")
  public String index() {
    return "index";
  }

  @MessageMapping("/send")
  @SendTo("/topic/send")
  public SocketMessage send(SocketMessage message) throws Exception {
    DateFormat df = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
    message.date = df.format(new Date());
    return message;
  }

  @Scheduled(fixedRate = 1000)
  @SendTo("/topic/callback")
  public Object callback() throws Exception {
    // 發(fā)現(xiàn)消息
    DateFormat df = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
    messagingTemplate.convertAndSend("/topic/callback", df.format(new Date()));
    return "callback";
  }
}

“send”方法用于接收客戶端發(fā)送過(guò)來(lái)的websocket請(qǐng)求。

@EnableScheduling注解為：?jiǎn)⒂胹pring boot的定時(shí)任務(wù)，這與“callback”方法相呼應(yīng)，用于每隔1秒推送服務(wù)器端的時(shí)間。

4.在“resources/templates”目錄下創(chuàng)建index.html文件：

<!DOCTYPE html>
<html>
<head>
<title>玩轉(zhuǎn)spring boot——websocket</title>
<script src="http://cdn.bootcss.com/angular.js/1.5.6/angular.min.js"></script>
<script src="https://cdn.bootcss.com/sockjs-client/1.1.4/sockjs.min.js"></script>
<script src="https://cdn.bootcss.com/stomp.js/2.3.3/stomp.min.js"></script>
<script type="text/javascript">
  /*<![CDATA[*/

  var stompClient = null;

  var app = angular.module('app', []);
  app.controller('MainController', function($rootScope, $scope, $http) {

    $scope.data = {
      //連接狀態(tài)
      connected : false,
      //消息
      message : '',
      rows : []
    };

    //連接
    $scope.connect = function() {
      var socket = new SockJS('/my-websocket');
      stompClient = Stomp.over(socket);
      stompClient.connect({}, function(frame) {
        // 注冊(cè)發(fā)送消息
        stompClient.subscribe('/topic/send', function(msg) {
          $scope.data.rows.push(JSON.parse(msg.body));
          $scope.data.connected = true;
          $scope.$apply();
        });
        // 注冊(cè)推送時(shí)間回調(diào)
        stompClient.subscribe('/topic/callback', function(r) {
          $scope.data.time = '當(dāng)前服務(wù)器時(shí)間：' + r.body;
          $scope.data.connected = true;
          $scope.$apply();
        });

        $scope.data.connected = true;
        $scope.$apply();
      });
    };

    $scope.disconnect = function() {
      if (stompClient != null) {
        stompClient.disconnect();
      }
      $scope.data.connected = false;
    }

    $scope.send = function() {
      stompClient.send("/app/send", {}, JSON.stringify({
        'message' : $scope.data.message
      }));
    }
  });
  /*]]>*/
</script>
</head>
<body ng-app="app" ng-controller="MainController">

  <h2>玩轉(zhuǎn)spring boot——websocket</h2>
  <h4>
    出處：劉冬博客 <a  rel="external nofollow" >http://www.cnblogs.com/goodhelper</a>
  </h4>

  <label>WebSocket連接狀態(tài):</label>
  <button type="button" ng-disabled="data.connected" ng-click="connect()">連接</button>
  <button type="button" ng-click="disconnect()"
    ng-disabled="!data.connected">斷開(kāi)</button>
  <br />
  <br />
  <div ng-show="data.connected">
    <label>{{data.time}}</label> <br /> <br /> <input type="text"
      ng-model="data.message" placeholder="請(qǐng)輸入內(nèi)容..." />
    <button ng-click="send()" type="button">發(fā)送</button>
    <br /> <br /> 消息列表： <br />
    <table>
      <thead>
        <tr>
          <th>內(nèi)容</th>
          <th>時(shí)間</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="row in data.rows">
          <td>{{row.message}}</td>
          <td>{{row.date}}</td>
        </tr>
      </tbody>
    </table>
  </div>
</body>
</html>

除了引用angular.js的CDN文件外，還需要引用sockjs和stomp。

完整的項(xiàng)目結(jié)構(gòu)，如下圖所示：