Spring Boot 中的 SockJS原理及使用方法

 更新时间:2023年07月04日 14:44:00   作者:it_xushixiong  
SockJS 的主要作用是提供一种 WebSocket 的兼容性解决方案,使得不支持 WebSocket 的浏览器也可以使用 WebSocket,本文介绍了Spring Boot中的SockJS,包括SockJS的原理,使用方法和示例代码,感兴趣的朋友跟随小编一起看看吧

Spring Boot 中的 SockJS

在 Spring Boot 中,SockJS 是一个用于实现 WebSocket 的兼容性解决方案。本文将介绍 SockJS 的原理、使用方法和示例代码。

什么是 SockJS

SockJS 是一种浏览器与服务器之间的通信协议,它可以在浏览器和服务器之间建立一个基于 HTTP 的双向通信通道。SockJS 的主要作用是提供一种 WebSocket 的兼容性解决方案,使得不支持 WebSocket 的浏览器也可以使用 WebSocket。

SockJS 实现了一个 WebSocket 的兼容层,它可以在浏览器和服务器之间建立一个基于 HTTP 的通信通道,然后通过这个通道进行双向通信。当浏览器不支持 WebSocket 时,SockJS 会自动切换到使用轮询(polling)或长轮询(long-polling)的方式进行通信。

SockJS 的原理

SockJS 的原理是通过建立一个基于 HTTP 的通信通道来实现 WebSocket 的双向通信。当浏览器支持 WebSocket 时,SockJS 会直接使用 WebSocket 进行通信;当浏览器不支持 WebSocket 时,SockJS 会自动切换到使用轮询(polling)或长轮询(long-polling)的方式进行通信。

在使用 SockJS 时,首先需要在客户端和服务器端分别引入 sockjs-client.jssockjs-server,然后在客户端通过 new SockJS(url) 的方式建立一个 SockJS 连接。

客户端和服务器端之间的通信是基于事件的,当客户端发送消息时,服务器端会触发一个 onmessage 事件,然后将消息发送回客户端。客户端在接收到消息后,会触发一个 onmessage 事件,然后处理收到的消息。

如何使用 SockJS

使用 SockJS 非常简单,在 Spring Boot 中,只需要在配置文件中添加以下内容即可:

spring:
  websocket:
    enabled: true
    broker:
      relay-host: localhost
      relay-port: 61613
      user: guest
      password: guest
      relay-path: /stomp

以上配置表示启用 WebSocket,并将消息发送到 localhost61613 端口,使用 guest/guest 的用户名和密码进行认证,使用 /stomp 路径进行消息传输。

接下来,我们需要在客户端中建立一个 SockJS 连接,并实现 onmessage 事件的回调方法。代码如下:

var socket = new SockJS('/gs-guide-websocket');
stompClient = Stomp.over(socket);
stompClient.connect({}, function(frame) {
    stompClient.subscribe('/topic/greetings', function(greeting){
        showGreeting(JSON.parse(greeting.body).content);
    });
});

以上代码中,new SockJS('/gs-guide-websocket') 表示使用 /gs-guide-websocket 路径建立一个 SockJS 连接。stompClient.connect({}, function(frame){...}) 表示连接成功后执行的回调方法,stompClient.subscribe('/topic/greetings', function(greeting){...}) 表示订阅 /topic/greetings 目的地,当有消息发布到该目的地时触发回调方法。

最后,我们需要在服务器端实现消息发送和接收的功能。代码如下:

@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig extends AbstractWebSocketMessageBrokerConfigurer {
    @Override
    public void configureMessageBroker(MessageBrokerRegistry registry) {
        registry.enableStompBrokerRelay("/topic")
            .setRelayHost("localhost")
            .setRelayPort(61613)
            .setClientLogin("guest")
            .setClientPasscode("guest")
            .setSystemHeartbeatSendInterval(5000)
            .setSystemHeartbeatReceiveInterval(4000);
        registry.setApplicationDestinationPrefixes("/app");
    }
    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        registry.addEndpoint("/gs-guide-websocket").withSockJS();
    }
}

以上代码中,@EnableWebSocketMessageBroker 注解表示启用 WebSocket 消息代理,configureMessageBroker 方法用于配置消息代理,registerStompEndpoints 方法用于注册 SockJS 端点。

接下来,我们需要在控制器中实现消息发送和接收的功能。代码如下:

@Controller
public class GreetingController {
    @MessageMapping("/hello")
    @SendTo("/topic/greetings")
    public Greeting greeting(HelloMessage message) throws Exception {
        Thread.sleep(1000); // simulated delay
        return new Greeting("Hello, " + HtmlUtils.htmlEscape(message.getName()) + "!");
    }
}

以上代码中,@MessageMapping("/hello") 注解表示处理 /hello 目的地的消息,@SendTo("/topic/greetings") 注解表示将处理结果发送到 /topic/greetings 目的地。greeting 方法实现了消息的处理逻辑。

示例代码

以下是一个完整的示例代码,包括客户端和服务器端的代码:

客户端代码

<!DOCTYPE html>
<html>
<head>
    <title>Hello WebSocket</title>
    <script src="/webjars/sockjs-client/1.1.2/dist/sockjs.min.js"></script>
    <script src="/webjars/stomp-websocket/2.3.3/dist/stomp.min.js"></script>
    <script src="/js/app.js"></script>
