springboot websocket後台主動推送消息

springboot,websocket,後台主動推送消息

1.pom

[html] view plain copy

1. <?xml

   version="1.0" encoding="UTF-8"

   ?>

2. <project

   xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
3. xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"

   >

4. <modelVersion>

   4.0.0

   </modelVersion>

6. <groupId>

   com.liuxl.cartmall

   </groupId>

7. <artifactId>

   spring-websocket

   </artifactId>

8. <version>

   0.0.1-SNAPSHOT

   </version>

9. <packaging>

   jar

   </packaging>

11. <name>

    spring-websocket

    </name>

12. <description>

    Demo project for Spring Boot
13. https://spring.io/guides/gs/messaging-stomp-websocket/

    </description>

15. <parent>

16. <groupId>

    org.springframework.boot

    </groupId>

17. <artifactId>

    spring-boot-starter-parent

    </artifactId>

18. <version>

    2.0.2.RELEASE

    </version>

19. <relativePath/>

    <!-- lookup parent from repository -->

20. </parent>

22. <properties>

23. <project.build.sourceEncoding>

    UTF-8

    </project.build.sourceEncoding>

24. <project.reporting.outputEncoding>

    UTF-8

    </project.reporting.outputEncoding>

25. <java.version>

    1.8

    </java.version>

26. </properties>

28. <dependencies>

29. <dependency>

30. <groupId>

    org.springframework.boot

    </groupId>

31. <artifactId>

    spring-boot-starter-websocket

    </artifactId>

32. </dependency>

34. <dependency>

35. <groupId>

    org.webjars

    </groupId>

36. <artifactId>

    webjars-locator-core

    </artifactId>

37. </dependency>

38. <dependency>

39. <groupId>

    org.webjars

    </groupId>

40. <artifactId>

    sockjs-client

    </artifactId>

41. <version>

    1.0.2

    </version>

42. </dependency>

43. <dependency>

44. <groupId>

    org.webjars

    </groupId>

45. <artifactId>

    stomp-websocket

    </artifactId>

46. <version>

    2.3.3

    </version>

47. </dependency>

48. <dependency>

49. <groupId>

    org.webjars

    </groupId>

50. <artifactId>

    bootstrap

    </artifactId>

51. <version>

    3.3.7

    </version>

52. </dependency>

53. <dependency>

54. <groupId>

    org.webjars

    </groupId>

55. <artifactId>

    jquery

    </artifactId>

56. <version>

    3.1.0

    </version>

57. </dependency>

59. <dependency>

60. <groupId>

    org.springframework.boot

    </groupId>

61. <artifactId>

    spring-boot-starter-test

    </artifactId>

62. <scope>

    test

    </scope>

63. </dependency>

64. </dependencies>

65. <build>

66. <plugins>

67. <plugin>

68. <groupId>

    org.springframework.boot

    </groupId>

69. <artifactId>

    spring-boot-maven-plugin

    </artifactId>

70. </plugin>

71. </plugins>

72. </build>

75. </project>

2.SpringWebsocketApplication springboot 啟動類

[csharp] view plain copy

1. package com.liuxl.cartmall;
3. import org.springframework.boot.SpringApplication;
4. import org.springframework.boot.autoconfigure.SpringBootApplication;
6. @SpringBootApplication

7. public

   class

   SpringWebsocketApplication {

9. public

   static

   void

   main(String[] args) {
10. SpringApplication.run(SpringWebsocketApplication.

    class

    , args);
11. }
12. }

3.WebSocketConfig

[java] view plain copy

1. package

   com.liuxl.cartmall.websocket;

3. import

   org.springframework.context.annotation.Configuration;

4. import

   org.springframework.messaging.simp.config.MessageBrokerRegistry;

5. import

   org.springframework.web.socket.config.annotation.EnableWebSocketMessageBroker;

6. import

   org.springframework.web.socket.config.annotation.StompEndpointRegistry;

7. import

   org.springframework.web.socket.config.annotation.WebSocketMessageBrokerConfigurer;
9. //@EnableWebSocketMessageBroker註解表示開啟使用STOMP協議來傳輸基於代理的消息，Broker就是代理的意思。
10. @Configuration
11. @EnableWebSocketMessageBroker

