使用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
    评论
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值