使用websocket+socket.js+stomp.js+springboot

一、配置websocket

package com.kail.socketjsdome.socketjs.conf;

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

/**
 * @author :Dingmingming
 * @program :socketjs
 * @description :websocket configure
 * @create :2019-03-08  13:01
 **/
@Configuration
@EnableWebSocketMessageBroker
public class WebsocketConfigure implements WebSocketMessageBrokerConfigurer{
    /**
    * @Description: 注册stomp端点并将端点映射到特定的路径
    * @Param:
    * @return:
    * @Author: Dingmingming
    * @Date: 19-3-8
    **/
    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        registry.addEndpoint("/websocketjs") //注册一个断点 也可以理解为一个握手的地址
                .setAllowedOrigins("*")   //允许websocket跨域
                .withSockJS();            //启用websocket备选方案(浏览器不支持的话就会启动)
    }



    @Override
    public void configureMessageBroker(MessageBrokerRegistry registry) {
        //启用简单的消息代理
        registry.enableSimpleBroker("/user","/topic");
        //一对一时使用 给某个用户发送信息的前缀
        registry.setUserDestinationPrefix("/user");
        //前段访问服务端的前缀
        registry.setApplicationDestinationPrefixes("/app");
    }
}

二、controll配置

package com.kail.socketjsdome.socketjs.controll;

import org.springframework.messaging.handler.annotation.MessageMapping;
import org.springframework.messaging.handler.annotation.SendTo;
import org.springframework.messaging.simp.annotation.SendToUser;
import org.springframework.messaging.simp.annotation.SubscribeMapping;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RestController;

/**
 * @author :Dingmingming
 * @program :socketjs
 * @description :websocket controller
 * @create :2019-03-08  13:17
 **/
@RestController
public class WebSocketControll {
    
    //这个方法主要是用于前段的stompclient.send方法用的
    @MessageMapping("/message")
    public String methodWithMesssage(String name){
        System.out.println("进入了message注解方法"+name);
        return "message测试";
    }

    //这个可以不使用send方法进行访问,可以直接通过订阅(subscribe)进行访问
    @SubscribeMapping("/subscribe")
    public String methodWithSubscribe(){
        System.out.println("进入了subscribe注解方法");
        return "测试";
    }
}

三、页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="text" id="username" />
    <input type="button" onclick="conn()" value="连接"/>
    <input type="button" value="发送"/>
</body>
</html>
<!-- 这两个js一定要导入 -->
<script src="http://cdn.bootcss.com/stomp.js/2.3.3/stomp.min.js"></script>
<script src="https://cdn.bootcss.com/sockjs-client/1.1.4/sockjs.min.js"></script>
<script>
    //创建websocket对象用于握手
    var websocket=new SockJS("http://localhost:8080/websocketjs");
    //这个stompCLient对象主要是用于前后台交互用的
    var stompClient = Stomp.over(websocket);
    stompClient.connect(
        {},
        function connectCallback(frame) {
            // 连接成功时(服务器响应 CONNECTED 帧)的回调方法
            //这个是测试用的,你会发现这种访问是一次性的
            stompClient.subscribe("/app/subscribe",function(response){
                console.log(response.body);
            });
            //这个是订阅频道
            stompClient.subscribe("/topic/subscribe",function(response){
                console.log(response);
            });

            //给后台传递参数
            stompClient.send("/app/message",{},"zhangsan")

            //这种方式没什么用没有响应
            stompClient.subscribe("/app/message",function(response){
                console.log(response);
            });

        },
        function errorCallBack(error) {
            // 连接失败时(服务器响应 ERROR 帧)的回调方法
            console.error("连接失败");
        }
    );
    //这个是订阅用户频道
    function conn(){
        var username=document.getElementById('username').value;
        stompClient.subscribe('/user/' + username + '/message',function (response) {
            console.log("服务器推送内容为:   :"+response);
        });
    };


</script>

四、相关解释

后端推送信息到前端有有两种方式(注解和SimpMessagingTemplate)

@SendTo("广播地址")   如前段订阅了/topic/subscribe  那么就是在message方法上使用@SendTo(/topic/subscribe) 这是广播

@SendToUser("用户地址") 如前段订阅了subscribe('/user/' + username + '/message') 那么在相应的@MessageMapping注解方法上加上SendToUser("/username/message")//这个username是前台的名称,至于为什么没有加入/user 那是因为注解会自己加入

 

其次就是SimpMessagingTemplate

创建对象

@Autowired
private SimpMessagingTemplate simpMessagingTemplate;

发送广播

 simpMessagingTemplate.convertAndSend("/topic/message","topic推送消息");