12. public

    class

    WebSocketConfig

    implements

    WebSocketMessageBrokerConfigurer {
13. @Override

14. public

    void

    configureMessageBroker(MessageBrokerRegistry registry) {
15. // 訂閱Broker名稱
16. registry.enableSimpleBroker("/topic");
17. // 全局使用的消息前綴（客戶端訂閱路徑上會體現出來）
18. registry.setApplicationDestinationPrefixes("/app");
19. // 點對點使用的訂閱前綴（客戶端訂閱路徑上會體現出來），不設置的話，默認也是/user/
20. // registry.setUserDestinationPrefix("/user/");
21. }
23. // registerStompEndpoints方法表示註冊STOMP協議的節點，並指定映射的URL。
24. @Override

25. public

    void

    registerStompEndpoints(StompEndpointRegistry registry) {
26. // 這一行代碼用來註冊STOMP協議節點，同時指定使用SockJS協議。
27. registry.addEndpoint("/gs-guide-websocket").setAllowedOrigins("*").withSockJS();
28. }
30. }

4.Greeting，HelloMessage

[java] view plain copy

1. package

   com.liuxl.cartmall.websocket;

3. public

   class

   Greeting {

4. private

   String content;

6. public

   Greeting() {
7. }

9. public

   Greeting(String content) {

10. this

    .content = content;
11. }

13. public

    String getContent() {

14. return

    content;
15. }
16. }

[java] view plain copy

1. package

   com.liuxl.cartmall.websocket;

3. public

   class

   HelloMessage {

5. private

   String name;

7. public

   HelloMessage() {
8. }

10. public

    HelloMessage(String name) {

11. this

    .name = name;
12. }

14. public

    String getName() {

15. return

    name;
16. }

18. public

    void

    setName(String name) {

19. this

    .name = name;
20. }
21. }

5.GreetingController

[java] view plain copy

1. package

   com.liuxl.cartmall.websocket;

3. import

   org.slf4j.Logger;

4. import

   org.slf4j.LoggerFactory;

5. import

   org.springframework.beans.factory.annotation.Autowired;

6. import

   org.springframework.messaging.handler.annotation.MessageMapping;

7. import

   org.springframework.messaging.handler.annotation.SendTo;

8. import

   org.springframework.messaging.simp.SimpMessagingTemplate;

9. import

   org.springframework.stereotype.Controller;

10. import

    org.springframework.web.bind.annotation.RequestMapping;

11. import

    org.springframework.web.bind.annotation.ResponseBody;

12. import

    org.springframework.web.util.HtmlUtils;
14. @Controller

15. public

    class

    GreetingController {

17. private

    Logger logger = LoggerFactory.getLogger(

    this

    .getClass());
19. @Autowired

20. private

    SimpMessagingTemplate messagingTemplate;
22. // @MessageMapping註解和我們之前使用的@RequestMapping類似
23. // @SendTo註解表示當伺服器有消息需要推送的時候，會對訂閱了@SendTo中路徑的瀏覽器發送消息。
24. @MessageMapping("/hello")
25. @SendTo("/topic/greetings")

26. public

    Greeting greeting(HelloMessage message)

    throws

    Exception {
27. Thread.sleep(1000); // simulated delay

28. return

    new

    Greeting("Hello, " + HtmlUtils.htmlEscape(message.getName()) + "!");
29. }
31. @RequestMapping("/send")
32. @ResponseBody

33. public

    void

    send(){
34. templateTest();
35. }
38. //客戶端只要訂閱了/topic/subscribeTest主題，調用這個方法即可

39. public

    void

    templateTest() {
40. messagingTemplate.convertAndSend("/topic/greetings",

    new

    Greeting("伺服器主動推的數據"));
41. }
42. }

6.後台 messagingTemplate.convertAndSend("/topic/greetings", new Greeting("伺服器主動推的數據")); 就可以實現主動推送到前台了

7.index.js

[javascript] view plain copy

1. var

   stompClient =

   null

   ;
2. /**
3. * 建立webshocket連接
4. */

5. function

   connect() {
6. // 建立連接對象（還未發起連接）

7. var

   socket =

   new

   SockJS("/gs-guide-websocket");
8. // 獲取 STOMP 子協議的客戶端對象
9. stompClient = Stomp.over(socket);
10. // 向伺服器發起websocket連接並發送CONNECT幀
11. stompClient.connect({},

    function

    (frame) {
12. // 連接成功時（伺服器響應 CONNECTED 幀）的回調方法
13. // setConnected(true);
14. console.log("Connected: " + frame);
15. stompClient.subscribe("/topic/greetings",

    function

    (greeting) {
16. showGreeting(JSON.parse(greeting.body).content);
17. });
18. },

    function

    errorCallBack(error) {
19. // 連接失敗時（伺服器響應 ERROR 幀）的回調方法
20. });
21. }

23. function

    showGreeting(content) {
24. $("#daiban_count").text(content);
25. }
26. $(

    function

    () {
27. // 監聽信息
28. connect();
29. });

7.需要源碼，去git下載，下載地址是：spring-websocket

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！