Spring Boot 套接字(WebSocket)应用

前言

本篇只是简单概括广播式STMOP协议的应用
使用WebSocket(网络套接字）
相当于舍弃了HTTP协议，直接用套接字进行通信
我们知道socket需要服务端和客户端
而在广播式的应用中，一个客户端把信息发送给服务端
服务端开启循环监听，当有接受到信息请求时，再响应给所有客户端
这就是广播式WebSocket的编程思想

POM依赖

maven引入包（版本要一致）：

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-data-rest</artifactId>
    <version>1.5.8.RELEASE</version>
</dependency>

编写配置类

@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig extends AbstractWebSocketMessageBrokerConfigurer{
    @Override
    public void registerStompEndpoints(StompEndpointRegistry stompEndpointRegistry) {
        stompEndpointRegistry.addEndpoint("/endPoint").withSockJS();
        stompEndpointRegistry.addEndpoint("/lxt").withSockJS();
    }

    @Override
    public void configureMessageBroker(MessageBrokerRegistry registry) {
        registry.enableSimpleBroker("/topic","/queue");
    }
}

@EnableWebSocketMessageBroker：此注解开启STOMP协议来传输代理消息，如此这般控制器可以使用@MessageMapping（相当于@RequestMapping）

继承了AbstractWebSocketMessageBrokerConfigurer之后要实现的两个方法：
1.registerStompEndpoints设置SockJS的节点，与前端JS中的代码要统一
2.configureMessageBroker配置一个指定url的消息代理

需要的静态文件

1.stomp.min.js(STOMP协议的客户端脚本)
2.sockjs.min.js(SockJS的客户端脚本)
3.JQuery.js
这些配置文件可以放在resouces的static文件夹下

然后我们在application.properties中添加静态资源配置：

spring.resources.static-locations=classpath:/static

WebSocket广播式的控制器

以下贴出广播式控制器，点对点式的RESTful等待更新

@Controller
public class WSController {

    @MessageMapping("/index")
    @SendTo("/topic/clients")
    public R1 responseVoid(String message){
        return R1.add("msg",message);
    }
}

@MessageMapping("/index")：客户端发送信息给服务端的请求url
@SendTo("/topic/clients")：服务端广播给客户端的url

这样服务端的配置就基本完成了，WebSocket的主要配置在前端页面的JS代码中

前端JS代码

首先页面需要先调用之前的静态js文件（sockjs.min.js,stomp.min.js,jquery.js）
这里我只贴出js方法：
1.连接方法（连接的js方法可以在进入页面时设置全局js自动启动，也可以直接做按钮等）

function connect() {
    var sockjs = new SockJS('/endPoint');
    stompClient = Stomp.over(sockjs);
    stompClient.connect({},function (frame) {
        setConnected(true);
        console.log('Connected:'+frame);
        stompClient.subscribe('/topic/clients',function (response) {
                var response = $("#rongqi");
                response.html(JSON.parse(response.body).responseMessage)
            });
        });
}

new SockJS('/endPoint');响应服务端设置的节点
stompClient.subscribe();这个方法会循环监听，当服务端有数据传过来时，显示，你可以直接设置显示方法，第一个参数是服务端设定的@SendTo("")里的url

2.客户端发送信息API

function setMessgae() {
    stompClient.send("/index",{},JSON.stringify({'messgae':'hello'}));
}

stompClient.send();客户端发送请求，第一个参数是服务端的@MessageMapping中带的url，如上发送了一个键值对以JSON格式给服务端

3.客户端断开连接方法：

function disConnect() {
    stompClient.discount();
    console.log("连接已断开")
}

关于客户端的API还有很多，可以去看下官方的英文文档

以上便是广播式WebSocket的核心代码
谢谢阅读