一对一(发送给用户)

simpMessagingTemplate.convertAndSendToUser("username","/message","推送消息");
/**
 *什么时候用app和topic
 * app是页面发送消息到达客户端(stompClient.seng()方法和带有@SubscribeMapping注解的方法可以使用(该方法发送完成接收数据之后就会断开,不像订阅那样保持一个不会断开的连接)),topic是页面订阅的路径(这个一般只有在stompClient.subscribe()方法才会用到)
 * sendto注解是将参数转发到其他某个频道,换种说法就是转发(广播形式)
 *sendtouser注解是将参数到某个用户频道,这种就是一对一的方式,同上(一对一)
 *什么时候用messagemapping和subscribemapping
 *messagemapping注解方法,通过stompclient.send()会执行方法体(加入sendto注解就不会执行了)也能够订阅
 *subscribemapping注解方法可以通过stompclient.subscribe(“/app/subscribe”)进行访问可以执行方法体,也可以订阅
**/

 

看完可以评论一下,有什么高见也可以告诉楼主哦,也是没有学多久,希望对大家有用!!!

  • 1
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
好的,我可以为您详细说明一下stomp+websocket+springboot的实现方式。 首先,stomp是基于WebSocket协议的一种消息传输协议。它提供了一种简单的方式来实现消息传输,使得客户端和服务器之间可以通过WebSocket进行双向通信。而Spring Boot是一个快速开发Web应用程序的框架,它提供了对WebSocketSTOMP的内置支持,使得我们可以轻松地实现基于WebSocketSTOMP的应用程序。 下面是stomp+websocket+springboot的实现步骤: 1. 添加依赖 首先,在Spring Boot项目中添加以下依赖: ```xml <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-websocket</artifactId> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> ``` 2. 配置WebSocket 在Spring Boot项目中,我们需要配置WebSocket。我们可以创建一个WebSocketConfig类,用来配置WebSocket相关的参数。在WebSocketConfig类中,我们需要覆盖registerStompEndpoints方法,该方法用于注册一个或多个STOMP端点,以便客户端可以连接到我们的WebSocket服务器。 ```java @Configuration @EnableWebSocketMessageBroker public class WebSocketConfig implements WebSocketMessageBrokerConfigurer { @Override public void registerStompEndpoints(StompEndpointRegistry registry) { registry.addEndpoint("/websocket").withSockJS(); } @Override public void configureMessageBroker(MessageBrokerRegistry config) { config.enableSimpleBroker("/topic"); config.setApplicationDestinationPrefixes("/app"); } } ``` 在上面的代码中,我们注册了一个名为“/websocket”的STOMP端点,并启用了SockJS协议。这意味着我们的应用程序将支持基于WebSocket的连接,以及使用SockJSWebSocket连接。 3. 消息处理 在WebSocketConfig类中,我们还需要配置消息处理。我们可以使用@MessageMapping注解来处理从客户端发送的消息,@SendTo注解将处理结果发送回客户端。例如: ```java @Controller public class WebSocketController { @MessageMapping("/hello") @SendTo("/topic/greetings") public Greeting greeting(HelloMessage message) throws Exception { Thread.sleep(1000); return new Greeting("Hello, " + message.getName() + "!"); } } ``` 在上面的代码中,我们定义了一个名为“/hello”的消息映射,该映射将处理从客户端发送的消息。我们使用@SendTo注解将处理结果发送回客户端。 4. 客户端代码 最后,我们需要编写客户端代码来连接WebSocket服务器,并发送和接收消息。我们可以使用JavaScript或Java等语言编写客户端代码。以下是一个使用JavaScript编写的简单客户端代码示例: ```javascript var stompClient = null; function connect() { var socket = new SockJS('/websocket'); stompClient = Stomp.over(socket); stompClient.connect({}, function (frame) { console.log('Connected: ' + frame); stompClient.subscribe('/topic/greetings', function (greeting) { showGreeting(JSON.parse(greeting.body).content); }); }); } function sendName() { var name = document.getElementById('name').value; stompClient.send("/app/hello", {}, JSON.stringify({ 'name': name })); } function showGreeting(message) { var p = document.createElement('p'); p.appendChild(document.createTextNode(message)); document.getElementById('greetings').appendChild(p); } ``` 在上面的代码中,我们使用SockJSStomp.js库来连接WebSocket服务器,并发送和接收消息。我们使用subscribe方法来订阅指定的STOMP端点,并使用send方法来发送消息。 总结 以上就是stomp+websocket+springboot的实现方式。通过以上步骤,我们可以轻松地实现基于WebSocketSTOMP的应用程序,实现客户端和服务器之间的双向通信。
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值