</head>
<body>
    <div>
        <label>What is your name?</label>
        <input type="text" id="name" />
        <button type="button" onclick="send()">Send</button>
    </div>
    <div id="greetings">
    </div>
</body>
</html>
var socket = new SockJS('/gs-guide-websocket');
stompClient = Stomp.over(socket);
stompClient.connect({}, function(frame) {
    stompClient.subscribe('/topic/greetings', function(greeting){
        showGreeting(JSON.parse(greeting.body).content);
    });
});
function send() {
    var name = document.getElementById('name').value;
    stompClient.send("/app/hello", {}, JSON.stringify({ 'name': name }));
}
function showGreeting(message) {
    var div = document.createElement('div');
    div.appendChild(document.createTextNode(message));
    document.getElementById('greetings').appendChild(div);
}

服务器端代码

@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig extends AbstractWebSocketMessageBrokerConfigurer {
    @Override
    public void configureMessageBroker(MessageBrokerRegistry registry) {
        registry.enableStompBrokerRelay("/topic")
            .setRelayHost("localhost")
            .setRelayPort(61613)
            .setClientLogin("guest")
            .setClientPasscode("guest")
            .setSystemHeartbeatSendInterval(5000)
            .setSystemHeartbeatReceiveInterval(4000);
        registry.setApplicationDestinationPrefixes("/app");
    }
    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        registry.addEndpoint("/gs-guide-websocket").withSockJS();
    }
}
@Controller
public class GreetingController {
    @MessageMapping("/hello")
    @SendTo("/topic/greetings")
    public Greeting greeting(HelloMessage message) throws Exception {
        Thread.sleep(1000); // simulated delay
        return new Greeting("Hello, " + HtmlUtils.htmlEscape(message.getName()) + "!");
    }
}
public class HelloMessage {
    private String name;
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
}
public class Greeting {
    private String content;
    public Greeting(String content) {
        this.content = content;
    }
    public String getContent() {
        return content;
    }
}

以上代码实现了一个简单的聊天室,用户在输入框中输入自己的名字,然后点击发送按钮,将消息发送到服务器端,服务器端将收到的消息处理后发送回客户端,客户端显示收到的消息。当多个用户同时使用该聊天室时,每个用户都可以看到其他用户发送的消息。

总结

本文介绍了 Spring Boot 中的 SockJS,包括 SockJS 的原理、使用方法和示例代码

到此这篇关于Spring Boot 中的 SockJS的文章就介绍到这了,更多相关Spring Boot SockJS内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • SpringBoot加密配置文件的SQL账号密码方式

    SpringBoot加密配置文件的SQL账号密码方式

    这篇文章主要介绍了SpringBoot加密配置文件的SQL账号密码方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-06-06
  • Java线程池中的工作线程Worker类源码解析

    Java线程池中的工作线程Worker类源码解析

    这篇文章主要介绍了Java线程池中的工作线程Worker类源码解析,线程池中的工作线程是通过内部类Worker表示的,Worker继承自AbstractQueueSynchronizer,可以实现同步器的功能,需要的朋友可以参考下
    2023-12-12
  • Java中springboot搭建html的操作代码

    Java中springboot搭建html的操作代码

    这篇文章主要介绍了Java中springboot搭建html的相关操作,本文通过图文并茂的形式给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-08-08
  • java中CopyOnWriteArrayList源码解析

    java中CopyOnWriteArrayList源码解析

    为了将读取的性能发挥到极致,jdk中提供了CopyOnWriteArrayList类,下面这篇文章主要给大家介绍了关于java中CopyOnWriteArrayList源码解析的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-02-02
  • Java经典排序算法之希尔排序详解

    Java经典排序算法之希尔排序详解

    这篇文章主要为大家详细介绍了Java经典排序算法之希尔排序,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-04-04
  • SpringCloud之@FeignClient()注解的使用详解

    SpringCloud之@FeignClient()注解的使用详解

    @FeignClient是SpringCloud中用于声明一个Feign客户端的注解,用于解决模块方法互相调用的问题,Feign是一个声明式的WebService客户端,通过Feign,只需要创建一个接口,并使用注解来描述请求,就可以直接执行HTTP请求了
    2024-11-11
  • Apache Commons BeanUtils: JavaBean操作方法

    Apache Commons BeanUtils: JavaBean操作方法

    这篇文章主要介绍了Apache Commons BeanUtils: JavaBean操作的艺术,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-12-12
  • Java爬虫抓取视频网站下载链接

    Java爬虫抓取视频网站下载链接

    本文是通过JAVA获取优酷、土豆、酷6、6间房等视频,小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-10-10
  • Java 实现RSA非对称加密算法

    Java 实现RSA非对称加密算法

    RSA解决了对称加密的一个不足,比如AES算法加密和解密时使用的是同一个秘钥,因此这个秘钥不能公开,因此对于需要公开秘钥的场合,我们需要在加密和解密过程中使用不同的秘钥,加密使用的公钥可以公开,解密使用的私钥要保密,这就是非对称加密的好处。 
    2021-06-06
  • spring-redis-session 自定义 key 和过期时间

    spring-redis-session 自定义 key 和过期时间

    这篇文章主要介绍了spring-redis-session 自定义 key 和过期时间,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-12-12

最新评论